@juligc99/loro-ui 0.0.16 → 0.0.18

package/fesm2022/juligc99-loro-ui.mjs

@@ -1,19 +1,29 @@
 import * as i0 from '@angular/core';
-import { ChangeDetectionStrategy, Component, input, computed, output, inject, Injectable, signal, model, viewChild, effect } from '@angular/core';
+import { input, ChangeDetectionStrategy, Component, computed, output, signal, effect, inject, Injectable, model, viewChild, DestroyRef } from '@angular/core';
 import { Toolbar, ToolbarWidget } from '@angular/aria/toolbar';
-import { DOCUMENT, DecimalPipe } from '@angular/common';
+import { DOCUMENT } from '@angular/common';
 import { Capacitor } from '@capacitor/core';
 import { ImpactStyle, Haptics, NotificationType } from '@capacitor/haptics';
-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\">\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 });
+const LORO_FOOTER_DEFAULT_TITLE = '© 2026 Al Loro App. Todos los derechos reservados.';
+const LORO_FOOTER_DEFAULT_LINKS = [
+    { label: 'Términos', href: '#' },
+    { label: 'Privacidad', href: '#' },
+    { label: 'Soporte', href: '#' },
+];
+
+class LoroFooter {
+    /** Main footer copy shown before the link list. */
+    title = input(LORO_FOOTER_DEFAULT_TITLE, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** Inline footer navigation links. */
+    links = input(LORO_FOOTER_DEFAULT_LINKS, ...(ngDevMode ? [{ debugName: "links" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroFooter, isStandalone: true, selector: "loro-footer", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<footer class=\"loro-footer\">\n  <div class=\"loro-footer__meta\">\n    <span class=\"loro-footer__dot\" aria-hidden=\"true\"></span>\n    <p class=\"loro-footer__title\">{{ title() }}</p>\n  </div>\n\n  @if (links().length > 0) {\n    <nav class=\"loro-footer__links\" aria-label=\"Footer links\">\n      @for (link of links(); track link.href) {\n        <a class=\"loro-footer__link\" [href]=\"link.href\">{{ link.label }}</a>\n      }\n    </nav>\n  }\n</footer>\n", 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__title{margin:0}.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__link{color:inherit;text-decoration:none;transition:color .18s ease}.loro-footer__link:hover{color:var(--loro-primary-500)}@media(min-width:1024px){.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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroFooter, decorators: [{
             type: Component,
-            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"] }]
-        }] });
+            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\" aria-hidden=\"true\"></span>\n    <p class=\"loro-footer__title\">{{ title() }}</p>\n  </div>\n\n  @if (links().length > 0) {\n    <nav class=\"loro-footer__links\" aria-label=\"Footer links\">\n      @for (link of links(); track link.href) {\n        <a class=\"loro-footer__link\" [href]=\"link.href\">{{ link.label }}</a>\n      }\n    </nav>\n  }\n</footer>\n", 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__title{margin:0}.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__link{color:inherit;text-decoration:none;transition:color .18s ease}.loro-footer__link:hover{color:var(--loro-primary-500)}@media(min-width:1024px){.loro-footer{flex-direction:row}.loro-footer__meta{text-align:left}}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], links: [{ type: i0.Input, args: [{ isSignal: true, alias: "links", required: false }] }] } });
 
 /* This file is generated by projects/loro-ui/scripts/generate-asset-manifest.mjs. */
 const LORO_ICON_ASSETS = [
@@ -412,6 +422,12 @@ const LORO_ICON_ASSETS = [
         "path": "assets/loro-ui/icons/warning.svg",
         "layer": "Status",
         "fileName": "warning.svg"
+    },
+    {
+        "name": "icon-x",
+        "path": "assets/loro-ui/icons/x.svg",
+        "layer": "Product",
+        "fileName": "x.svg"
     }
 ];
 const LORO_ICON_PATHS = {
@@ -480,7 +496,8 @@ const LORO_ICON_PATHS = {
     "icon-trash": "assets/loro-ui/icons/trash.svg",
     "icon-trend": "assets/loro-ui/icons/trend.svg",
     "icon-user": "assets/loro-ui/icons/user.svg",
-    "icon-warning": "assets/loro-ui/icons/warning.svg"
+    "icon-warning": "assets/loro-ui/icons/warning.svg",
+    "icon-x": "assets/loro-ui/icons/x.svg"
 };
 const LORO_ICON_LEGACY_NAMES = {
     "apple": "icon-apple",
@@ -548,7 +565,8 @@ const LORO_ICON_LEGACY_NAMES = {
     "trash": "icon-trash",
     "trend": "icon-trend",
     "user": "icon-user",
-    "warning": "icon-warning"
+    "warning": "icon-warning",
+    "x": "icon-x"
 };
 const LORO_IMAGE_ASSETS = [
     {
@@ -1028,43 +1046,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             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 }] }] } });
 
+const LORO_ACCORDION_DEFAULTS = {
+    icon: 'help',
+    expanded: 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 */ []));
+    icon = input(LORO_ACCORDION_DEFAULTS.icon, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    expanded = input(LORO_ACCORDION_DEFAULTS.expanded, ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
     expandedChange = output();
+    isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            this.isExpanded.set(this.expanded());
+        });
+    }
+    toggleExpanded() {
+        const nextExpanded = !this.isExpanded();
+        this.isExpanded.set(nextExpanded);
+        this.expandedChange.emit(nextExpanded);
+    }
     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, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroAccordion, isStandalone: true, selector: "loro-accordion", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedChange: "expandedChange" }, ngImport: i0, template: "<article class=\"loro-accordion\" [class.loro-accordion--open]=\"isExpanded()\">\n  <button\n    type=\"button\"\n    class=\"loro-accordion__header\"\n    [attr.aria-expanded]=\"isExpanded()\"\n    (click)=\"toggleExpanded()\"\n  >\n    @if (icon()) {\n      <span class=\"loro-accordion__icon\">\n        <loro-icon [name]=\"icon()!\" [size]=\"24\" [alt]=\"title()\" color=\"primary\" />\n      </span>\n    }\n\n    <span class=\"loro-accordion__title\">{{ title() }}</span>\n\n    <loro-icon\n      class=\"loro-accordion__toggle\"\n      [name]=\"isExpanded() ? 'chevron-up' : 'chevron-down'\"\n      [size]=\"22\"\n      alt=\"Expandir\"\n      color=\"primary\"\n    />\n  </button>\n\n  @if (isExpanded()) {\n    <div class=\"loro-accordion__body\">\n      <ng-content />\n    </div>\n  }\n</article>\n", 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:color-mix(in srgb,var(--loro-primary-500) 34%,transparent)}.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__toggle{flex:0 0 auto}.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()\">\n      <button type=\"button\" class=\"loro-accordion__header\" (click)=\"expandedChange.emit(!expanded())\">\n        @if (icon()) {\n          <span class=\"loro-accordion__icon\">\n            <loro-icon [name]=\"icon()!\" [size]=\"24\" [alt]=\"title()\" color=\"primary\" />\n          </span>\n        }\n        <span class=\"loro-accordion__title\">{{ title() }}</span>\n        <loro-icon [name]=\"expanded() ? 'chevron-up' : 'chevron-down'\" [size]=\"22\" alt=\"Expandir\" color=\"primary\" />\n      </button>\n      @if (expanded()) {\n        <div class=\"loro-accordion__body\">\n          <ng-content />\n        </div>\n      }\n    </article>", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-accordion{overflow:hidden;border:1px solid var(--loro-border-subtle);border-radius:1rem;background:var(--loro-surface);box-shadow:var(--loro-shadow-soft)}.loro-accordion--open{border-color:#6c3cff57}.loro-accordion__header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.9rem;width:100%;min-height:4.3rem;padding:0 1.1rem;border:0;background:transparent;color:var(--loro-text-strong);font:inherit;text-align:left;cursor:pointer}.loro-accordion__icon{display:grid;width:2.6rem;height:2.6rem;place-items:center;border-radius:50%;background:var(--loro-brand-tint-surface)}.loro-accordion__title{font-size:1rem;font-weight:900;line-height:1.25}.loro-accordion__body{padding:0 1.35rem 1.35rem;color:var(--loro-muted-strong);font-size:.94rem;font-weight:600;line-height:1.65}\n"] }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }] } });
-
-class LoroImage {
-    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
-    alt = input('', ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
-    size = input('', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
-    height = input('auto', ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
-    fit = input('contain', ...(ngDevMode ? [{ debugName: "fit" }] : /* istanbul ignore next */ []));
-    assetName = computed(() => {
-        const name = this.name();
-        return (name in LORO_IMAGE_PATHS
-            ? name
-            : LORO_IMAGE_LEGACY_NAMES[name]);
-    }, ...(ngDevMode ? [{ debugName: "assetName" }] : /* istanbul ignore next */ []));
-    src = computed(() => LORO_IMAGE_PATHS[this.assetName()], ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
-    altText = computed(() => this.alt(), ...(ngDevMode ? [{ debugName: "altText" }] : /* istanbul ignore next */ []));
-    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\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\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 }] }] } });
+            args: [{ selector: 'loro-accordion', standalone: true, imports: [LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"loro-accordion\" [class.loro-accordion--open]=\"isExpanded()\">\n  <button\n    type=\"button\"\n    class=\"loro-accordion__header\"\n    [attr.aria-expanded]=\"isExpanded()\"\n    (click)=\"toggleExpanded()\"\n  >\n    @if (icon()) {\n      <span class=\"loro-accordion__icon\">\n        <loro-icon [name]=\"icon()!\" [size]=\"24\" [alt]=\"title()\" color=\"primary\" />\n      </span>\n    }\n\n    <span class=\"loro-accordion__title\">{{ title() }}</span>\n\n    <loro-icon\n      class=\"loro-accordion__toggle\"\n      [name]=\"isExpanded() ? 'chevron-up' : 'chevron-down'\"\n      [size]=\"22\"\n      alt=\"Expandir\"\n      color=\"primary\"\n    />\n  </button>\n\n  @if (isExpanded()) {\n    <div class=\"loro-accordion__body\">\n      <ng-content />\n    </div>\n  }\n</article>\n", 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:color-mix(in srgb,var(--loro-primary-500) 34%,transparent)}.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__toggle{flex:0 0 auto}.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"] }]
+        }], ctorParameters: () => [], 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 LoroHapticsService {
     document = inject(DOCUMENT);
@@ -1126,254 +1135,201 @@ 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: '',
+    icon: null,
+    iconColor: null,
+    iconOnly: false,
+    iconSize: 22,
     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: '',
+    width: 'fit-content',
+    ariaLabel: '',
+    ariaDescription: '',
 };
-/**
- * Valid options for button variants
- */
 const LORO_BUTTON_VARIANTS = [
     'primary',
-    'outline',
-    'ghost',
+    'secondary',
+    'tertiary',
     'danger',
     'soft',
     'social',
-    'action',
-    'navigation',
+    'loading',
+    'disabled',
 ];
-/**
- * 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',
-};
+const LORO_BUTTON_ICON_SIZES = [
+    16,
+    18,
+    20,
+    22,
+    24,
+    28,
+    32,
+    36,
+    40,
+];
 
 /**
- * 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.
+ * Reusable action button with a compact public API.
  *
- * @example
- * ```html
- * <loro-button
- *   [text]="'Click me'"
- *   variant="primary"
- *   size="md"
- *   (change)="onButtonClick()"
- * />
- * ```
+ * Mobile-first by default. Desktop refinements live in the component stylesheet
+ * through the shared breakpoint helpers.
  */
 class LoroButton {
-    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    text = input('', ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
-    icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-    iconContent = input(null, ...(ngDevMode ? [{ debugName: "iconContent" }] : /* istanbul ignore next */ []));
-    iconMode = input('none', ...(ngDevMode ? [{ debugName: "iconMode" }] : /* istanbul ignore next */ []));
-    iconSize = input(23, ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
-    iconButtonSize = input(null, ...(ngDevMode ? [{ debugName: "iconButtonSize" }] : /* istanbul ignore next */ []));
-    iconColor = input('', ...(ngDevMode ? [{ debugName: "iconColor" }] : /* istanbul ignore next */ []));
-    socialMobileCompact = input(true, ...(ngDevMode ? [{ debugName: "socialMobileCompact" }] : /* istanbul ignore next */ []));
-    selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
-    variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    typeButton = input('primary', ...(ngDevMode ? [{ debugName: "typeButton" }] : /* istanbul ignore next */ []));
-    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
-    buttonWidth = input('fit-content', ...(ngDevMode ? [{ debugName: "buttonWidth" }] : /* istanbul ignore next */ []));
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
-    type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
-    formId = input('', ...(ngDevMode ? [{ debugName: "formId" }] : /* istanbul ignore next */ []));
-    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    ariaDescription = input('', ...(ngDevMode ? [{ debugName: "ariaDescription" }] : /* istanbul ignore next */ []));
+    /** Visible text label rendered inside the button. */
+    text = input(LORO_BUTTON_DEFAULTS.text, ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    /** Optional icon from the Loro icon registry. */
+    icon = input(LORO_BUTTON_DEFAULTS.icon, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** Optional icon color override, supported for tertiary variant. */
+    iconColor = input(LORO_BUTTON_DEFAULTS.iconColor, ...(ngDevMode ? [{ debugName: "iconColor" }] : /* istanbul ignore next */ []));
+    /** Renders a square icon-only action when true. */
+    iconOnly = input(LORO_BUTTON_DEFAULTS.iconOnly, ...(ngDevMode ? [{ debugName: "iconOnly" }] : /* istanbul ignore next */ []));
+    /** Typed icon size token shared with Storybook controls. */
+    iconSize = input(LORO_BUTTON_DEFAULTS.iconSize, ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
+    /** Visual treatment and semantic state of the button. */
+    variant = input(LORO_BUTTON_DEFAULTS.variant, ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Width behavior for inline or full-row actions. */
+    width = input(LORO_BUTTON_DEFAULTS.width, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    /** Accessible name override. Required for icon-only usage when no text exists. */
+    ariaLabel = input(LORO_BUTTON_DEFAULTS.ariaLabel, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Optional extra accessible description. */
+    ariaDescription = input(LORO_BUTTON_DEFAULTS.ariaDescription, ...(ngDevMode ? [{ debugName: "ariaDescription" }] : /* istanbul ignore next */ []));
+    /** Single activation output for click and keyboard button semantics. */
     buttonClick = output();
-    change = output();
-    sanChange = output();
-    resolvedText = computed(() => this.text() || this.label(), ...(ngDevMode ? [{ debugName: "resolvedText" }] : /* istanbul ignore next */ []));
-    resolvedIcon = computed(() => {
-        const icon = this.icon();
-        if (this.isIconMode(icon))
-            return this.iconContent();
-        return this.iconContent() ?? icon;
-    }, ...(ngDevMode ? [{ debugName: "resolvedIcon" }] : /* istanbul ignore next */ []));
-    resolvedIconMode = computed(() => {
-        const icon = this.icon();
-        if (this.isIconMode(icon))
-            return icon;
-        if (this.iconMode() !== 'none')
-            return this.iconMode();
-        return this.resolvedIcon() ? 'with-icon' : 'none';
-    }, ...(ngDevMode ? [{ debugName: "resolvedIconMode" }] : /* istanbul ignore next */ []));
-    resolvedButtonWidth = computed(() => this.fullWidth() ? 'full' : this.buttonWidth(), ...(ngDevMode ? [{ debugName: "resolvedButtonWidth" }] : /* istanbul ignore next */ []));
-    resolvedIconButtonSize = computed(() => {
-        const customSize = this.iconButtonSize();
-        if (typeof customSize === 'number' && customSize > 0)
-            return `${customSize}px`;
-        if (typeof customSize === 'string' && customSize.trim().length > 0)
-            return customSize;
-        switch (this.size()) {
-            case 'sm':
-                return '44px';
-            case 'lg':
-                return '60px';
-            default:
-                return '48px';
-        }
-    }, ...(ngDevMode ? [{ debugName: "resolvedIconButtonSize" }] : /* istanbul ignore next */ []));
-    resolvedTypeButton = computed(() => {
-        const variantMap = {
-            outline: 'secondary',
-            ghost: 'tertiary',
-            soft: 'tertiary',
-            action: 'tertiary',
-            navigation: 'tertiary',
-        };
-        return variantMap[this.variant()] ?? this.typeButton();
-    }, ...(ngDevMode ? [{ debugName: "resolvedTypeButton" }] : /* istanbul ignore next */ []));
-    resolvedColor = computed(() => this.variant() === 'danger' ? 'danger' : this.color(), ...(ngDevMode ? [{ debugName: "resolvedColor" }] : /* istanbul ignore next */ []));
-    showIcon = computed(() => !this.loading() && this.resolvedIconMode() !== 'none' && !!this.resolvedIcon(), ...(ngDevMode ? [{ debugName: "showIcon" }] : /* istanbul ignore next */ []));
-    resolvedAriaLabel = computed(() => this.ariaLabel() || (this.resolvedIconMode() === 'only-icon' ? this.resolvedText() : null), ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
-    resolvedIconColor = computed(() => this.iconColor() || this.defaultIconColor(), ...(ngDevMode ? [{ debugName: "resolvedIconColor" }] : /* istanbul ignore next */ []));
-    resolvedIconRenderMode = computed(() => {
-        const icon = this.resolvedIcon();
-        return icon === 'apple' || icon === 'google' ? 'origin' : 'mask';
-    }, ...(ngDevMode ? [{ debugName: "resolvedIconRenderMode" }] : /* istanbul ignore next */ []));
-    isDisabled = computed(() => this.disabled() || this.loading(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    showSpinner = computed(() => this.loading() && this.resolvedIconMode() !== 'only-icon', ...(ngDevMode ? [{ debugName: "showSpinner" }] : /* istanbul ignore next */ []));
-    loadingAriaLabel = computed(() => this.ariaDescription() || `Cargando ${this.resolvedText() || 'contenido'}`, ...(ngDevMode ? [{ debugName: "loadingAriaLabel" }] : /* istanbul ignore next */ []));
-    emitChange() {
+    /** Normalized visible text used by the template and accessibility fallbacks. */
+    resolvedText = computed(() => this.text().trim(), ...(ngDevMode ? [{ debugName: "resolvedText" }] : /* istanbul ignore next */ []));
+    /** Loading is modeled as a visual variant to keep the public API small. */
+    isLoading = computed(() => this.variant() === 'loading', ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+    /** Disabled states are also modeled through variants. */
+    isDisabled = computed(() => {
+        const variant = this.variant();
+        return variant === 'disabled' || variant === 'loading';
+    }, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    /** Icons are hidden while loading so the spinner is the only visual affordance. */
+    hasIcon = computed(() => !this.isLoading() && !!this.icon(), ...(ngDevMode ? [{ debugName: "hasIcon" }] : /* istanbul ignore next */ []));
+    /** Labels are hidden for icon-only buttons and loading buttons. */
+    showLabel = computed(() => !this.iconOnly() && !this.isLoading(), ...(ngDevMode ? [{ debugName: "showLabel" }] : /* istanbul ignore next */ []));
+    /** Social buttons preserve their original icon artwork colors by default. */
+    iconRenderMode = computed(() => this.variant() === 'social' ? 'origin' : 'mask', ...(ngDevMode ? [{ debugName: "iconRenderMode" }] : /* istanbul ignore next */ []));
+    /** Tertiary can override button foreground (text/icon) using iconColor. */
+    resolvedTertiaryColor = computed(() => this.variant() === 'tertiary' ? this.iconColor() : null, ...(ngDevMode ? [{ debugName: "resolvedTertiaryColor" }] : /* istanbul ignore next */ []));
+    /** Tertiary can override icon color while other variants keep currentColor styling. */
+    resolvedIconColor = computed(() => {
+        if (this.resolvedTertiaryColor()) {
+            return this.resolvedTertiaryColor();
+        }
+        return 'currentColor';
+    }, ...(ngDevMode ? [{ debugName: "resolvedIconColor" }] : /* istanbul ignore next */ []));
+    /** Falls back to visible text when no explicit accessible label is provided. */
+    resolvedAriaLabel = computed(() => {
+        const ariaLabel = this.ariaLabel().trim();
+        if (ariaLabel) {
+            return ariaLabel;
+        }
+        return this.resolvedText() || null;
+    }, ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    /** Prevents emissions for visual disabled/loading states. */
+    onClick() {
         if (this.isDisabled()) {
             return;
         }
         this.buttonClick.emit();
-        this.change.emit();
-        this.sanChange.emit();
-    }
-    defaultIconColor() {
-        const isStrongButton = this.variant() !== 'navigation' &&
-            this.variant() !== 'action' &&
-            this.resolvedTypeButton() === 'primary' &&
-            this.resolvedColor() !== 'danger';
-        return isStrongButton ? 'inverse' : this.resolvedColor() === 'danger' ? 'danger' : 'primary';
-    }
-    isIconMode(value) {
-        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: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", 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" }, host: { properties: { "class.loro-button-host--full": "width() === 'full'" } }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"loro-button\"\n  [class]=\"'loro-button loro-button--' + variant()\"\n  [class.loro-button--full]=\"width() === 'full'\"\n  [class.loro-button--icon-only]=\"iconOnly()\"\n  [class.loro-button--has-icon]=\"hasIcon()\"\n  [style.--loro-button-icon-size.px]=\"iconSize()\"\n  [style.--loro-button-tertiary-color]=\"resolvedTertiaryColor()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [attr.aria-description]=\"ariaDescription() || null\"\n  [attr.aria-busy]=\"isLoading() ? 'true' : null\"\n  (click)=\"onClick()\"\n>\n  @if (isLoading()) {\n    <span class=\"loro-button__spinner\" aria-hidden=\"true\"></span>\n  } @else {\n    @if (hasIcon()) {\n      <loro-icon\n        class=\"loro-button__icon\"\n        [name]=\"icon()!\"\n        [size]=\"iconSize()\"\n        [alt]=\"resolvedText()\"\n        [decorative]=\"iconOnly()\"\n        [color]=\"resolvedIconColor()\"\n        [renderMode]=\"iconRenderMode()\"\n      />\n    }\n\n    @if (showLabel()) {\n      <span class=\"loro-button__label\">{{ resolvedText() }}</span>\n    }\n\n    <span class=\"loro-button__suffix\">\n      <ng-content />\n    </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:flex;width:100%}:host(.loro-nav__item){width:100%}:host(.loro-nav__item) .loro-button{justify-content:flex-start;text-align:left}:host(.loro-nav__item) .loro-button__label{flex:1;text-align:left}:host(.loro-header__action) .loro-button{width:var(--loro-button-height);min-width:var(--loro-button-height)}.loro-button{--loro-button-height: 2.875rem;--loro-button-padding-inline: 1rem;--loro-button-gap: .625rem;--loro-button-radius: 1rem;--loro-button-background: transparent;--loro-button-color: var(--loro-primary-700);--loro-button-border-color: transparent;--loro-button-shadow: none;--loro-button-hover-shadow: none;--loro-button-hover-transform: translateY(-.0625rem);--loro-button-hover-background: var(--loro-button-background);--loro-button-hover-border-color: var(--loro-button-border-color);--loro-button-hover-color: var(--loro-button-color);--loro-button-active-background: var(--loro-button-hover-background);--loro-button-active-border-color: var(--loro-button-hover-border-color);--loro-button-active-color: var(--loro-button-hover-color);--loro-button-active-transform: translateY(0);--loro-button-focus-ring: color-mix(in srgb, var(--loro-primary-500) 24%, transparent);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--loro-button-gap);min-width:0;min-height:var(--loro-button-height);padding:.75rem var(--loro-button-padding-inline);border:1px solid var(--loro-button-border-color);border-radius:var(--loro-button-radius);background:var(--loro-button-background);color:var(--loro-button-color);box-shadow:var(--loro-button-shadow);font:inherit;font-size:.9375rem;font-weight:800;line-height:1.1;text-align:center;white-space:normal;cursor:pointer;transition:transform .14s ease,background-color .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease}.loro-button:hover:not(:disabled){transform:translateY(-.0625rem);border-color:var(--loro-button-hover-border-color);color:var(--loro-button-hover-color)}.loro-button:active:not(:disabled){transform:var(--loro-button-active-transform);color:var(--loro-button-active-color);box-shadow:var(--loro-button-hover-shadow)}.loro-button:focus-visible{outline:3px solid var(--loro-button-focus-ring);outline-offset:.1875rem}.loro-button:disabled{cursor:not-allowed}.loro-button--full{width:100%}.loro-button--has-icon .loro-button__label{min-width:0}.loro-button--icon-only{--loro-button-height: 2.875rem;--loro-button-padding-inline: 0;width:var(--loro-button-height);min-width:var(--loro-button-height);aspect-ratio:1}.loro-button--icon-only .loro-button__suffix{display:none}.loro-button--tertiary.loro-button--icon-only{width:var(--loro-button-icon-size, var(--loro-button-height));min-width:var(--loro-button-icon-size, var(--loro-button-height));height:var(--loro-button-icon-size, var(--loro-button-height));min-height:var(--loro-button-icon-size, var(--loro-button-height));padding:0;border-radius:9999px}.loro-button--primary{--loro-button-background: linear-gradient( 135deg, var(--loro-primary-500), var(--loro-primary-700) );--loro-button-color: var(--loro-text-inverse);--loro-button-shadow: var(--loro-shadow-button);--loro-button-hover-shadow: var(--loro-shadow-button);--loro-button-hover-background: linear-gradient( 135deg, color-mix(in srgb, var(--loro-primary-500) 97%, white), color-mix(in srgb, var(--loro-primary-700) 96%, black) );--loro-button-active-background: linear-gradient( 135deg, color-mix(in srgb, var(--loro-primary-500) 92%, black), color-mix(in srgb, var(--loro-primary-700) 98%, black) )}.loro-button--secondary{--loro-button-background: transparent;--loro-button-color: var(--loro-primary-700);--loro-button-border-color: color-mix(in srgb, var(--loro-primary-500) 58%, white);--loro-button-hover-background: color-mix(in srgb, var(--loro-primary-500) 6%, transparent);--loro-button-hover-border-color: var(--loro-primary-500);--loro-button-active-background: color-mix(in srgb, var(--loro-primary-500) 10%, transparent)}.loro-button--tertiary{--loro-button-background: transparent;--loro-button-color: var(--loro-button-tertiary-color, var(--loro-primary-700));--loro-button-hover-background: color-mix(in srgb, var(--loro-primary-500) 6%, transparent);--loro-button-active-background: color-mix(in srgb, var(--loro-primary-500) 10%, transparent);--loro-button-hover-transform: none;--loro-button-active-transform: none;min-height:var(--loro-button-tertiary-height, auto);padding:0;border-radius:var(--loro-button-tertiary-radius, .75rem)}.loro-button--soft{--loro-button-background: color-mix(in srgb, var(--loro-primary-500) 8%, transparent);--loro-button-color: var(--loro-primary-700);--loro-button-hover-background: color-mix(in srgb, var(--loro-primary-500) 12%, transparent);--loro-button-active-background: color-mix(in srgb, var(--loro-primary-500) 16%, transparent)}.loro-button--social{--loro-button-background: var(--loro-surface);--loro-button-color: var(--loro-text);--loro-button-border-color: var(--loro-border-subtle);--loro-button-hover-background: var(--loro-surface);--loro-button-hover-border-color: color-mix(in srgb, var(--loro-primary-500) 44%, white);--loro-button-active-background: color-mix( in srgb, var(--loro-primary-500) 4%, var(--loro-surface) )}.loro-button--danger{--loro-button-background: var(--loro-danger-surface);--loro-button-color: var(--loro-danger-text);--loro-button-border-color: color-mix(in srgb, var(--loro-danger-text) 18%, transparent);--loro-button-hover-background: color-mix(in srgb, var(--loro-danger-surface) 90%, white);--loro-button-hover-border-color: color-mix(in srgb, var(--loro-danger-text) 24%, transparent);--loro-button-active-background: color-mix(in srgb, var(--loro-danger-surface) 84%, white)}.loro-button--loading{--loro-button-background: linear-gradient( 135deg, var(--loro-primary-500), var(--loro-primary-700) );--loro-button-color: var(--loro-text-inverse);--loro-button-border-color: transparent;--loro-button-shadow: var(--loro-shadow-button);pointer-events:none}.loro-button--disabled{--loro-button-background: var(--loro-disabled-surface);--loro-button-color: var(--loro-disabled-text);--loro-button-border-color: var(--loro-disabled-border);--loro-button-shadow: none;pointer-events:none}.loro-button__icon,.loro-button__label,.loro-button__suffix{position:relative;z-index:1}.loro-button__label{overflow-wrap:anywhere}.loro-button__suffix{display:inline-flex;align-items:center;flex:0 0 auto}.loro-button__spinner{width:1rem;height:1rem;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:loro-button-spin .7s linear infinite}@media(min-width:1024px){.loro-button{--loro-button-height: 3.125rem;--loro-button-padding-inline: 1.125rem;font-size:1rem}}@keyframes loro-button-spin{to{transform:rotate(360deg)}}\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: LoroButton, decorators: [{
             type: Component,
             args: [{ selector: 'loro-button', standalone: true, imports: [LoroIcon], 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"] }] } });
+                        '[class.loro-button-host--full]': "width() === 'full'",
+                    }, template: "<button\n  type=\"button\"\n  class=\"loro-button\"\n  [class]=\"'loro-button loro-button--' + variant()\"\n  [class.loro-button--full]=\"width() === 'full'\"\n  [class.loro-button--icon-only]=\"iconOnly()\"\n  [class.loro-button--has-icon]=\"hasIcon()\"\n  [style.--loro-button-icon-size.px]=\"iconSize()\"\n  [style.--loro-button-tertiary-color]=\"resolvedTertiaryColor()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [attr.aria-description]=\"ariaDescription() || null\"\n  [attr.aria-busy]=\"isLoading() ? 'true' : null\"\n  (click)=\"onClick()\"\n>\n  @if (isLoading()) {\n    <span class=\"loro-button__spinner\" aria-hidden=\"true\"></span>\n  } @else {\n    @if (hasIcon()) {\n      <loro-icon\n        class=\"loro-button__icon\"\n        [name]=\"icon()!\"\n        [size]=\"iconSize()\"\n        [alt]=\"resolvedText()\"\n        [decorative]=\"iconOnly()\"\n        [color]=\"resolvedIconColor()\"\n        [renderMode]=\"iconRenderMode()\"\n      />\n    }\n\n    @if (showLabel()) {\n      <span class=\"loro-button__label\">{{ resolvedText() }}</span>\n    }\n\n    <span class=\"loro-button__suffix\">\n      <ng-content />\n    </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:flex;width:100%}:host(.loro-nav__item){width:100%}:host(.loro-nav__item) .loro-button{justify-content:flex-start;text-align:left}:host(.loro-nav__item) .loro-button__label{flex:1;text-align:left}:host(.loro-header__action) .loro-button{width:var(--loro-button-height);min-width:var(--loro-button-height)}.loro-button{--loro-button-height: 2.875rem;--loro-button-padding-inline: 1rem;--loro-button-gap: .625rem;--loro-button-radius: 1rem;--loro-button-background: transparent;--loro-button-color: var(--loro-primary-700);--loro-button-border-color: transparent;--loro-button-shadow: none;--loro-button-hover-shadow: none;--loro-button-hover-transform: translateY(-.0625rem);--loro-button-hover-background: var(--loro-button-background);--loro-button-hover-border-color: var(--loro-button-border-color);--loro-button-hover-color: var(--loro-button-color);--loro-button-active-background: var(--loro-button-hover-background);--loro-button-active-border-color: var(--loro-button-hover-border-color);--loro-button-active-color: var(--loro-button-hover-color);--loro-button-active-transform: translateY(0);--loro-button-focus-ring: color-mix(in srgb, var(--loro-primary-500) 24%, transparent);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--loro-button-gap);min-width:0;min-height:var(--loro-button-height);padding:.75rem var(--loro-button-padding-inline);border:1px solid var(--loro-button-border-color);border-radius:var(--loro-button-radius);background:var(--loro-button-background);color:var(--loro-button-color);box-shadow:var(--loro-button-shadow);font:inherit;font-size:.9375rem;font-weight:800;line-height:1.1;text-align:center;white-space:normal;cursor:pointer;transition:transform .14s ease,background-color .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease}.loro-button:hover:not(:disabled){transform:translateY(-.0625rem);border-color:var(--loro-button-hover-border-color);color:var(--loro-button-hover-color)}.loro-button:active:not(:disabled){transform:var(--loro-button-active-transform);color:var(--loro-button-active-color);box-shadow:var(--loro-button-hover-shadow)}.loro-button:focus-visible{outline:3px solid var(--loro-button-focus-ring);outline-offset:.1875rem}.loro-button:disabled{cursor:not-allowed}.loro-button--full{width:100%}.loro-button--has-icon .loro-button__label{min-width:0}.loro-button--icon-only{--loro-button-height: 2.875rem;--loro-button-padding-inline: 0;width:var(--loro-button-height);min-width:var(--loro-button-height);aspect-ratio:1}.loro-button--icon-only .loro-button__suffix{display:none}.loro-button--tertiary.loro-button--icon-only{width:var(--loro-button-icon-size, var(--loro-button-height));min-width:var(--loro-button-icon-size, var(--loro-button-height));height:var(--loro-button-icon-size, var(--loro-button-height));min-height:var(--loro-button-icon-size, var(--loro-button-height));padding:0;border-radius:9999px}.loro-button--primary{--loro-button-background: linear-gradient( 135deg, var(--loro-primary-500), var(--loro-primary-700) );--loro-button-color: var(--loro-text-inverse);--loro-button-shadow: var(--loro-shadow-button);--loro-button-hover-shadow: var(--loro-shadow-button);--loro-button-hover-background: linear-gradient( 135deg, color-mix(in srgb, var(--loro-primary-500) 97%, white), color-mix(in srgb, var(--loro-primary-700) 96%, black) );--loro-button-active-background: linear-gradient( 135deg, color-mix(in srgb, var(--loro-primary-500) 92%, black), color-mix(in srgb, var(--loro-primary-700) 98%, black) )}.loro-button--secondary{--loro-button-background: transparent;--loro-button-color: var(--loro-primary-700);--loro-button-border-color: color-mix(in srgb, var(--loro-primary-500) 58%, white);--loro-button-hover-background: color-mix(in srgb, var(--loro-primary-500) 6%, transparent);--loro-button-hover-border-color: var(--loro-primary-500);--loro-button-active-background: color-mix(in srgb, var(--loro-primary-500) 10%, transparent)}.loro-button--tertiary{--loro-button-background: transparent;--loro-button-color: var(--loro-button-tertiary-color, var(--loro-primary-700));--loro-button-hover-background: color-mix(in srgb, var(--loro-primary-500) 6%, transparent);--loro-button-active-background: color-mix(in srgb, var(--loro-primary-500) 10%, transparent);--loro-button-hover-transform: none;--loro-button-active-transform: none;min-height:var(--loro-button-tertiary-height, auto);padding:0;border-radius:var(--loro-button-tertiary-radius, .75rem)}.loro-button--soft{--loro-button-background: color-mix(in srgb, var(--loro-primary-500) 8%, transparent);--loro-button-color: var(--loro-primary-700);--loro-button-hover-background: color-mix(in srgb, var(--loro-primary-500) 12%, transparent);--loro-button-active-background: color-mix(in srgb, var(--loro-primary-500) 16%, transparent)}.loro-button--social{--loro-button-background: var(--loro-surface);--loro-button-color: var(--loro-text);--loro-button-border-color: var(--loro-border-subtle);--loro-button-hover-background: var(--loro-surface);--loro-button-hover-border-color: color-mix(in srgb, var(--loro-primary-500) 44%, white);--loro-button-active-background: color-mix( in srgb, var(--loro-primary-500) 4%, var(--loro-surface) )}.loro-button--danger{--loro-button-background: var(--loro-danger-surface);--loro-button-color: var(--loro-danger-text);--loro-button-border-color: color-mix(in srgb, var(--loro-danger-text) 18%, transparent);--loro-button-hover-background: color-mix(in srgb, var(--loro-danger-surface) 90%, white);--loro-button-hover-border-color: color-mix(in srgb, var(--loro-danger-text) 24%, transparent);--loro-button-active-background: color-mix(in srgb, var(--loro-danger-surface) 84%, white)}.loro-button--loading{--loro-button-background: linear-gradient( 135deg, var(--loro-primary-500), var(--loro-primary-700) );--loro-button-color: var(--loro-text-inverse);--loro-button-border-color: transparent;--loro-button-shadow: var(--loro-shadow-button);pointer-events:none}.loro-button--disabled{--loro-button-background: var(--loro-disabled-surface);--loro-button-color: var(--loro-disabled-text);--loro-button-border-color: var(--loro-disabled-border);--loro-button-shadow: none;pointer-events:none}.loro-button__icon,.loro-button__label,.loro-button__suffix{position:relative;z-index:1}.loro-button__label{overflow-wrap:anywhere}.loro-button__suffix{display:inline-flex;align-items:center;flex:0 0 auto}.loro-button__spinner{width:1rem;height:1rem;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:loro-button-spin .7s linear infinite}@media(min-width:1024px){.loro-button{--loro-button-height: 3.125rem;--loro-button-padding-inline: 1.125rem;font-size:1rem}}@keyframes loro-button-spin{to{transform:rotate(360deg)}}\n"] }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", 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"] }] } });
+
+const LORO_IMAGE_MIN_SIZE = 16;
+const LORO_IMAGE_MAX_SIZE = 640;
+class LoroImage {
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    alt = input('', ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
+    size = input(null, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    assetName = computed(() => {
+        const name = this.name();
+        return (name in LORO_IMAGE_PATHS
+            ? name
+            : LORO_IMAGE_LEGACY_NAMES[name]);
+    }, ...(ngDevMode ? [{ debugName: "assetName" }] : /* istanbul ignore next */ []));
+    src = computed(() => LORO_IMAGE_PATHS[this.assetName()], ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+    altText = computed(() => this.alt(), ...(ngDevMode ? [{ debugName: "altText" }] : /* istanbul ignore next */ []));
+    resolvedSize = computed(() => {
+        const size = this.size();
+        if (typeof size === 'number') {
+            const clampedSize = Math.min(Math.max(size, LORO_IMAGE_MIN_SIZE), LORO_IMAGE_MAX_SIZE);
+            return `${clampedSize}px`;
+        }
+        return size;
+    }, ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* 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 } }, ngImport: i0, template: "<img\n  class=\"loro-image\"\n  [src]=\"src()\"\n  [alt]=\"altText()\"\n  [style.width]=\"resolvedSize()\"\n/>\n", styles: [":host{display:block}.loro-image{display:block;width:100%;height:auto;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\n  class=\"loro-image\"\n  [src]=\"src()\"\n  [alt]=\"altText()\"\n  [style.width]=\"resolvedSize()\"\n/>\n", styles: [":host{display:block}.loro-image{display:block;width:100%;height:auto;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 }] }] } });
 
-const DEFAULT_MAIN_ITEMS = [
+const LORO_NAV_DEFAULT_MAIN_ITEMS = [
     { id: 'home', label: 'Inicio', icon: 'nav-home', active: true },
     { id: 'list', label: 'Lista', icon: 'nav-list' },
     { id: 'scan', label: 'Escanear', icon: 'scanner' },
     { id: 'compare', label: 'Comparar', icon: 'nav-compare' },
     { id: 'pantry', label: 'Despensa', icon: 'nav-pantry' },
 ];
-const DEFAULT_UTILITY_ITEMS = [
+const LORO_NAV_DEFAULT_UTILITY_ITEMS = [
     { id: 'settings', label: 'Ajustes', icon: 'settings' },
     { id: 'logout', label: 'Cerrar sesión', icon: 'logout' },
 ];
-class LoroAppNav {
+const LORO_NAV_DEFAULT_ARIA_LABEL = 'Navegación principal';
+const LORO_NAV_MOBILE_SLOT_LIMIT = 5;
+
+class LoroNav {
+    /** Shared haptics feedback for taps and drag selection. */
     haptics = inject(LoroHapticsService);
-    draggedMobileIndex = signal(null, ...(ngDevMode ? [{ debugName: "draggedMobileIndex" }] : /* istanbul ignore next */ []));
-    mobilePointerActive = signal(false, ...(ngDevMode ? [{ debugName: "mobilePointerActive" }] : /* istanbul ignore next */ []));
+    /** Keeps track of the active pointer only while the mobile slider is captured. */
     activePointerId = null;
+    /** Continuous slider position used while dragging on mobile. */
+    previewMobilePosition = signal(null, ...(ngDevMode ? [{ debugName: "previewMobilePosition" }] : /* istanbul ignore next */ []));
+    /** Locally selected mobile index so the active state updates immediately. */
+    activeMobileIndex = signal(null, ...(ngDevMode ? [{ debugName: "activeMobileIndex" }] : /* istanbul ignore next */ []));
+    /** Tracks whether the pointer is currently captured by the mobile nav. */
+    mobilePointerActive = signal(false, ...(ngDevMode ? [{ debugName: "mobilePointerActive" }] : /* istanbul ignore next */ []));
+    /** Prevents the release click from firing twice after a swipe selection. */
     suppressNextMobileClick = false;
-    items = input(DEFAULT_MAIN_ITEMS, ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
-    utilityItems = input(DEFAULT_UTILITY_ITEMS, ...(ngDevMode ? [{ debugName: "utilityItems" }] : /* istanbul ignore next */ []));
-    ariaLabel = input('Navegación principal', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Main navigation items. */
+    items = input(LORO_NAV_DEFAULT_MAIN_ITEMS, ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Optional utility actions shown on desktop. */
+    utilityItems = input(LORO_NAV_DEFAULT_UTILITY_ITEMS, ...(ngDevMode ? [{ debugName: "utilityItems" }] : /* istanbul ignore next */ []));
+    /** Accessible label for the navigation landmark. */
+    ariaLabel = input(LORO_NAV_DEFAULT_ARIA_LABEL, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Enables or hides the desktop utility block. */
     showUtilityItems = input(true, ...(ngDevMode ? [{ debugName: "showUtilityItems" }] : /* istanbul ignore next */ []));
-    compactDesktop = input(false, ...(ngDevMode ? [{ debugName: "compactDesktop" }] : /* istanbul ignore next */ []));
+    /** Shows or hides the item labels in desktop and mobile navigation. */
+    showLabels = input(true, ...(ngDevMode ? [{ debugName: "showLabels" }] : /* istanbul ignore next */ []));
+    /** Emits the selected main item. */
     itemClick = output();
+    /** Emits the selected utility item. */
     utilityItemClick = output();
+    /** Emits the selected item and section metadata. */
     navItemClick = output();
     desktopItems = computed(() => this.items().filter((item) => item.id !== 'scan'), ...(ngDevMode ? [{ debugName: "desktopItems" }] : /* istanbul ignore next */ []));
-    mobileItems = computed(() => this.items().slice(0, 5), ...(ngDevMode ? [{ debugName: "mobileItems" }] : /* istanbul ignore next */ []));
+    mobileItems = computed(() => this.items().slice(0, LORO_NAV_MOBILE_SLOT_LIMIT), ...(ngDevMode ? [{ debugName: "mobileItems" }] : /* istanbul ignore next */ []));
     mobileVisualSlotCount = computed(() => this.mobileItems().length, ...(ngDevMode ? [{ debugName: "mobileVisualSlotCount" }] : /* istanbul ignore next */ []));
     selectedMobileIndex = computed(() => {
+        const activeIndex = this.activeMobileIndex();
+        if (activeIndex !== null) {
+            return activeIndex;
+        }
         const index = this.mobileItems().findIndex((item) => item.active);
         return index >= 0 ? index : 0;
     }, ...(ngDevMode ? [{ debugName: "selectedMobileIndex" }] : /* istanbul ignore next */ []));
-    mobileSliderPosition = computed(() => this.mobileItemIndexToVisualSlot(this.selectedMobileIndex()), ...(ngDevMode ? [{ debugName: "mobileSliderPosition" }] : /* istanbul ignore next */ []));
+    mobileSliderPosition = computed(() => this.previewMobilePosition() ?? this.selectedMobileIndex(), ...(ngDevMode ? [{ debugName: "mobileSliderPosition" }] : /* istanbul ignore next */ []));
     isMobileDragging = computed(() => this.mobilePointerActive(), ...(ngDevMode ? [{ debugName: "isMobileDragging" }] : /* istanbul ignore next */ []));
     mobileItemCount = computed(() => this.mobileItems().length, ...(ngDevMode ? [{ debugName: "mobileItemCount" }] : /* istanbul ignore next */ []));
     selectedMobileItemId = computed(() => this.mobileItems()[this.selectedMobileIndex()]?.id ?? '', ...(ngDevMode ? [{ debugName: "selectedMobileItemId" }] : /* istanbul ignore next */ []));
@@ -1391,7 +1347,8 @@ class LoroAppNav {
             this.suppressNextMobileClick = false;
             return;
         }
-        this.onMainItemClick(item);
+        const index = this.mobileItems().findIndex((mobileItem) => mobileItem.id === item.id);
+        this.selectMobileItem(index, true);
     }
     onMobilePointerDown(event) {
         if (!event.isPrimary || event.button !== 0 || this.mobileItems().length === 0) {
@@ -1401,13 +1358,12 @@ class LoroAppNav {
         this.activePointerId = event.pointerId;
         this.mobilePointerActive.set(true);
         nav.setPointerCapture(event.pointerId);
-        const index = this.getNearestEnabledMobileIndex(this.getMobileVisualSlotPosition(event.clientX, nav));
-        if (index === null) {
+        const slotPosition = this.getMobileVisualSlotPosition(event.clientX, nav);
+        if (this.getNearestEnabledMobileIndex(slotPosition) === null) {
             this.releaseMobilePointer(nav, event.pointerId);
             return;
         }
-        this.draggedMobileIndex.set(index);
-        this.haptics.selection();
+        this.previewMobilePosition.set(slotPosition);
         event.preventDefault();
     }
     onMobilePointerMove(event) {
@@ -1416,11 +1372,7 @@ class LoroAppNav {
         }
         const nav = event.currentTarget;
         const slotPosition = this.getMobileVisualSlotPosition(event.clientX, nav);
-        const index = this.getNearestEnabledMobileIndex(slotPosition);
-        if (index !== null && index !== this.draggedMobileIndex()) {
-            this.draggedMobileIndex.set(index);
-            this.haptics.selection();
-        }
+        this.previewMobilePosition.set(slotPosition);
         event.preventDefault();
     }
     onMobilePointerUp(event) {
@@ -1429,25 +1381,24 @@ class LoroAppNav {
         }
         const nav = event.currentTarget;
         const slotPosition = this.getMobileVisualSlotPosition(event.clientX, nav);
-        const index = this.getNearestEnabledMobileIndex(slotPosition) ?? this.draggedMobileIndex();
+        const index = this.getNearestEnabledMobileIndex(slotPosition);
         this.releaseMobilePointer(nav, event.pointerId);
         if (index === null) {
-            this.draggedMobileIndex.set(null);
             return;
         }
         const item = this.mobileItems()[index];
         if (!item || item.disabled) {
-            this.draggedMobileIndex.set(null);
             return;
         }
-        this.draggedMobileIndex.set(index);
+        const selectedIndex = index;
+        this.previewMobilePosition.set(slotPosition);
         this.suppressNextMobileClick = true;
         globalThis.setTimeout(() => {
             this.suppressNextMobileClick = false;
         });
-        this.emitMainItem(item, false);
+        this.selectMobileItem(selectedIndex, false);
         globalThis.queueMicrotask(() => {
-            this.draggedMobileIndex.set(null);
+            this.previewMobilePosition.set(null);
         });
         event.preventDefault();
     }
@@ -1456,7 +1407,7 @@ class LoroAppNav {
             return;
         }
         this.releaseMobilePointer(event.currentTarget, event.pointerId);
-        this.draggedMobileIndex.set(null);
+        this.previewMobilePosition.set(null);
     }
     onUtilityItemClick(item) {
         if (item.disabled) {
@@ -1473,6 +1424,15 @@ class LoroAppNav {
         this.itemClick.emit(item);
         this.navItemClick.emit({ item, section: 'main' });
     }
+    selectMobileItem(index, withHaptics) {
+        const item = this.mobileItems()[index];
+        if (!item || item.disabled) {
+            return;
+        }
+        this.activeMobileIndex.set(index);
+        this.emitMainItem(item, withHaptics);
+    }
+    /** Maps a pointer X coordinate to a zero-based visual slot index. */
     getMobileVisualSlotPosition(clientX, nav) {
         const slotCount = this.mobileVisualSlotCount();
         if (slotCount <= 1) {
@@ -1486,9 +1446,6 @@ class LoroAppNav {
     mobileItemGridColumn(index) {
         return index + 1;
     }
-    mobileItemIndexToVisualSlot(index) {
-        return index;
-    }
     getNearestEnabledMobileIndex(slotPosition) {
         const items = this.mobileItems();
         const enabledIndexes = items
@@ -1498,11 +1455,12 @@ class LoroAppNav {
         if (enabledIndexes.length === 0) {
             return null;
         }
-        return enabledIndexes.reduce((nearest, index) => Math.abs(this.mobileItemIndexToVisualSlot(index) - slotPosition) <
-            Math.abs(this.mobileItemIndexToVisualSlot(nearest) - slotPosition)
+        return enabledIndexes.reduce((nearest, index) => Math.abs(index - slotPosition) <
+            Math.abs(nearest - slotPosition)
             ? index
             : nearest);
     }
+    /** Releases pointer capture and clears transient mobile drag state. */
     releaseMobilePointer(nav, pointerId) {
         if (nav.hasPointerCapture(pointerId)) {
             nav.releasePointerCapture(pointerId);
@@ -1510,867 +1468,139 @@ class LoroAppNav {
         this.activePointerId = null;
         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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroNav, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroNav, isStandalone: true, selector: "loro-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 }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", utilityItemClick: "utilityItemClick", navItemClick: "navItemClick" }, ngImport: i0, template: "<aside class=\"loro-nav\" [class.loro-nav--icon-only]=\"!showLabels()\">\n  <!-- Desktop -->\n  <div class=\"loro-nav__desktop\">\n    <div class=\"loro-nav__surface\">\n      <div class=\"loro-nav__brand\">\n        <loro-image\n          class=\"loro-nav__brand-image\"\n          name=\"image-loro-apaisado\"\n          alt=\"AlLoro\"\n          size=\"10rem\"\n        />\n      </div>\n\n      <nav class=\"loro-nav__nav\" [attr.aria-label]=\"ariaLabel()\">\n        @for (item of desktopItems(); track item.id) {\n          <loro-button\n            class=\"loro-nav__item\"\n            [class.loro-nav__item--active]=\"item.active\"\n            [class.loro-nav__item--disabled]=\"item.disabled\"\n            [class.loro-nav__item--logout]=\"item.id === 'logout'\"\n            [text]=\"showLabels() ? item.label : ''\"\n            [icon]=\"item.icon\"\n            [variant]=\"item.disabled ? 'disabled' : 'tertiary'\"\n            [iconOnly]=\"!showLabels()\"\n            width=\"full\"\n            [ariaLabel]=\"item.label\"\n            (buttonClick)=\"onMainItemClick(item)\"\n          >\n            @if (item.badge !== null && item.badge !== undefined && item.badge !== '') {\n              <span class=\"loro-nav__badge\">{{ item.badge }}</span>\n            }\n          </loro-button>\n        }\n      </nav>\n\n      <div class=\"loro-nav__spacer\"></div>\n\n      @if (showUtilityItems() && utilityItems().length > 0) {\n        <div class=\"loro-nav__divider\" aria-hidden=\"true\"></div>\n\n        <nav class=\"loro-nav__nav loro-nav__nav--utility\" aria-label=\"Navegaci\u00F3n secundaria\">\n          @for (item of utilityItems(); track item.id) {\n          <loro-button\n            class=\"loro-nav__item\"\n            [class.loro-nav__item--active]=\"item.active\"\n            [class.loro-nav__item--disabled]=\"item.disabled\"\n            [class.loro-nav__item--logout]=\"item.id === 'logout'\"\n            [text]=\"showLabels() ? item.label : ''\"\n            [icon]=\"item.icon\"\n              [variant]=\"item.disabled ? 'disabled' : 'tertiary'\"\n              [iconOnly]=\"!showLabels()\"\n              width=\"full\"\n              [ariaLabel]=\"item.label\"\n              (buttonClick)=\"onUtilityItemClick(item)\"\n            >\n              @if (item.badge !== null && item.badge !== undefined && item.badge !== '') {\n                <span class=\"loro-nav__badge\">{{ item.badge }}</span>\n              }\n            </loro-button>\n          }\n        </nav>\n      }\n    </div>\n  </div>\n\n  <!-- Mobile -->\n  <nav\n    ngToolbar\n    class=\"loro-nav__mobile\"\n    [class.loro-nav__mobile--icon-only]=\"!showLabels()\"\n    data-horizontal-gesture\n    [attr.aria-label]=\"ariaLabel()\"\n    [style.--loro-mobile-slider-position]=\"mobileSliderPosition()\"\n    [class.loro-nav__mobile--dragging]=\"isMobileDragging()\"\n    [class.loro-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-nav__mobile-slider\"\n      [class.loro-nav__mobile-slider--scan]=\"selectedMobileItemId() === 'scan' && !isMobileDragging()\"\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-nav__mobile-item\"\n        [style.grid-column]=\"mobileItemGridColumn(index)\"\n        [class.loro-nav__mobile-item--active]=\"isMobileItemVisualActive(index)\"\n        [class.loro-nav__mobile-item--scan-active]=\"item.id === 'scan' && isMobileItemVisualActive(index) && !isMobileDragging()\"\n        [class.loro-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-nav__mobile-icon\"\n          [name]=\"item.icon\"\n          [size]=\"24\"\n          color=\"default\"\n          [alt]=\"item.label\"\n        />\n        @if (showLabels()) {\n          <span class=\"loro-nav__mobile-label\">{{ item.label }}</span>\n        }\n      </button>\n    }\n  </nav>\n</aside>\n", styles: [":host{display:block;width:100%;height:100%}.loro-nav{width:100%;height:100%}.loro-nav__desktop{display:none;height:100%}.loro-nav__surface{display:flex;width:100%;height:100%;max-width:none;flex-direction:column;gap:1.1rem;padding:1.75rem 1.35rem 1.5rem;border:1px solid var(--loro-nav-desktop-border, var(--loro-border-soft));background:var(--loro-nav-desktop-surface, var(--loro-shell-header-surface))}html[data-theme=dark] .loro-nav__surface{border-color:var(--loro-nav-desktop-border, rgba(255, 255, 255, .08));background:var(--loro-nav-desktop-surface, rgba(24, 28, 32, .78));box-shadow:var(--loro-nav-desktop-shadow, none)}.loro-nav__brand{display:flex;align-items:center;min-height:4.25rem;padding:.35rem .55rem .85rem}.loro-nav__brand-image{display:block}.loro-nav__nav{display:flex;flex-direction:column;gap:.75rem}.loro-nav__nav--utility{margin-top:auto}.loro-nav__item{display:block;width:100%;color:var(--loro-nav-button-text, var(--loro-text-strong));--loro-button-height: 4.25rem;--loro-button-padding-inline: 1.2rem;--loro-button-tertiary-height: 4.25rem;--loro-button-tertiary-padding: 1rem 1.2rem;--loro-button-tertiary-radius: 1rem;--loro-button-gap: 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);--loro-button-hover-transform: none;--loro-button-active-transform: none;text-align:left}.loro-nav--icon-only .loro-nav__item{--loro-button-height: 3.5rem;--loro-button-tertiary-height: 3.5rem;--loro-button-tertiary-padding: .75rem}.loro-nav__item--active{--loro-button-background: var(--loro-nav-button-active-bg, var(--loro-nav-active-bg));--loro-button-border-color: var(--loro-nav-button-active-border, var(--loro-nav-active-border));--loro-button-color: var(--loro-nav-button-active-text, var(--loro-primary-500));--loro-button-shadow: var(--loro-nav-button-active-shadow, inset .35rem 0 0 var(--loro-primary-500));--loro-button-hover-background: var(--loro-nav-button-active-bg, var(--loro-nav-active-bg));--loro-button-hover-border-color: var(--loro-nav-button-active-border, var(--loro-nav-active-border));--loro-button-hover-color: var(--loro-nav-button-active-text, var(--loro-primary-500));--loro-button-hover-shadow: var(--loro-nav-button-active-shadow, inset .35rem 0 0 var(--loro-primary-500))}.loro-nav__item--logout{--loro-button-background: transparent;--loro-button-border-color: transparent;--loro-button-color: var(--loro-nav-button-danger-text, var(--loro-danger-text));--loro-button-hover-background: color-mix(in srgb, var(--loro-danger-surface) 68%, white);--loro-button-hover-border-color: 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-nav__item--disabled{cursor:not-allowed;opacity:1;--loro-button-background: var(--loro-disabled-surface);--loro-button-border-color: var(--loro-disabled-border);--loro-button-color: var(--loro-disabled-text)}.loro-nav__label,.loro-nav__mobile-label{color:inherit}.loro-nav__label{font-size:.98rem;font-weight:700}.loro-nav__badge{min-width:1.5rem;margin-left:auto;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-nav__spacer{flex:1}.loro-nav__divider{height:1px;margin:.65rem 0 .9rem;background:var(--loro-nav-divider)}.loro-nav__mobile{position:fixed;z-index:70;left:50%;bottom:max(1.25rem,env(safe-area-inset-bottom,0px) * .28);display:grid;width:min(72vw - max(.875rem,var(--app-shell-mobile-gutter, 1rem) * .6),18rem);grid-template-columns:repeat(var(--loro-mobile-visual-slot-count, 4),minmax(0,1fr));gap:0;margin:0;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;transform:translate(-50%);transition:background .22s ease,border-color .22s ease,box-shadow .22s ease}.loro-nav__mobile--dragging .loro-nav__mobile-slider{transition:transform 1ms linear}.loro-nav__mobile--with-labels{width:90vw}.loro-nav__mobile--with-labels .loro-nav__mobile-item{min-height:4.1rem;padding-top:.55rem}.loro-nav__mobile--with-labels .loro-nav__mobile-label{opacity:1;transform:translateY(0)}.loro-nav__mobile--icon-only{width:min(58vw - max(.875rem,var(--app-shell-mobile-gutter, 1rem) * .4),15rem)}.loro-nav__mobile--icon-only .loro-nav__mobile-item{min-height:2.95rem;padding:.22rem .1rem}.loro-nav__mobile--icon-only .loro-nav__mobile-icon{transform:scale(.76)}.loro-nav__mobile-item{position:relative;z-index:2;display:flex;min-height:3.15rem;flex-direction:column;align-items:center;justify-content:center;gap:.12rem;padding:.28rem .12rem;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;-webkit-tap-highlight-color:transparent;transition:transform .22s cubic-bezier(.22,1,.36,1)}.loro-nav__mobile-item:hover:not(.loro-nav__mobile-item--active),.loro-nav__mobile-item:active:not(.loro-nav__mobile-item--active),.loro-nav__mobile-item:focus:not(.loro-nav__mobile-item--active){background:transparent;color:var(--loro-nav-mobile-icon, var(--loro-text))}.loro-nav__mobile-item:focus-visible{outline:2px solid var(--loro-focus-ring);outline-offset:-4px}.loro-nav__mobile-item:disabled{cursor:not-allowed;opacity:1;color:var(--loro-disabled-text)}.loro-nav__mobile-item--active{background:transparent;color:var(--loro-nav-mobile-icon, var(--loro-text))}.loro-nav__mobile-item--disabled{cursor:not-allowed;opacity:1;color:var(--loro-disabled-text)}.loro-nav__mobile-item--scan-active{color:var(--loro-nav-mobile-scan-active-color, #fff);background:transparent}.loro-nav__mobile-icon{position:relative;z-index:3;display:inline-flex;align-items:center;justify-content:center;color:inherit;pointer-events:none;opacity:1;visibility:visible;mix-blend-mode:normal;transform:scale(.84);transform-origin:center}.loro-nav__mobile-slider{position:absolute;z-index:1;inset-block:0;left:0;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-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-nav__mobile-label{display:block;max-width:100%;overflow:hidden;font-size:.56rem;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}@media(max-width:479.99px)and (orientation:portrait){:host{height:auto}.loro-nav{height:auto;padding:0}.loro-nav__desktop{height:auto}.loro-nav__item{--loro-button-min-height: 3.9rem;--loro-button-padding: .9rem 1rem;--loro-button-font-size: .94rem}.loro-nav__label{font-size:.9rem}.loro-nav__badge{min-width:1.35rem;padding:.1rem .4rem;font-size:.68rem}.loro-nav__mobile-icon{transform:scale(.78)}.loro-nav__mobile-label{font-size:.52rem}}@media(min-width:1024px){:host,.loro-nav,.loro-nav__desktop{height:100%}.loro-nav__desktop{display:block}.loro-nav__mobile{display:none}}@media(prefers-reduced-motion:reduce){.loro-nav__mobile-slider,.loro-nav__mobile-item,.loro-nav__mobile-item .loro-nav__mobile-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"] }, { kind: "component", type: LoroButton, selector: "loro-button", inputs: ["text", "icon", "iconColor", "iconOnly", "iconSize", "variant", "width", "ariaLabel", "ariaDescription"], outputs: ["buttonClick"] }, { 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: LoroAppNav, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroNav, 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"] }]
-        }], 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"] }] } });
+            args: [{ selector: 'loro-nav', standalone: true, imports: [Toolbar, ToolbarWidget, LoroImage, LoroButton, LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<aside class=\"loro-nav\" [class.loro-nav--icon-only]=\"!showLabels()\">\n  <!-- Desktop -->\n  <div class=\"loro-nav__desktop\">\n    <div class=\"loro-nav__surface\">\n      <div class=\"loro-nav__brand\">\n        <loro-image\n          class=\"loro-nav__brand-image\"\n          name=\"image-loro-apaisado\"\n          alt=\"AlLoro\"\n          size=\"10rem\"\n        />\n      </div>\n\n      <nav class=\"loro-nav__nav\" [attr.aria-label]=\"ariaLabel()\">\n        @for (item of desktopItems(); track item.id) {\n          <loro-button\n            class=\"loro-nav__item\"\n            [class.loro-nav__item--active]=\"item.active\"\n            [class.loro-nav__item--disabled]=\"item.disabled\"\n            [class.loro-nav__item--logout]=\"item.id === 'logout'\"\n            [text]=\"showLabels() ? item.label : ''\"\n            [icon]=\"item.icon\"\n            [variant]=\"item.disabled ? 'disabled' : 'tertiary'\"\n            [iconOnly]=\"!showLabels()\"\n            width=\"full\"\n            [ariaLabel]=\"item.label\"\n            (buttonClick)=\"onMainItemClick(item)\"\n          >\n            @if (item.badge !== null && item.badge !== undefined && item.badge !== '') {\n              <span class=\"loro-nav__badge\">{{ item.badge }}</span>\n            }\n          </loro-button>\n        }\n      </nav>\n\n      <div class=\"loro-nav__spacer\"></div>\n\n      @if (showUtilityItems() && utilityItems().length > 0) {\n        <div class=\"loro-nav__divider\" aria-hidden=\"true\"></div>\n\n        <nav class=\"loro-nav__nav loro-nav__nav--utility\" aria-label=\"Navegaci\u00F3n secundaria\">\n          @for (item of utilityItems(); track item.id) {\n          <loro-button\n            class=\"loro-nav__item\"\n            [class.loro-nav__item--active]=\"item.active\"\n            [class.loro-nav__item--disabled]=\"item.disabled\"\n            [class.loro-nav__item--logout]=\"item.id === 'logout'\"\n            [text]=\"showLabels() ? item.label : ''\"\n            [icon]=\"item.icon\"\n              [variant]=\"item.disabled ? 'disabled' : 'tertiary'\"\n              [iconOnly]=\"!showLabels()\"\n              width=\"full\"\n              [ariaLabel]=\"item.label\"\n              (buttonClick)=\"onUtilityItemClick(item)\"\n            >\n              @if (item.badge !== null && item.badge !== undefined && item.badge !== '') {\n                <span class=\"loro-nav__badge\">{{ item.badge }}</span>\n              }\n            </loro-button>\n          }\n        </nav>\n      }\n    </div>\n  </div>\n\n  <!-- Mobile -->\n  <nav\n    ngToolbar\n    class=\"loro-nav__mobile\"\n    [class.loro-nav__mobile--icon-only]=\"!showLabels()\"\n    data-horizontal-gesture\n    [attr.aria-label]=\"ariaLabel()\"\n    [style.--loro-mobile-slider-position]=\"mobileSliderPosition()\"\n    [class.loro-nav__mobile--dragging]=\"isMobileDragging()\"\n    [class.loro-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-nav__mobile-slider\"\n      [class.loro-nav__mobile-slider--scan]=\"selectedMobileItemId() === 'scan' && !isMobileDragging()\"\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-nav__mobile-item\"\n        [style.grid-column]=\"mobileItemGridColumn(index)\"\n        [class.loro-nav__mobile-item--active]=\"isMobileItemVisualActive(index)\"\n        [class.loro-nav__mobile-item--scan-active]=\"item.id === 'scan' && isMobileItemVisualActive(index) && !isMobileDragging()\"\n        [class.loro-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-nav__mobile-icon\"\n          [name]=\"item.icon\"\n          [size]=\"24\"\n          color=\"default\"\n          [alt]=\"item.label\"\n        />\n        @if (showLabels()) {\n          <span class=\"loro-nav__mobile-label\">{{ item.label }}</span>\n        }\n      </button>\n    }\n  </nav>\n</aside>\n", styles: [":host{display:block;width:100%;height:100%}.loro-nav{width:100%;height:100%}.loro-nav__desktop{display:none;height:100%}.loro-nav__surface{display:flex;width:100%;height:100%;max-width:none;flex-direction:column;gap:1.1rem;padding:1.75rem 1.35rem 1.5rem;border:1px solid var(--loro-nav-desktop-border, var(--loro-border-soft));background:var(--loro-nav-desktop-surface, var(--loro-shell-header-surface))}html[data-theme=dark] .loro-nav__surface{border-color:var(--loro-nav-desktop-border, rgba(255, 255, 255, .08));background:var(--loro-nav-desktop-surface, rgba(24, 28, 32, .78));box-shadow:var(--loro-nav-desktop-shadow, none)}.loro-nav__brand{display:flex;align-items:center;min-height:4.25rem;padding:.35rem .55rem .85rem}.loro-nav__brand-image{display:block}.loro-nav__nav{display:flex;flex-direction:column;gap:.75rem}.loro-nav__nav--utility{margin-top:auto}.loro-nav__item{display:block;width:100%;color:var(--loro-nav-button-text, var(--loro-text-strong));--loro-button-height: 4.25rem;--loro-button-padding-inline: 1.2rem;--loro-button-tertiary-height: 4.25rem;--loro-button-tertiary-padding: 1rem 1.2rem;--loro-button-tertiary-radius: 1rem;--loro-button-gap: 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);--loro-button-hover-transform: none;--loro-button-active-transform: none;text-align:left}.loro-nav--icon-only .loro-nav__item{--loro-button-height: 3.5rem;--loro-button-tertiary-height: 3.5rem;--loro-button-tertiary-padding: .75rem}.loro-nav__item--active{--loro-button-background: var(--loro-nav-button-active-bg, var(--loro-nav-active-bg));--loro-button-border-color: var(--loro-nav-button-active-border, var(--loro-nav-active-border));--loro-button-color: var(--loro-nav-button-active-text, var(--loro-primary-500));--loro-button-shadow: var(--loro-nav-button-active-shadow, inset .35rem 0 0 var(--loro-primary-500));--loro-button-hover-background: var(--loro-nav-button-active-bg, var(--loro-nav-active-bg));--loro-button-hover-border-color: var(--loro-nav-button-active-border, var(--loro-nav-active-border));--loro-button-hover-color: var(--loro-nav-button-active-text, var(--loro-primary-500));--loro-button-hover-shadow: var(--loro-nav-button-active-shadow, inset .35rem 0 0 var(--loro-primary-500))}.loro-nav__item--logout{--loro-button-background: transparent;--loro-button-border-color: transparent;--loro-button-color: var(--loro-nav-button-danger-text, var(--loro-danger-text));--loro-button-hover-background: color-mix(in srgb, var(--loro-danger-surface) 68%, white);--loro-button-hover-border-color: 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-nav__item--disabled{cursor:not-allowed;opacity:1;--loro-button-background: var(--loro-disabled-surface);--loro-button-border-color: var(--loro-disabled-border);--loro-button-color: var(--loro-disabled-text)}.loro-nav__label,.loro-nav__mobile-label{color:inherit}.loro-nav__label{font-size:.98rem;font-weight:700}.loro-nav__badge{min-width:1.5rem;margin-left:auto;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-nav__spacer{flex:1}.loro-nav__divider{height:1px;margin:.65rem 0 .9rem;background:var(--loro-nav-divider)}.loro-nav__mobile{position:fixed;z-index:70;left:50%;bottom:max(1.25rem,env(safe-area-inset-bottom,0px) * .28);display:grid;width:min(72vw - max(.875rem,var(--app-shell-mobile-gutter, 1rem) * .6),18rem);grid-template-columns:repeat(var(--loro-mobile-visual-slot-count, 4),minmax(0,1fr));gap:0;margin:0;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;transform:translate(-50%);transition:background .22s ease,border-color .22s ease,box-shadow .22s ease}.loro-nav__mobile--dragging .loro-nav__mobile-slider{transition:transform 1ms linear}.loro-nav__mobile--with-labels{width:90vw}.loro-nav__mobile--with-labels .loro-nav__mobile-item{min-height:4.1rem;padding-top:.55rem}.loro-nav__mobile--with-labels .loro-nav__mobile-label{opacity:1;transform:translateY(0)}.loro-nav__mobile--icon-only{width:min(58vw - max(.875rem,var(--app-shell-mobile-gutter, 1rem) * .4),15rem)}.loro-nav__mobile--icon-only .loro-nav__mobile-item{min-height:2.95rem;padding:.22rem .1rem}.loro-nav__mobile--icon-only .loro-nav__mobile-icon{transform:scale(.76)}.loro-nav__mobile-item{position:relative;z-index:2;display:flex;min-height:3.15rem;flex-direction:column;align-items:center;justify-content:center;gap:.12rem;padding:.28rem .12rem;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;-webkit-tap-highlight-color:transparent;transition:transform .22s cubic-bezier(.22,1,.36,1)}.loro-nav__mobile-item:hover:not(.loro-nav__mobile-item--active),.loro-nav__mobile-item:active:not(.loro-nav__mobile-item--active),.loro-nav__mobile-item:focus:not(.loro-nav__mobile-item--active){background:transparent;color:var(--loro-nav-mobile-icon, var(--loro-text))}.loro-nav__mobile-item:focus-visible{outline:2px solid var(--loro-focus-ring);outline-offset:-4px}.loro-nav__mobile-item:disabled{cursor:not-allowed;opacity:1;color:var(--loro-disabled-text)}.loro-nav__mobile-item--active{background:transparent;color:var(--loro-nav-mobile-icon, var(--loro-text))}.loro-nav__mobile-item--disabled{cursor:not-allowed;opacity:1;color:var(--loro-disabled-text)}.loro-nav__mobile-item--scan-active{color:var(--loro-nav-mobile-scan-active-color, #fff);background:transparent}.loro-nav__mobile-icon{position:relative;z-index:3;display:inline-flex;align-items:center;justify-content:center;color:inherit;pointer-events:none;opacity:1;visibility:visible;mix-blend-mode:normal;transform:scale(.84);transform-origin:center}.loro-nav__mobile-slider{position:absolute;z-index:1;inset-block:0;left:0;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-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-nav__mobile-label{display:block;max-width:100%;overflow:hidden;font-size:.56rem;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}@media(max-width:479.99px)and (orientation:portrait){:host{height:auto}.loro-nav{height:auto;padding:0}.loro-nav__desktop{height:auto}.loro-nav__item{--loro-button-min-height: 3.9rem;--loro-button-padding: .9rem 1rem;--loro-button-font-size: .94rem}.loro-nav__label{font-size:.9rem}.loro-nav__badge{min-width:1.35rem;padding:.1rem .4rem;font-size:.68rem}.loro-nav__mobile-icon{transform:scale(.78)}.loro-nav__mobile-label{font-size:.52rem}}@media(min-width:1024px){:host,.loro-nav,.loro-nav__desktop{height:100%}.loro-nav__desktop{display:block}.loro-nav__mobile{display:none}}@media(prefers-reduced-motion:reduce){.loro-nav__mobile-slider,.loro-nav__mobile-item,.loro-nav__mobile-item .loro-nav__mobile-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 }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], utilityItemClick: [{ type: i0.Output, args: ["utilityItemClick"] }], navItemClick: [{ type: i0.Output, args: ["navItemClick"] }] } });
 
-class LoroAssistantCard {
-    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-    description = input.required(...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
-    imageName = input(null, ...(ngDevMode ? [{ debugName: "imageName" }] : /* istanbul ignore next */ []));
-    icon = input('headset', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-    actionLabel = input('', ...(ngDevMode ? [{ debugName: "actionLabel" }] : /* istanbul ignore next */ []));
-    actionIcon = input('chat', ...(ngDevMode ? [{ debugName: "actionIcon" }] : /* istanbul ignore next */ []));
-    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\">\n      <div class=\"loro-assistant-card__media\">\n        @if (imageName()) {\n          <loro-image [name]=\"imageName()!\" [alt]=\"title()\" width=\"100%\" />\n        } @else {\n          <loro-icon [name]=\"icon()\" [size]=\"56\" [alt]=\"title()\" color=\"primary\" />\n        }\n      </div>\n      <div class=\"loro-assistant-card__copy\">\n        <h2>{{ title() }}</h2>\n        <p>{{ description() }}</p>\n      </div>\n      @if (actionLabel()) {\n        <loro-button\n          [label]=\"actionLabel()\"\n          [icon]=\"actionIcon()\"\n          [variant]=\"actionVariant()\"\n          [fullWidth]=\"true\"\n          (buttonClick)=\"action.emit()\" />\n      }\n    </section>", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-assistant-card{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(12rem,auto);align-items:center;gap:1.5rem;padding:1.35rem 1.5rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-card);background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft)}.loro-assistant-card__media{display:grid;width:6rem;height:5rem;place-items:center;overflow:hidden}.loro-assistant-card__copy{min-width:0}h2,p{margin:0}h2{color:var(--loro-text-strong);font-size:1.2rem;font-weight:900;line-height:1.2}p{margin-top:.35rem;color:var(--loro-muted);font-weight:650;line-height:1.45}@media(max-width:680px){.loro-assistant-card{grid-template-columns:auto minmax(0,1fr)}loro-button{grid-column:1/-1}}\n"], dependencies: [{ kind: "component", type: LoroButton, selector: "loro-button", inputs: ["label", "text", "icon", "iconContent", "iconMode", "iconSize", "iconButtonSize", "iconColor", "socialMobileCompact", "selected", "variant", "typeButton", "color", "size", "fullWidth", "buttonWidth", "disabled", "loading", "type", "formId", "ariaLabel", "ariaDescription"], outputs: ["buttonClick", "change", "sanChange"] }, { kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }, { kind: "component", type: LoroImage, selector: "loro-image", inputs: ["name", "alt", "size", "width", "height", "fit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroAssistantCard, decorators: [{
-            type: Component,
-            args: [{ selector: 'loro-assistant-card', standalone: true, imports: [LoroButton, LoroIcon, LoroImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"loro-assistant-card\">\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) {
-    return icon === 'apple' || icon === 'google';
-}
-class LoroAuthSocialButton {
-    icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    outline = input(false, ...(ngDevMode ? [{ debugName: "outline" }] : /* istanbul ignore next */ []));
-    selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
-    iconSize = input(44, ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
-    nativeIconSrc = computed(() => {
-        const icon = this.icon();
-        if (!isNativeSocialIcon(icon)) {
-            return '';
-        }
-        return LORO_ICON_PATHS[LORO_ICON_LEGACY_NAMES[icon]];
-    }, ...(ngDevMode ? [{ debugName: "nativeIconSrc" }] : /* istanbul ignore next */ []));
-    releaseFocus(event) {
-        const target = event.currentTarget;
-        if (target instanceof HTMLButtonElement) {
-            target.blur();
-        }
-    }
-    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\n      type=\"button\"\n      class=\"loro-auth-social-button\"\n      [class.loro-auth-social-button--outline]=\"outline()\"\n      [class.loro-auth-social-button--selected]=\"selected()\"\n      (click)=\"releaseFocus($event)\"\n    >\n      @if (nativeIconSrc()) {\n        <img\n          class=\"loro-auth-social-button__native-icon\"\n          [src]=\"nativeIconSrc()\"\n          alt=\"\"\n          aria-hidden=\"true\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n        />\n      } @else {\n        <loro-icon [name]=\"icon()\" [size]=\"iconSize()\" [alt]=\"label()\" />\n      }\n      <span>{{ label() }}</span>\n    </button>", styles: [":host{display:block}.loro-auth-social-button{display:flex;width:100%;align-items:center;justify-content:center;gap:.8rem;border:1px solid var(--loro-border-subtle);border-radius:.9rem;background:var(--loro-surface);min-height:3.25rem;padding:.78rem 1rem;box-shadow:var(--loro-shadow-soft);color:var(--loro-text);font:inherit;font-family:var(--loro-font-brand);font-size:.92rem;font-weight:800;cursor:pointer;text-align:center;transition:border-color .18s ease,box-shadow .18s ease,transform .12s ease,background .12s ease}.loro-auth-social-button:hover,.loro-auth-social-button:focus-visible{border-color:var(--loro-auth-field-active-border, var(--loro-primary-500));box-shadow:var(--loro-shadow-soft),0 0 0 3px color-mix(in srgb,var(--loro-primary-500) 14%,transparent)}.loro-auth-social-button:active{background:color-mix(in srgb,var(--loro-primary-500) 6%,var(--loro-surface));transform:scale(.985)}.loro-auth-social-button loro-icon{transform:scale(.82)}.loro-auth-social-button__native-icon{flex:0 0 auto;object-fit:contain}.loro-auth-social-button--outline{border:2px solid var(--loro-primary-500);box-shadow:none;color:var(--loro-primary-500);background:transparent}.loro-auth-social-button--outline:hover,.loro-auth-social-button--outline:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-primary-500) 14%,transparent)}.loro-auth-social-button--outline:active{background:color-mix(in srgb,var(--loro-primary-500) 8%,transparent)}@media(min-width:1024px){.loro-auth-social-button{min-height:3rem;padding:.65rem 1rem;font-size:.86rem}.loro-auth-social-button--outline{font-size:.92rem}}\n"], dependencies: [{ kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroAuthSocialButton, decorators: [{
-            type: Component,
-            args: [{ selector: 'loro-auth-social-button', standalone: true, imports: [LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\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 }] }] } });
+const LORO_BADGE_DEFAULTS = {
+    variant: 'info',
+};
 
 class LoroBadge {
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    variant = input('info', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    variant = input(LORO_BADGE_DEFAULTS.variant, ...(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>", 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()\">\n  <span class=\"loro-badge__label\">{{ label() }}</span>\n</span>\n", styles: [":host{display:inline-block;min-width:0;font-family:var(--loro-font-brand)}.loro-badge{display:flex;align-items:center;justify-content:center;width:100%;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:color-mix(in srgb,#1f9d55 20%,transparent);background:color-mix(in srgb,#1f9d55 12%,transparent);color:#1f9d55}.loro-badge--error{border-color:color-mix(in srgb,#dc2626 18%,transparent);background:color-mix(in srgb,#dc2626 10%,transparent);color:#dc2626}.loro-badge--info{border-color:color-mix(in srgb,var(--loro-primary-700) 18%,transparent);background:color-mix(in srgb,var(--loro-primary-700) 10%,transparent);color:var(--loro-primary-700)}.loro-badge--warning{border-color:color-mix(in srgb,#f5a800 22%,transparent);background:color-mix(in srgb,#f5a800 12%,transparent);color:#986c00}.loro-badge--neutral{border-color:var(--loro-border-soft);background:var(--loro-surface-muted);color:var(--loro-muted-strong)}.loro-badge__label{font-size:.85rem;font-weight:850;line-height:1.2;white-space:nowrap}\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()\">\n  <span class=\"loro-badge__label\">{{ label() }}</span>\n</span>\n", styles: [":host{display:inline-block;min-width:0;font-family:var(--loro-font-brand)}.loro-badge{display:flex;align-items:center;justify-content:center;width:100%;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:color-mix(in srgb,#1f9d55 20%,transparent);background:color-mix(in srgb,#1f9d55 12%,transparent);color:#1f9d55}.loro-badge--error{border-color:color-mix(in srgb,#dc2626 18%,transparent);background:color-mix(in srgb,#dc2626 10%,transparent);color:#dc2626}.loro-badge--info{border-color:color-mix(in srgb,var(--loro-primary-700) 18%,transparent);background:color-mix(in srgb,var(--loro-primary-700) 10%,transparent);color:var(--loro-primary-700)}.loro-badge--warning{border-color:color-mix(in srgb,#f5a800 22%,transparent);background:color-mix(in srgb,#f5a800 12%,transparent);color:#986c00}.loro-badge--neutral{border-color:var(--loro-border-soft);background:var(--loro-surface-muted);color:var(--loro-muted-strong)}.loro-badge__label{font-size:.85rem;font-weight:850;line-height:1.2;white-space:nowrap}\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 {
-    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-    description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
-    icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-    iconSize = input(28, ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
-    iconColor = input('default', ...(ngDevMode ? [{ debugName: "iconColor" }] : /* istanbul ignore next */ []));
-    link = input('', ...(ngDevMode ? [{ debugName: "link" }] : /* istanbul ignore next */ []));
-    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    justify = input('center', ...(ngDevMode ? [{ debugName: "justify" }] : /* istanbul ignore next */ []));
-    mobileJustify = input('center', ...(ngDevMode ? [{ debugName: "mobileJustify" }] : /* istanbul ignore next */ []));
-    selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
-    showArrow = input(false, ...(ngDevMode ? [{ debugName: "showArrow" }] : /* istanbul ignore next */ []));
-    arrowSize = input(16, ...(ngDevMode ? [{ debugName: "arrowSize" }] : /* istanbul ignore next */ []));
-    heroGreeting = input('', ...(ngDevMode ? [{ debugName: "heroGreeting" }] : /* istanbul ignore next */ []));
-    heroSubtitle = input('', ...(ngDevMode ? [{ debugName: "heroSubtitle" }] : /* istanbul ignore next */ []));
-    heroAvatarSrc = input(null, ...(ngDevMode ? [{ debugName: "heroAvatarSrc" }] : /* istanbul ignore next */ []));
-    heroAvatarAlt = input('Perfil', ...(ngDevMode ? [{ debugName: "heroAvatarAlt" }] : /* istanbul ignore next */ []));
-    heroAvatarIcon = input('user', ...(ngDevMode ? [{ debugName: "heroAvatarIcon" }] : /* istanbul ignore next */ []));
-    heroAvatarIconSize = input(22, ...(ngDevMode ? [{ debugName: "heroAvatarIconSize" }] : /* istanbul ignore next */ []));
-    heroVisualImage = input(null, ...(ngDevMode ? [{ debugName: "heroVisualImage" }] : /* istanbul ignore next */ []));
-    heroVisualAlt = input('AlLoro', ...(ngDevMode ? [{ debugName: "heroVisualAlt" }] : /* istanbul ignore next */ []));
-    resolvedIconSize = computed(() => {
-        const size = this.iconSize();
-        const normalizedSize = typeof size === 'number' ? `${size}px` : size;
-        return this.variant() === 'benefit' || this.variant() === 'benefit-showcase'
-            ? `var(--loro-card-benefit-icon-glyph-size, ${normalizedSize})`
-            : 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\n      class=\"loro-card\"\n      [routerLink]=\"link() || null\"\n      [class.loro-card--tinted]=\"variant() === 'tinted'\"\n      [class.loro-card--danger]=\"variant() === 'danger'\"\n      [class.loro-card--selectable]=\"variant() === 'selectable'\"\n      [class.loro-card--benefit]=\"variant() === 'benefit'\"\n      [class.loro-card--benefit-showcase]=\"variant() === 'benefit-showcase'\"\n      [class.loro-card--home-hero]=\"variant() === 'home-hero'\"\n      [class.loro-card--home-primary]=\"variant() === 'home-primary'\"\n      [class.loro-card--home-secondary]=\"variant() === 'home-secondary'\"\n      [class.loro-card--interactive]=\"!!link()\"\n      [class.loro-card--justify-start]=\"justify() === 'start'\"\n      [class.loro-card--justify-center]=\"justify() === 'center'\"\n      [class.loro-card--justify-end]=\"justify() === 'end'\"\n      [class.loro-card--mobile-justify-start]=\"mobileJustify() === 'start'\"\n      [class.loro-card--mobile-justify-center]=\"mobileJustify() === 'center'\"\n      [class.loro-card--mobile-justify-end]=\"mobileJustify() === 'end'\"\n      [class.loro-card--selected]=\"selected()\">\n      @if (variant() === 'home-hero') {\n        <div class=\"loro-card__hero-main\">\n          <div class=\"loro-card__hero-avatar\" aria-hidden=\"true\">\n            @if (heroAvatarSrc()) {\n              <img [src]=\"heroAvatarSrc()!\" [alt]=\"heroAvatarAlt()\" />\n            } @else {\n              <loro-icon [name]=\"heroAvatarIcon()\" [size]=\"heroAvatarIconSize()\" [alt]=\"heroAvatarAlt()\" />\n            }\n          </div>\n\n          <div class=\"loro-card__hero-copy\">\n            @if (heroGreeting()) {\n              <p>{{ heroGreeting() }}</p>\n            }\n            @if (heroSubtitle()) {\n              <span>{{ heroSubtitle() }}</span>\n            }\n          </div>\n        </div>\n\n        @if (heroVisualImage()) {\n          <div class=\"loro-card__hero-visual\" aria-hidden=\"true\">\n            <loro-image [name]=\"heroVisualImage()!\" [alt]=\"heroVisualAlt()\" width=\"100%\" />\n          </div>\n        }\n      }\n\n      @if ((title() || icon()) && variant() !== 'home-hero') {\n        <header class=\"loro-card__header\">\n          @if (icon()) {\n            <span class=\"loro-card__icon\">\n              <loro-icon\n                [name]=\"icon()!\"\n                [size]=\"resolvedIconSize()\"\n                [alt]=\"title() || icon()!\"\n                [color]=\"iconColor()\"\n                [decorative]=\"true\"\n              />\n            </span>\n          }\n          <div class=\"loro-card__copy\">\n            @if (title()) {\n              <h2 class=\"loro-card__title\">{{ title() }}</h2>\n            }\n            @if (description()) {\n              <p class=\"loro-card__description\">{{ description() }}</p>\n            }\n          </div>\n        </header>\n      }\n      <ng-content />\n      @if (showArrow()) {\n        <span class=\"loro-card__arrow\" aria-hidden=\"true\">\n          <loro-icon name=\"arrow-right\" [size]=\"arrowSize()\" alt=\"Ir\" />\n        </span>\n      }\n    </a>", styles: [":host{display:block;font-family:var(--loro-font-brand);container-type:inline-size}.loro-card{display:grid;gap:1.25rem;padding:clamp(1.25rem,3vw,1.75rem);border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-card);background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft);color:var(--loro-text);text-decoration:none;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background-color .18s ease}.loro-card--interactive{cursor:pointer}.loro-card--interactive:hover,.loro-card--interactive:focus-visible{transform:translateY(-1px);border-color:var(--loro-border-strong);outline:none}.loro-card--tinted{background:var(--loro-surface-tinted)}.loro-card--danger{border-color:#dc262638;background:#dc26260f}.loro-card--selectable{cursor:pointer}.loro-card--selected{border-color:var(--loro-primary-500);background:#6c3cff0d;box-shadow:0 0 0 1px #6c3cff33,var(--loro-shadow-soft)}.loro-card--benefit,.loro-card--benefit-showcase{gap:var(--loro-card-benefit-gap, .7rem);padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;transition:none}.loro-card__header{display:flex;align-items:center;gap:1rem;min-width:0}.loro-card__icon{display:grid;width:3.5rem;height:3.5rem;flex:0 0 auto;place-items:center;border-radius:1rem;background:var(--loro-brand-tint-surface);margin-block-end:.5rem}.loro-card--benefit .loro-card__header,.loro-card--benefit-showcase .loro-card__header{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--loro-card-benefit-header-gap, .75rem);min-width:0}.loro-card--benefit .loro-card__icon,.loro-card--benefit-showcase .loro-card__icon{width:var(--loro-card-benefit-icon-width, var(--loro-card-benefit-icon-size, 2.25rem));height:var(--loro-card-benefit-icon-height, var(--loro-card-benefit-icon-size, 2.25rem));border-radius:999px;background:var(--loro-card-benefit-icon-bg, var(--loro-primary-500));color:#fff}.loro-card__copy{min-width:0}.loro-card__title,.loro-card__description{margin:0}.loro-card__title{color:var(--loro-text-strong);font-size:clamp(1.15rem,2vw,1.45rem);font-weight:900;line-height:1.15}.loro-card__description{margin-top:.35rem;color:var(--loro-muted);font-size:.95rem;line-height:1.45}.loro-card__arrow{display:none;align-items:center;justify-content:center;justify-self:end;width:2.2rem;height:2.2rem;border-radius:999px;line-height:0}.loro-card--benefit .loro-card__title,.loro-card--benefit-showcase .loro-card__title{color:var(--loro-text-strong);font-size:var(--loro-card-benefit-title-font-size, 1rem);font-weight:900;line-height:var(--loro-card-benefit-title-line-height, 1.15);overflow-wrap:anywhere}.loro-card--benefit .loro-card__description,.loro-card--benefit-showcase .loro-card__description{margin-top:.12rem;color:var(--loro-muted);font-size:var(--loro-card-benefit-description-font-size, .82rem);font-weight:var(--loro-card-benefit-description-font-weight, 750);line-height:var(--loro-card-benefit-description-line-height, 1.25);overflow-wrap:anywhere}.loro-card--benefit .loro-card__copy,.loro-card--benefit-showcase .loro-card__copy{min-width:0;width:100%;flex:1 1 auto}.loro-card--benefit-showcase{width:100%;min-width:0}.loro-card--benefit.loro-card--justify-start .loro-card__header,.loro-card--benefit-showcase.loro-card--justify-start .loro-card__header{justify-content:flex-start;text-align:left}.loro-card--benefit.loro-card--justify-center .loro-card__header,.loro-card--benefit-showcase.loro-card--justify-center .loro-card__header{justify-content:center;text-align:center}.loro-card--benefit.loro-card--justify-end .loro-card__header,.loro-card--benefit-showcase.loro-card--justify-end .loro-card__header{justify-content:flex-end;text-align:right}.loro-card--home-primary,.loro-card--home-secondary{position:relative;display:flex;flex-direction:column;align-items:stretch;height:100%;gap:0;min-height:10.5rem;padding:1rem;overflow:hidden;isolation:isolate;border-color:var(--loro-home-card-border);border-radius:1.45rem;background:var(--loro-surface-soft);text-align:left}.loro-card--home-primary:before,.loro-card--home-primary:after,.loro-card--home-secondary:before,.loro-card--home-secondary:after{position:absolute;inset:0;content:\"\";pointer-events:none}.loro-card--home-primary>*,.loro-card--home-secondary>*{position:relative;z-index:1}.loro-card--home-primary .loro-card__header,.loro-card--home-secondary .loro-card__header{display:block;flex:1 1 auto;text-align:left}.loro-card--home-primary .loro-card__icon,.loro-card--home-secondary .loro-card__icon{position:relative;width:3rem;height:3rem;border:1px solid rgba(255,255,255,.2);border-radius:1.15rem;background:var(--loro-home-card-icon-bg);box-shadow:var(--loro-home-card-icon-shadow);color:var(--loro-home-card-icon-color)}.loro-card--home-primary .loro-card__copy,.loro-card--home-secondary .loro-card__copy{min-width:0;display:grid;grid-template-rows:auto auto;justify-items:start;gap:.4rem;min-height:0}.loro-card--home-primary .loro-card__title,.loro-card--home-secondary .loro-card__title{color:var(--loro-home-card-title);font-size:1.16rem;font-weight:800;line-height:1.15;letter-spacing:-.02em;text-align:left}.loro-card--home-primary .loro-card__description,.loro-card--home-secondary .loro-card__description{max-width:none;min-height:0;margin-top:0;color:var(--loro-home-card-description);font-size:.9rem;line-height:1.45;text-align:left}.loro-card--home-primary .loro-card__arrow,.loro-card--home-secondary .loro-card__arrow{display:inline-flex;color:var(--loro-home-card-arrow-color);align-items:center;justify-content:center;align-self:flex-end;margin-top:auto}.loro-card--home-secondary .loro-card__title{font-size:1.08rem}.loro-card--home-secondary .loro-card__description{font-size:.85rem}.loro-card--home-primary:hover,.loro-card--home-primary:focus-visible,.loro-card--home-secondary:hover,.loro-card--home-secondary:focus-visible{transform:translateY(-.24rem) scale(1.01);border-color:var(--loro-home-card-hover-border);box-shadow:var(--loro-home-card-hover-shadow)}.loro-card--home-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.75rem;min-height:6.25rem;overflow:hidden;border-color:var(--loro-home-hero-border);border-radius:1.1rem;background:var(--loro-home-hero-bg);padding:.875rem 1rem;color:var(--loro-home-hero-text)}.loro-card--home-hero .loro-card__header,.loro-card--home-hero .loro-card__copy,.loro-card--home-hero .loro-card__icon{display:none}.loro-card__hero-main{display:flex;align-items:center;gap:.75rem;min-width:0}.loro-card__hero-avatar{display:grid;width:3rem;height:3rem;flex:0 0 3rem;place-items:center;overflow:hidden;border-radius:.95rem;background:var(--loro-home-avatar-bg);color:var(--loro-home-avatar-color)}.loro-card__hero-avatar img{width:100%;height:100%;object-fit:cover}.loro-card__hero-copy{display:grid;gap:.18rem;min-width:0}.loro-card__hero-copy p,.loro-card__hero-copy span{margin:0}.loro-card__hero-copy p{font-size:1rem;font-weight:800;line-height:1.2}.loro-card__hero-copy span{color:var(--loro-home-hero-subtitle);font-size:.875rem;line-height:1.35}.loro-card__hero-visual{width:clamp(4.5rem,24vw,5.75rem);align-self:end}.loro-card--home-hero:hover,.loro-card--home-hero:focus-visible{transform:none;border-color:var(--loro-home-hero-border);box-shadow:var(--loro-shadow-soft)}@media(max-width:1023.88px){.loro-card--benefit.loro-card--mobile-justify-start .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-start .loro-card__header{text-align:left}.loro-card--benefit.loro-card--mobile-justify-center .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-center .loro-card__header{text-align:center;justify-self:center;width:fit-content;max-width:100%;margin-inline:auto}.loro-card--benefit.loro-card--mobile-justify-end .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-end .loro-card__header{text-align:right}.loro-card--benefit.loro-card--mobile-justify-start .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-start .loro-card__header{grid-template-columns:auto minmax(0,1fr)}.loro-card--benefit.loro-card--mobile-justify-center .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-center .loro-card__header{grid-template-columns:auto auto}.loro-card--benefit.loro-card--mobile-justify-end .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-end .loro-card__header{grid-template-columns:auto minmax(0,1fr)}}@container (min-width: 18rem){.loro-card--home-primary,.loro-card--home-secondary{min-height:9.75rem}.loro-card--home-primary .loro-card__header,.loro-card--home-secondary .loro-card__header{display:block}.loro-card--home-hero{min-height:7.25rem;padding:1rem 1.25rem}.loro-card__hero-visual{width:clamp(5.25rem,20vw,7rem)}}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }, { kind: "component", type: LoroImage, selector: "loro-image", inputs: ["name", "alt", "size", "width", "height", "fit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroCard, decorators: [{
-            type: Component,
-            args: [{ selector: 'loro-card', standalone: true, imports: [RouterLink, LoroIcon, LoroImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\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 {
-    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
-    checked = input(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
-    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\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\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"] }] } });
+const LORO_ALERT_DEFAULTS = {
+    title: '',
+    message: '',
+    variant: 'info',
+    announcement: 'auto',
+    focusable: false,
+    actionLabel: '',
+    dismissible: false,
+    dismissLabel: 'Cerrar aviso',
+};
 
-class LoroToggle {
-    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
-    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
-    errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
-    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
-    ariaLabel = input('Cambiar estado', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    checkedChange = output();
-    toggle() {
-        if (this.disabled()) {
-            return;
+class LoroAlert {
+    title = input(LORO_ALERT_DEFAULTS.title, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    message = input(LORO_ALERT_DEFAULTS.message, ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    variant = input(LORO_ALERT_DEFAULTS.variant, ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    announcement = input(LORO_ALERT_DEFAULTS.announcement, ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
+    focusable = input(LORO_ALERT_DEFAULTS.focusable, ...(ngDevMode ? [{ debugName: "focusable" }] : /* istanbul ignore next */ []));
+    actionLabel = input(LORO_ALERT_DEFAULTS.actionLabel, ...(ngDevMode ? [{ debugName: "actionLabel" }] : /* istanbul ignore next */ []));
+    dismissible = input(LORO_ALERT_DEFAULTS.dismissible, ...(ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []));
+    dismissLabel = input(LORO_ALERT_DEFAULTS.dismissLabel, ...(ngDevMode ? [{ debugName: "dismissLabel" }] : /* istanbul ignore next */ []));
+    action = output();
+    dismissed = output();
+    resolvedIcon = computed(() => this.resolveIconName(), ...(ngDevMode ? [{ debugName: "resolvedIcon" }] : /* istanbul ignore next */ []));
+    resolvedIconColor = computed(() => this.resolveVariantIconColor(), ...(ngDevMode ? [{ debugName: "resolvedIconColor" }] : /* istanbul ignore next */ []));
+    actionIconColor = computed(() => this.resolveVariantIconColor(), ...(ngDevMode ? [{ debugName: "actionIconColor" }] : /* istanbul ignore next */ []));
+    role = computed(() => this.resolveRole(), ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    ariaLive = computed(() => this.resolveAriaLive(), ...(ngDevMode ? [{ debugName: "ariaLive" }] : /* istanbul ignore next */ []));
+    resolvedAnnouncement = computed(() => {
+        const announcement = this.announcement();
+        if (announcement === 'auto') {
+            return this.variant() === 'error' ? 'assertive' : 'polite';
         }
-        const nextChecked = !this.checked();
-        this.checked.set(nextChecked);
-        this.touched.set(true);
-        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\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\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 {
-    router = inject(Router, { optional: true });
-    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-    description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
-    icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-    iconSize = input(25, ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
-    iconColor = input('primary', ...(ngDevMode ? [{ debugName: "iconColor" }] : /* istanbul ignore next */ []));
-    route = input('', ...(ngDevMode ? [{ debugName: "route" }] : /* istanbul ignore next */ []));
-    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    trailing = input('arrow', ...(ngDevMode ? [{ debugName: "trailing" }] : /* istanbul ignore next */ []));
-    value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    checked = input(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
-    selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
-    badgeLabel = input('', ...(ngDevMode ? [{ debugName: "badgeLabel" }] : /* istanbul ignore next */ []));
-    badgeVariant = input('info', ...(ngDevMode ? [{ debugName: "badgeVariant" }] : /* istanbul ignore next */ []));
-    itemClick = output();
-    checkedChange = output();
-    selectedChange = output();
-    activate() {
-        this.itemClick.emit();
-        if (this.trailing() === 'toggle') {
-            this.checkedChange.emit(!this.checked());
-            return;
+        return announcement;
+    }, ...(ngDevMode ? [{ debugName: "resolvedAnnouncement" }] : /* istanbul ignore next */ []));
+    resolveIconName() {
+        switch (this.variant()) {
+            case 'success':
+                return 'tick-circle';
+            case 'warning':
+            case 'error':
+                return 'shield-alert';
+            default:
+                return 'info';
         }
-        if (this.trailing() === 'radio') {
-            this.selectedChange.emit(this.value());
-            return;
+    }
+    resolveVariantIconColor() {
+        switch (this.variant()) {
+            case 'success':
+                return 'success';
+            case 'warning':
+                return 'warning';
+            case 'error':
+                return 'danger';
+            case 'neutral':
+                return 'muted';
+            case 'info':
+            default:
+                return 'primary';
         }
-        const route = this.route();
-        if (route && this.router) {
-            void this.router.navigateByUrl(route);
+    }
+    resolveRole() {
+        const announcement = this.resolvedAnnouncement();
+        if (announcement === 'off') {
+            return null;
         }
+        return announcement === 'assertive' ? 'alert' : 'status';
     }
-    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\n      type=\"button\"\n      class=\"loro-card-nav\"\n      [class.loro-card-nav--danger]=\"variant() === 'danger'\"\n      [class.loro-card-nav--soft]=\"variant() === 'soft'\"\n      [class.loro-card-nav--selected]=\"selected()\"\n      (click)=\"activate()\">\n      @if (icon()) {\n        <span class=\"loro-card-nav__icon\">\n          <loro-icon\n            [name]=\"icon()!\"\n            [size]=\"iconSize()\"\n            [alt]=\"title()\"\n            [color]=\"variant() === 'danger' ? 'danger' : iconColor()\" />\n        </span>\n      }\n\n      <span class=\"loro-card-nav__copy\">\n        <span class=\"loro-card-nav__title\">{{ title() }}</span>\n        @if (description()) {\n          <span class=\"loro-card-nav__description\">{{ description() }}</span>\n        }\n      </span>\n\n      <span class=\"loro-card-nav__trailing\" (click)=\"$event.stopPropagation()\">\n        @switch (trailing()) {\n          @case ('toggle') {\n            <loro-toggle [checked]=\"checked()\" [ariaLabel]=\"title()\" (checkedChange)=\"checkedChange.emit($event)\" />\n          }\n          @case ('radio') {\n            <loro-radio [label]=\"''\" [value]=\"value()\" [checked]=\"selected()\" (selected)=\"selectedChange.emit($event)\" />\n          }\n          @case ('text') {\n            <span class=\"loro-card-nav__value\">{{ value() }}</span>\n          }\n          @case ('badge') {\n            <loro-badge [label]=\"badgeLabel() || value()\" [variant]=\"badgeVariant()\" />\n          }\n          @case ('arrow') {\n            <loro-icon\n              class=\"loro-card-nav__arrow\"\n              name=\"chevron-right\"\n              [size]=\"22\"\n              alt=\"Abrir\"\n              [color]=\"variant() === 'danger' ? 'danger' : 'primary'\" />\n          }\n        }\n      </span>\n    </button>", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-card-nav{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;width:100%;min-height:4.8rem;padding:.95rem 1.1rem;border:0;border-bottom:1px solid var(--loro-border-subtle);background:transparent;color:var(--loro-text);font:inherit;text-align:left;cursor:pointer}.loro-card-nav:last-child{border-bottom:0}.loro-card-nav--soft,.loro-card-nav--danger{border:1px solid var(--loro-border-subtle);border-radius:1rem;background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft)}.loro-card-nav--danger{border-color:color-mix(in srgb,var(--loro-danger-text) 30%,transparent);background:var(--loro-danger-surface);color:var(--loro-danger-text)}.loro-card-nav--selected{border-color:#6c3cff52;background:#6c3cff0a}.loro-card-nav__icon{display:grid;width:3.15rem;height:3.15rem;place-items:center;border-radius:.9rem;background:var(--loro-brand-tint-surface)}.loro-card-nav--danger .loro-card-nav__icon{background:color-mix(in srgb,var(--loro-danger-text) 12%,transparent)}.loro-card-nav__copy{display:grid;gap:.25rem;min-width:0}.loro-card-nav__title{color:currentColor;font-size:1rem;font-weight:900;line-height:1.2}.loro-card-nav__description{color:var(--loro-muted);font-size:.9rem;font-weight:600;line-height:1.35}.loro-card-nav--danger .loro-card-nav__description{color:color-mix(in srgb,var(--loro-danger-text) 72%,var(--loro-muted))}.loro-card-nav__trailing{display:inline-flex;align-items:center;justify-content:flex-end;min-width:0}.loro-card-nav__value{color:var(--loro-muted-strong);font-weight:800;white-space:nowrap}@media(max-width:520px){.loro-card-nav{gap:.85rem;min-height:5.2rem;padding-inline:1rem}.loro-card-nav__icon{width:3rem;height:3rem}}\n"], dependencies: [{ kind: "component", type: LoroBadge, selector: "loro-badge", inputs: ["label", "variant"] }, { kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }, { kind: "component", type: LoroRadio, selector: "loro-radio", inputs: ["label", "value", "description", "checked", "variant"], outputs: ["selected"] }, { kind: "component", type: LoroToggle, selector: "loro-toggle", inputs: ["checked", "disabled", "required", "invalid", "errors", "touched", "ariaLabel"], outputs: ["checkedChange", "touchedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroCardNav, decorators: [{
-            type: Component,
-            args: [{ selector: 'loro-card-nav', standalone: true, imports: [LoroBadge, LoroIcon, LoroRadio, LoroToggle], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\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 {
-    haptics = inject(LoroHapticsService);
-    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-    description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
-    link = input('/', ...(ngDevMode ? [{ debugName: "link" }] : /* istanbul ignore next */ []));
-    icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-    illustration = input(null, ...(ngDevMode ? [{ debugName: "illustration" }] : /* istanbul ignore next */ []));
-    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    showArrow = input(true, ...(ngDevMode ? [{ debugName: "showArrow" }] : /* istanbul ignore next */ []));
-    iconSize = input(88, ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
-    arrowSize = input(24, ...(ngDevMode ? [{ debugName: "arrowSize" }] : /* istanbul ignore next */ []));
-    onCardClick() {
-        this.haptics.impact('light');
+    resolveAriaLive() {
+        const announcement = this.resolvedAnnouncement();
+        return announcement === 'off' ? null : announcement;
     }
-    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 ɵ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  <loro-icon [name]=\"resolvedIcon()\" [size]=\"20\" [alt]=\"''\" [color]=\"resolvedIconColor()\" />\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    </div>\n\n    @if (actionLabel()) {\n        <loro-button\n          [text]=\"actionLabel()\"\n          variant=\"tertiary\"\n          [iconColor]=\"actionIconColor()\"\n          (buttonClick)=\"action.emit()\"\n        ></loro-button>\n    }\n  </div>\n\n  @if (dismissible()) {\n    <loro-button\n      icon=\"x\"\n      variant=\"tertiary\"\n      [iconOnly]=\"true\"\n      [iconColor]=\"actionIconColor()\"\n      [ariaLabel]=\"dismissLabel()\"\n      (buttonClick)=\"dismissed.emit()\"\n    ></loro-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-radius: var(--loro-radius-card, .75rem);--alert-gap: var(--loro-space-4, .75rem);--alert-padding: var(--loro-space-4, .75rem);--alert-icon-size: var(--loro-space-6, 1.5rem);--alert-title-font-size: var(--loro-font-size-md, 1rem);--alert-message-font-size: var(--loro-font-size-md, 1rem);--alert-actions-gap: var(--loro-space-2, .5rem);--alert-actions-margin-top: var(--loro-space-2, .5rem);--alert-dismiss-size: var(--loro-space-8, 2rem);position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:var(--alert-gap);width:100%;min-width:0;padding:var(--alert-padding);overflow-wrap:anywhere;border:1px solid var(--alert-border);border-radius:var(--alert-radius);background:var(--alert-background);color:var(--alert-foreground)}.loro-alert__content{display:grid;gap:.35rem}.loro-alert__title{display:block;margin:0;color:var(--alert-title);font-size:var(--alert-title-font-size);font-weight:800;line-height:1.3}.loro-alert__message{min-width:0;color:var(--alert-message);font-size:var(--alert-message-font-size);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__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--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}}@media(prefers-reduced-motion:reduce){.loro-alert *,.loro-alert *:before,.loro-alert *:after{scroll-behavior:auto;transition:none;animation:none}}\n"], dependencies: [{ kind: "component", type: LoroButton, selector: "loro-button", inputs: ["text", "icon", "iconColor", "iconOnly", "iconSize", "variant", "width", "ariaLabel", "ariaDescription"], outputs: ["buttonClick"] }, { 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: LoroDashboardCard, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroAlert, 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"] }]
-        }], 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 }] }] } });
+            args: [{ selector: 'loro-alert', standalone: true, imports: [LoroButton, LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[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()',
+                    }, 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  <loro-icon [name]=\"resolvedIcon()\" [size]=\"20\" [alt]=\"''\" [color]=\"resolvedIconColor()\" />\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    </div>\n\n    @if (actionLabel()) {\n        <loro-button\n          [text]=\"actionLabel()\"\n          variant=\"tertiary\"\n          [iconColor]=\"actionIconColor()\"\n          (buttonClick)=\"action.emit()\"\n        ></loro-button>\n    }\n  </div>\n\n  @if (dismissible()) {\n    <loro-button\n      icon=\"x\"\n      variant=\"tertiary\"\n      [iconOnly]=\"true\"\n      [iconColor]=\"actionIconColor()\"\n      [ariaLabel]=\"dismissLabel()\"\n      (buttonClick)=\"dismissed.emit()\"\n    ></loro-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-radius: var(--loro-radius-card, .75rem);--alert-gap: var(--loro-space-4, .75rem);--alert-padding: var(--loro-space-4, .75rem);--alert-icon-size: var(--loro-space-6, 1.5rem);--alert-title-font-size: var(--loro-font-size-md, 1rem);--alert-message-font-size: var(--loro-font-size-md, 1rem);--alert-actions-gap: var(--loro-space-2, .5rem);--alert-actions-margin-top: var(--loro-space-2, .5rem);--alert-dismiss-size: var(--loro-space-8, 2rem);position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:var(--alert-gap);width:100%;min-width:0;padding:var(--alert-padding);overflow-wrap:anywhere;border:1px solid var(--alert-border);border-radius:var(--alert-radius);background:var(--alert-background);color:var(--alert-foreground)}.loro-alert__content{display:grid;gap:.35rem}.loro-alert__title{display:block;margin:0;color:var(--alert-title);font-size:var(--alert-title-font-size);font-weight:800;line-height:1.3}.loro-alert__message{min-width:0;color:var(--alert-message);font-size:var(--alert-message-font-size);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__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--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}}@media(prefers-reduced-motion:reduce){.loro-alert *,.loro-alert *:before,.loro-alert *:after{scroll-behavior:auto;transition:none;animation:none}}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], announcement: [{ type: i0.Input, args: [{ isSignal: true, alias: "announcement", required: false }] }], focusable: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusable", required: false }] }], actionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLabel", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], dismissLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissLabel", required: false }] }], action: [{ type: i0.Output, args: ["action"] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }] } });
 
-class LoroDivider {
-    text = input('', ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
-    align = input('center', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroDivider, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroDivider, isStandalone: true, selector: "loro-divider", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <div
-      class="loro-divider"
-      role="presentation"
-      [class.loro-divider--left]="align() === 'left'"
-      [class.loro-divider--right]="align() === 'right'"
-    >
-      <span class="loro-divider__line"></span>
-      @if (text()) {
-        <p class="loro-divider__text">{{ text() }}</p>
-      }
-      <span class="loro-divider__line"></span>
-    </div>
-  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-divider{display:flex;align-items:center;gap:.9rem;color:var(--loro-muted)}.loro-divider__line{height:1px;flex:1;background:color-mix(in srgb,var(--loro-muted) 30%,transparent)}.loro-divider__text{margin:0;font-size:.9rem;font-weight:850;line-height:1;white-space:nowrap}.loro-divider--left .loro-divider__line:last-child{flex:999}.loro-divider--right .loro-divider__line:first-child{flex:999}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+class LoroNotification {
+    count = input(0, ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
+    maxCount = input(9, ...(ngDevMode ? [{ debugName: "maxCount" }] : /* istanbul ignore next */ []));
+    showZero = input(false, ...(ngDevMode ? [{ debugName: "showZero" }] : /* istanbul ignore next */ []));
+    active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    expanded = input(null, ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Notifications', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    iconSize = input(25, ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
+    notificationClick = output();
+    showBadge = computed(() => this.count() > 0 || this.showZero(), ...(ngDevMode ? [{ debugName: "showBadge" }] : /* istanbul ignore next */ []));
+    badgeLabel = computed(() => {
+        const count = Math.max(0, this.count());
+        const maxCount = Math.max(1, this.maxCount());
+        return count > maxCount ? `${maxCount}+` : count.toString();
+    }, ...(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\n      type=\"button\"\n      class=\"loro-notification\"\n      [class.loro-notification--active]=\"active()\"\n      [class.loro-notification--disabled]=\"disabled()\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-expanded]=\"expanded()\"\n      (click)=\"notificationClick.emit()\">\n      <loro-icon name=\"bell\" [size]=\"iconSize()\" alt=\"\" [decorative]=\"true\" color=\"primary\" />\n      @if (showBadge()) {\n        <span class=\"loro-notification__badge\" [attr.aria-label]=\"badgeAriaLabel()\">\n          {{ badgeLabel() }}\n        </span>\n      }\n    </button>", styles: [":host{display:inline-flex;font-family:var(--loro-font-brand)}.loro-notification{position:relative;display:grid;width:var(--loro-notification-size, 2.75rem);height:var(--loro-notification-size, 2.75rem);place-items:center;border:0;border-radius:50%;background:transparent;color:var(--loro-primary-700);cursor:pointer;transition:background .15s ease,transform .15s ease;-webkit-tap-highlight-color:transparent}.loro-notification:hover,.loro-notification--active{background:transparent}.loro-notification:focus-visible{outline:2px solid rgba(108,60,255,.35);outline-offset:2px}.loro-notification:active{transform:scale(.97)}.loro-notification--disabled{cursor:not-allowed;opacity:.55;transform:none}.loro-notification__badge{position:absolute;top:.18rem;right:.1rem;display:grid;min-width:1.15rem;height:1.15rem;place-items:center;padding-inline:.25rem;border:2px solid var(--loro-surface);border-radius:999px;background:var(--loro-primary-500);color:#fff;font-size:.68rem;font-weight:950;line-height:1;box-sizing:border-box}\n"], dependencies: [{ kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroDivider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroNotification, decorators: [{
             type: Component,
-            args: [{ selector: 'loro-divider', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div
-      class="loro-divider"
-      role="presentation"
-      [class.loro-divider--left]="align() === 'left'"
-      [class.loro-divider--right]="align() === 'right'"
-    >
-      <span class="loro-divider__line"></span>
-      @if (text()) {
-        <p class="loro-divider__text">{{ text() }}</p>
-      }
-      <span class="loro-divider__line"></span>
-    </div>
-  `, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-divider{display:flex;align-items:center;gap:.9rem;color:var(--loro-muted)}.loro-divider__line{height:1px;flex:1;background:color-mix(in srgb,var(--loro-muted) 30%,transparent)}.loro-divider__text{margin:0;font-size:.9rem;font-weight:850;line-height:1;white-space:nowrap}.loro-divider--left .loro-divider__line:last-child{flex:999}.loro-divider--right .loro-divider__line:first-child{flex:999}\n"] }]
-        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }] } });
-
-function optionalNumberAttribute$1(value) {
-    if (value === undefined || value === null || value === '') {
-        return undefined;
-    }
-    const parsed = Number(value);
-    return Number.isFinite(parsed) ? parsed : undefined;
-}
-let nextLoroInputId = 0;
-class LoroInput {
-    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
-    helperText = input('', ...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
-    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
-    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
-    autocomplete = input('', ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
-    inputmode = input('', ...(ngDevMode ? [{ debugName: "inputmode" }] : /* istanbul ignore next */ []));
-    icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-    iconSize = input(24, ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
-    trailingIcon = input(null, ...(ngDevMode ? [{ debugName: "trailingIcon" }] : /* istanbul ignore next */ []));
-    trailingIconSize = input(24, ...(ngDevMode ? [{ debugName: "trailingIconSize" }] : /* istanbul ignore next */ []));
-    trailingAriaLabel = input('', ...(ngDevMode ? [{ debugName: "trailingAriaLabel" }] : /* istanbul ignore next */ []));
-    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    state = input('default', ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
-    errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
-    errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
-    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
-    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
-    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
-    unit = input('ud', ...(ngDevMode ? [{ debugName: "unit" }] : /* istanbul ignore next */ []));
-    step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
-    min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute$1 });
-    max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute$1 });
-    trailingClick = output();
-    control = viewChild('control', ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
-    errorId = `loro-input-error-${++nextLoroInputId}`;
-    errorText = computed(() => {
-        const manualMessage = this.errorMessage().trim();
-        if (manualMessage) {
-            return manualMessage;
-        }
-        return this.errors()[0]?.message?.trim() ?? '';
-    }, ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
-    hasError = computed(() => this.state() === 'error'
-        || this.errorText().length > 0
-        || (this.invalid() && this.touched()), ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
-    hasSuccess = computed(() => this.state() === 'success' && !this.hasError(), ...(ngDevMode ? [{ debugName: "hasSuccess" }] : /* istanbul ignore next */ []));
-    hasLoading = computed(() => this.state() === 'loading' && !this.hasError(), ...(ngDevMode ? [{ debugName: "hasLoading" }] : /* istanbul ignore next */ []));
-    resolvedLeadingIconColor = computed(() => this.hasError() ? 'danger' : this.hasSuccess() ? 'success' : 'primary', ...(ngDevMode ? [{ debugName: "resolvedLeadingIconColor" }] : /* istanbul ignore next */ []));
-    resolvedTrailingIconColor = computed(() => this.trailingIcon() === 'eye' || this.trailingIcon() === 'eye-off'
-        ? 'muted'
-        : this.hasError() ? 'danger' : this.hasSuccess() ? 'success' : 'muted', ...(ngDevMode ? [{ debugName: "resolvedTrailingIconColor" }] : /* istanbul ignore next */ []));
-    focus(options) {
-        this.control()?.nativeElement.focus(options);
-    }
-    adjust(delta) {
-        const value = this.coerceNumber(this.value());
-        const nextValue = this.clampValue(value + delta);
-        this.value.set(this.formatValue(nextValue));
-        this.touched.set(true);
-    }
-    normalizeValue(value) {
-        this.value.set(this.formatValue(this.clampValue(this.coerceNumber(value))));
-        this.touched.set(true);
-    }
-    updateValue(value) {
-        this.value.set(value);
-    }
-    markAsTouched() {
-        this.touched.set(true);
-    }
-    coerceNumber(value) {
-        const parsed = Number(value.replace(',', '.'));
-        return Number.isFinite(parsed) ? parsed : (this.min() ?? 0);
-    }
-    formatValue(value) {
-        if (this.normalizedUnit() === 'ud') {
-            return Math.round(value).toString();
-        }
-        return Number(value.toFixed(1)).toLocaleString('es-ES', {
-            minimumFractionDigits: Number.isInteger(value) ? 0 : 1,
-            maximumFractionDigits: 1,
-        });
-    }
-    normalizedUnit() {
-        return this.unit() === 'kg' ? 'kg' : 'ud';
-    }
-    stepperInputSize() {
-        return this.normalizedUnit() === 'kg' ? 4 : 3;
-    }
-    stepperInputMaxLength() {
-        return this.normalizedUnit() === 'kg' ? 4 : 3;
-    }
-    sanitizeStepperInput(event) {
-        const input = event.target;
-        if (!(input instanceof HTMLInputElement)) {
-            return;
-        }
-        const value = this.sanitizeValue(input.value);
-        if (input.value !== value) {
-            input.value = value;
-        }
-        if (value === '' || value === ',' || value === '.') {
-            return;
-        }
-        const formatted = this.formatValue(this.clampValue(this.coerceNumber(value)));
-        input.value = formatted;
-        this.value.set(formatted);
-    }
-    clampValue(value) {
-        const min = this.min() ?? 0;
-        const max = this.max() ?? 100;
-        return Math.min(max, Math.max(min, value));
-    }
-    sanitizeValue(value) {
-        if (this.normalizedUnit() === 'ud') {
-            return value.replace(/\D/g, '').slice(0, this.stepperInputMaxLength());
-        }
-        const normalized = value.replace(/\./g, ',').replace(/[^\d,]/g, '');
-        const [integer = '', decimal = ''] = normalized.split(',');
-        const nextInteger = integer.slice(0, 3);
-        const nextDecimal = decimal.slice(0, 1);
-        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') {\n      <span\n        class=\"loro-input loro-input--stepper-field\"\n        [class.loro-input--error]=\"hasError()\"\n        [class.loro-input--success]=\"hasSuccess()\">\n        @if (label()) {\n          <span class=\"loro-input__label\">{{ label() }}</span>\n        }\n        <span\n          class=\"loro-input--stepper\"\n          [class.loro-input--stepper-kg]=\"normalizedUnit() === 'kg'\"\n          [class.loro-input--stepper-ud]=\"normalizedUnit() === 'ud'\"\n          role=\"group\"\n          [attr.aria-label]=\"label() || 'Cantidad'\"\n        >\n          <button type=\"button\" aria-label=\"Restar\" [disabled]=\"disabled()\" (click)=\"adjust(-step())\">-</button>\n          <span class=\"loro-input__stepper-value\">\n            <input\n              #control\n              [attr.inputmode]=\"normalizedUnit() === 'kg' ? 'decimal' : 'numeric'\"\n              [attr.size]=\"stepperInputSize()\"\n              [attr.maxlength]=\"stepperInputMaxLength()\"\n              [attr.max]=\"max()\"\n              [attr.min]=\"min()\"\n              [value]=\"value()\"\n              [disabled]=\"disabled()\"\n              [readonly]=\"readonly()\"\n              [required]=\"required()\"\n              [attr.aria-label]=\"label() || 'Cantidad'\"\n              [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n              [attr.aria-describedby]=\"hasError() && errorText() ? errorId : null\"\n              (keydown.enter)=\"$any($event.target).blur()\"\n              (input)=\"sanitizeStepperInput($event)\"\n              (blur)=\"markAsTouched(); normalizeValue(($any($event.target).value ?? '').toString())\"\n            />\n            <span>{{ normalizedUnit() }}</span>\n          </span>\n          <button type=\"button\" aria-label=\"Sumar\" [disabled]=\"disabled()\" (click)=\"adjust(step())\">+</button>\n        </span>\n        @if (hasError() && errorText()) {\n          <span class=\"loro-input__error\" [id]=\"errorId\">\n            <loro-icon name=\"shield-alert\" [size]=\"16\" color=\"danger\" [decorative]=\"true\" />\n            <span>{{ errorText() }}</span>\n          </span>\n        } @else if (hasLoading() && helperText()) {\n          <span class=\"loro-input__loading\" aria-live=\"polite\">\n            <span>{{ helperText() }}</span>\n          </span>\n        } @else if (hasSuccess() && helperText()) {\n          <span class=\"loro-input__success\">\n            <loro-icon name=\"check\" [size]=\"16\" color=\"success\" [decorative]=\"true\" />\n            <span>{{ helperText() }}</span>\n          </span>\n        } @else if (helperText()) {\n          <span class=\"loro-input__helper\">{{ helperText() }}</span>\n        }\n      </span>\n    } @else {\n      <label\n        class=\"loro-input\"\n        [class.loro-input--has-icon]=\"icon() || variant() === 'search'\"\n        [class.loro-input--error]=\"hasError()\"\n        [class.loro-input--success]=\"hasSuccess()\"\n        [class.loro-input--loading]=\"hasLoading()\"\n      >\n        @if (label()) {\n          <span class=\"loro-input__label\">{{ label() }}</span>\n        }\n        <span class=\"loro-input__control\">\n          @if (icon() || variant() === 'search') {\n            <loro-icon\n              [name]=\"icon() || 'search'\"\n              [size]=\"iconSize()\"\n              [alt]=\"label() || placeholder()\"\n              [color]=\"resolvedLeadingIconColor()\"\n            />\n          }\n          <input\n            #control\n            [type]=\"type()\"\n            [attr.name]=\"name() || null\"\n            [placeholder]=\"placeholder()\"\n            [value]=\"value()\"\n            [disabled]=\"disabled()\"\n            [readonly]=\"readonly()\"\n            [required]=\"required()\"\n            [attr.autocomplete]=\"autocomplete() || null\"\n            [attr.inputmode]=\"inputmode() || null\"\n            [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n            [attr.aria-describedby]=\"hasError() && errorText() ? errorId : null\"\n            (input)=\"updateValue(($any($event.target).value ?? '').toString())\"\n            (blur)=\"markAsTouched()\"\n          />\n          @if (trailingIcon()) {\n            <button\n              type=\"button\"\n              class=\"loro-input__trailing-button\"\n              [attr.aria-label]=\"trailingAriaLabel() || null\"\n              (click)=\"trailingClick.emit()\"\n            >\n              <loro-icon\n                [name]=\"trailingIcon()!\"\n                [size]=\"trailingIconSize()\"\n                alt=\"\"\n                [decorative]=\"true\"\n                [color]=\"resolvedTrailingIconColor()\"\n              />\n            </button>\n          }\n        </span>\n        @if (hasError() && errorText()) {\n          <span class=\"loro-input__error\" [id]=\"errorId\">\n            <loro-icon name=\"shield-alert\" [size]=\"16\" color=\"danger\" [decorative]=\"true\" />\n            <span>{{ errorText() }}</span>\n          </span>\n        } @else if (hasLoading() && helperText()) {\n          <span class=\"loro-input__loading\" aria-live=\"polite\">\n            <span class=\"loro-input__loader\" aria-hidden=\"true\"></span>\n            <span>{{ helperText() }}</span>\n          </span>\n        } @else if (hasSuccess() && helperText()) {\n          <span class=\"loro-input__success\">\n            <loro-icon name=\"check\" [size]=\"16\" color=\"success\" [decorative]=\"true\" />\n            <span>{{ helperText() }}</span>\n          </span>\n        } @else if (helperText()) {\n          <span class=\"loro-input__helper\">{{ helperText() }}</span>\n        }\n      </label>\n    }", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-input{display:grid;gap:.55rem;color:var(--loro-text)}.loro-input__label{color:var(--loro-muted-strong);font-size:var(--loro-input-label-font-size, .95rem);font-weight:var(--loro-input-label-font-weight, 800);line-height:var(--loro-input-label-line-height, 1.2)}.loro-input__control{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;min-height:var(--loro-input-control-min-height, 3.4rem);padding:var(--loro-input-control-padding, 0 1rem);border:1px solid var(--loro-input-control-border-color, var(--loro-border-subtle));border-radius:var(--loro-input-control-radius, var(--loro-radius-input));background:var(--loro-input-control-background, var(--loro-surface));box-shadow:var(--loro-input-control-shadow, none);transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}.loro-input--has-icon .loro-input__control{grid-template-columns:auto minmax(0,1fr);gap:var(--loro-input-control-gap, .8rem)}.loro-input--has-icon:has(.loro-input__trailing-button) .loro-input__control{grid-template-columns:auto minmax(0,1fr) auto}.loro-input__control input{font-size:var(--loro-input-field-font-size, 1rem);line-height:var(--loro-input-field-line-height, 1.2)}input{width:100%;border:0;outline:0;background:transparent;color:var(--loro-text-strong);font:inherit;font-weight:var(--loro-input-field-font-weight, 700)}input::placeholder{color:var(--loro-muted);font-weight:var(--loro-input-placeholder-font-weight, 600);opacity:var(--loro-input-placeholder-opacity, 1)}.loro-input__trailing-button{display:grid;width:2.5rem;height:2.5rem;place-items:center;margin-right:-.55rem;border:0;border-radius:50%;color:var(--loro-muted);background:transparent;cursor:pointer;transition:background .15s ease,color .15s ease}.loro-input__trailing-button:hover,.loro-input__trailing-button:focus-visible{color:var(--loro-primary-700);background:color-mix(in srgb,var(--loro-primary-500) 10%,transparent);outline:none}.loro-input--error .loro-input__control{border-color:color-mix(in srgb,var(--loro-danger-text) 28%,var(--loro-border-subtle));background:var(--loro-input-control-background, var(--loro-surface));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-danger-text) 7%,transparent)}.loro-input--error .loro-input--stepper{border-color:color-mix(in srgb,var(--loro-danger-text) 28%,var(--loro-border-subtle));background:var(--loro-surface);box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-danger-text) 7%,transparent)}.loro-input--error .loro-input__label{color:color-mix(in srgb,var(--loro-danger-text) 68%,var(--loro-muted-strong))}.loro-input--success .loro-input__control{border-color:color-mix(in srgb,var(--loro-success, #1f9d55) 34%,var(--loro-border-subtle));background:var(--loro-input-control-background, var(--loro-surface));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-success, #1f9d55) 10%,transparent)}.loro-input--success .loro-input--stepper{border-color:color-mix(in srgb,var(--loro-success, #1f9d55) 34%,var(--loro-border-subtle));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-success, #1f9d55) 10%,transparent)}.loro-input--success .loro-input__label{color:color-mix(in srgb,var(--loro-success, #1f9d55) 72%,var(--loro-muted-strong))}.loro-input--loading .loro-input__control{border-color:color-mix(in srgb,var(--loro-primary-500) 22%,var(--loro-border-subtle));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-primary-500) 8%,transparent)}.loro-input__control:focus-within{border-color:var(--loro-input-control-focus-border-color, var(--loro-primary-500));box-shadow:var(--loro-input-control-focus-shadow, 0 0 0 3px color-mix(in srgb, var(--loro-primary-500) 16%, transparent))}.loro-input__error{display:inline-grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.4rem;color:var(--loro-danger-text);font-size:var(--loro-input-support-font-size, .82rem);font-weight:var(--loro-input-support-font-weight, 750);line-height:var(--loro-input-support-line-height, 1.35)}.loro-input__helper{display:inline-block;color:var(--loro-muted);font-size:var(--loro-input-support-font-size, .82rem);font-weight:var(--loro-input-support-font-weight, 750);line-height:var(--loro-input-support-line-height, 1.35)}.loro-input__success{display:inline-grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.4rem;color:var(--loro-success, #1f9d55);font-size:var(--loro-input-support-font-size, .82rem);font-weight:var(--loro-input-support-font-weight, 750);line-height:var(--loro-input-support-line-height, 1.35)}.loro-input__loading{display:flex;align-items:center;gap:.35rem;color:var(--loro-primary-700);font-size:var(--loro-input-support-font-size, .82rem);font-weight:var(--loro-input-support-font-weight, 750);line-height:var(--loro-input-support-line-height, 1.35)}.loro-input__loader{width:1rem;height:1rem;border:2px solid color-mix(in srgb,var(--loro-primary-500) 18%,transparent);border-top-color:var(--loro-primary-500);border-radius:50%;animation:loro-input-spin .75s linear infinite}.loro-input--stepper{display:grid;grid-template-columns:1.85rem minmax(3.9rem,1fr) 1.85rem;align-items:center;min-width:0;min-height:2.25rem;overflow:hidden;border:1px solid color-mix(in srgb,var(--loro-primary-500) 12%,var(--loro-border-subtle) 88%);border-radius:.65rem;background:var(--loro-surface);color:var(--loro-text-strong);font-weight:900;text-align:center;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--loro-surface) 70%,transparent)}.loro-input--stepper button{height:100%;min-width:0;border:0;background:transparent;color:var(--loro-primary-700);font:inherit;font-weight:950;line-height:1;cursor:pointer;transition:background .15s ease,color .15s ease}.loro-input--stepper button:active{background:color-mix(in srgb,var(--loro-primary-500) 10%,var(--loro-surface) 90%)}.loro-input__stepper-value{display:inline-grid;grid-template-columns:minmax(1.55rem,max-content) auto;align-items:center;justify-content:center;gap:.18rem;min-width:0;overflow:hidden;padding-inline:.1rem;white-space:nowrap}.loro-input--stepper input{width:auto;min-width:1.55rem;max-width:2.75rem;overflow:hidden;padding:0;text-align:right;text-overflow:clip;white-space:nowrap;font-weight:900;font-size:clamp(.85rem,2.4vw,.98rem);letter-spacing:-.02em}.loro-input__stepper-value span{min-width:1.05rem;color:var(--loro-text-strong);font-size:clamp(.8rem,2.2vw,.92rem);font-weight:950;line-height:1}.loro-input--stepper-kg input{min-width:2.1rem;max-width:2.35rem}@media(max-width:1023.88px){.loro-input__control input{font-size:16px}.loro-input--stepper{grid-template-columns:1.65rem minmax(3.65rem,1fr) 1.65rem;min-height:2.2rem}.loro-input__stepper-value{gap:.16rem}}@keyframes loro-input-spin{to{transform:rotate(360deg)}}@keyframes loro-input-dot-blink{0%,20%{opacity:.25}50%{opacity:1}to{opacity:.25}}\n"], dependencies: [{ kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroInput, decorators: [{
-            type: Component,
-            args: [{ selector: 'loro-input', standalone: true, imports: [LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (variant() === 'stepper') {\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;
-const TOUCH_SWIPE_START_PX = 8;
-const SWIPE_REVEAL_PX = 104;
-const SWIPE_MAX_PX = 176;
-const SWIPE_DELETE_EXTRA_PX = 48;
-const REMOVE_ANIMATION_MS = 180;
-class LoroProductRow {
-    variant = input('basket', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
-    meta = input('', ...(ngDevMode ? [{ debugName: "meta" }] : /* istanbul ignore next */ []));
-    imageName = input(null, ...(ngDevMode ? [{ debugName: "imageName" }] : /* istanbul ignore next */ []));
-    quantityLabel = input('', ...(ngDevMode ? [{ debugName: "quantityLabel" }] : /* istanbul ignore next */ []));
-    quantity = input(null, ...(ngDevMode ? [{ debugName: "quantity" }] : /* istanbul ignore next */ []));
-    unit = input('ud', ...(ngDevMode ? [{ debugName: "unit" }] : /* istanbul ignore next */ []));
-    total = input(0, ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
-    checked = input(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
-    divider = input(false, ...(ngDevMode ? [{ debugName: "divider" }] : /* istanbul ignore next */ []));
-    status = input('ok', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
-    prices = input([], ...(ngDevMode ? [{ debugName: "prices" }] : /* istanbul ignore next */ []));
-    checkedChange = output();
-    quantityChange = output();
-    increment = output();
-    decrement = output();
-    rowRemove = output();
-    swipeDragging = signal(false, ...(ngDevMode ? [{ debugName: "swipeDragging" }] : /* istanbul ignore next */ []));
-    swipeArmed = signal(false, ...(ngDevMode ? [{ debugName: "swipeArmed" }] : /* istanbul ignore next */ []));
-    swipeRemoving = signal(false, ...(ngDevMode ? [{ debugName: "swipeRemoving" }] : /* istanbul ignore next */ []));
-    swipeOffsetX = signal(0, ...(ngDevMode ? [{ debugName: "swipeOffsetX" }] : /* istanbul ignore next */ []));
-    touchStartX = 0;
-    touchStartY = 0;
-    touchStartedOnInteractive = false;
-    touchMoved = false;
-    suppressNextClick = false;
-    swipeTransform() {
-        const offset = this.swipeOffsetX();
-        return offset === 0 ? null : `translateX(${offset}px)`;
-    }
-    deleteActionTransform() {
-        if (!this.isSwipeRemovable()) {
-            return null;
-        }
-        const offset = Math.abs(this.swipeOffsetX());
-        const progress = Math.min(offset / SWIPE_REVEAL_PX, 1);
-        const translateX = (1 - progress) * 2.5;
-        return `translateX(${translateX}rem)`;
-    }
-    isSwipeRemovable() {
-        return this.variant() === 'basket' || this.variant() === 'pantry';
-    }
-    quantityValue() {
-        const quantity = this.quantity();
-        if (quantity !== null) {
-            return this.formatQuantity(quantity);
-        }
-        return this.quantityLabel().replace(this.normalizedUnit(), '').trim();
-    }
-    updateQuantity(value) {
-        const parsed = Number(value.replace(',', '.'));
-        if (!Number.isFinite(parsed)) {
-            return;
-        }
-        this.quantityChange.emit(this.normalizedUnit() === 'ud'
-            ? Math.min(100, Math.max(1, Math.round(parsed)))
-            : Math.min(100, Math.max(0.5, parsed)));
-    }
-    onRowTouchStart(event) {
-        if (!this.isSwipeRemovable() || !this.isMobileViewport() || event.touches.length !== 1) {
-            return;
-        }
-        if (this.swipeRemoving()) {
-            return;
-        }
-        const touch = event.touches[0];
-        this.touchStartX = touch.clientX;
-        this.touchStartY = touch.clientY;
-        this.touchMoved = false;
-        this.touchStartedOnInteractive = this.isInteractiveTarget(event.target);
-        this.swipeDragging.set(false);
-    }
-    onRowTouchMove(event) {
-        if (!this.isSwipeRemovable() ||
-            !this.isMobileViewport() ||
-            this.touchStartedOnInteractive ||
-            event.touches.length !== 1) {
-            return;
-        }
-        const touch = event.touches[0];
-        const deltaX = touch.clientX - this.touchStartX;
-        const deltaY = touch.clientY - this.touchStartY;
-        const movedDistance = Math.hypot(deltaX, deltaY);
-        if (movedDistance > TOUCH_TAP_TOLERANCE_PX) {
-            this.touchMoved = true;
-        }
-        if (Math.abs(deltaY) > Math.abs(deltaX) && !this.swipeDragging()) {
-            return;
-        }
-        const nextOffset = this.swipeArmed()
-            ? Math.max(-SWIPE_MAX_PX, Math.min(-SWIPE_REVEAL_PX, -SWIPE_REVEAL_PX + deltaX))
-            : Math.max(deltaX, -SWIPE_MAX_PX);
-        if (nextOffset < -TOUCH_SWIPE_START_PX || (this.swipeArmed() && nextOffset !== -SWIPE_REVEAL_PX)) {
-            this.touchMoved = true;
-            this.swipeDragging.set(true);
-            this.swipeOffsetX.set(nextOffset);
-            event.preventDefault();
-            event.stopPropagation();
-        }
-    }
-    onRowTouchEnd(event) {
-        if (!this.isSwipeRemovable() || !this.isMobileViewport() || this.touchStartedOnInteractive) {
-            this.resetSwipe();
-            return;
-        }
-        const offset = this.swipeOffsetX();
-        if (this.swipeArmed()) {
-            if (offset <= -(SWIPE_REVEAL_PX + SWIPE_DELETE_EXTRA_PX)) {
-                this.triggerRemove(event);
-                return;
-            }
-            if (offset > -(SWIPE_REVEAL_PX - 20)) {
-                this.suppressNextClick = true;
-                event.preventDefault();
-                event.stopPropagation();
-                this.swipeArmed.set(false);
-                this.resetSwipe();
-                return;
-            }
-            this.suppressNextClick = true;
-            event.preventDefault();
-            event.stopPropagation();
-            this.swipeDragging.set(false);
-            this.swipeOffsetX.set(-SWIPE_REVEAL_PX);
-            return;
-        }
-        if (offset <= -SWIPE_REVEAL_PX) {
-            this.suppressNextClick = true;
-            event.preventDefault();
-            event.stopPropagation();
-            this.swipeArmed.set(true);
-            this.swipeDragging.set(false);
-            this.swipeOffsetX.set(-SWIPE_REVEAL_PX);
-            return;
-        }
-        if (this.variant() === 'basket' && !this.touchMoved && !this.isInteractiveTarget(event.target)) {
-            this.suppressNextClick = true;
-            event.preventDefault();
-            event.stopPropagation();
-            this.checkedChange.emit(!this.checked());
-        }
-        else if (this.touchMoved) {
-            this.suppressNextClick = true;
-            event.preventDefault();
-            event.stopPropagation();
-        }
-        this.resetSwipe();
-    }
-    onRowTouchCancel() {
-        this.resetSwipe();
-    }
-    onBasketClick(event) {
-        if (this.variant() !== 'basket') {
-            return;
-        }
-        if (this.isMobileViewport()) {
-            if (this.suppressNextClick || this.swipeArmed() || !this.isInteractiveTarget(event.target)) {
-                event.preventDefault();
-                event.stopPropagation();
-                this.suppressNextClick = false;
-            }
-            return;
-        }
-        if (!this.isInteractiveTarget(event.target)) {
-            event.preventDefault();
-            event.stopPropagation();
-            this.checkedChange.emit(!this.checked());
-        }
-    }
-    formatQuantity(quantity) {
-        if (this.normalizedUnit() === 'ud') {
-            return Math.round(quantity).toString();
-        }
-        return Number(quantity.toFixed(1)).toLocaleString('es-ES', {
-            minimumFractionDigits: Number.isInteger(quantity) ? 0 : 1,
-            maximumFractionDigits: 1
-        });
-    }
-    normalizedUnit() {
-        return this.unit() === 'kg' ? 'kg' : 'ud';
-    }
-    formatCurrency(value) {
-        return value.toLocaleString('es-ES', {
-            minimumFractionDigits: 2,
-            maximumFractionDigits: 2
-        });
-    }
-    resetSwipe() {
-        if (this.swipeRemoving()) {
-            return;
-        }
-        this.swipeDragging.set(false);
-        this.swipeOffsetX.set(this.swipeArmed() ? -SWIPE_REVEAL_PX : 0);
-    }
-    triggerRemove(event) {
-        this.suppressNextClick = true;
-        event?.preventDefault();
-        event?.stopPropagation();
-        this.swipeDragging.set(false);
-        this.swipeArmed.set(false);
-        this.swipeRemoving.set(true);
-        this.swipeOffsetX.set(-SWIPE_MAX_PX);
-        window.setTimeout(() => this.rowRemove.emit(), REMOVE_ANIMATION_MS);
-    }
-    isMobileViewport() {
-        return window.matchMedia('(max-width: 640px)').matches;
-    }
-    isInteractiveTarget(target) {
-        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 });
-}
-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"] }]
-        }], 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 {
-    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-    icon = input('leaf', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-    collapsible = input(true, ...(ngDevMode ? [{ debugName: "collapsible" }] : /* istanbul ignore next */ []));
-    expanded = signal(true, ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
-    toggle() {
-        if (!this.collapsible()) {
-            return;
-        }
-        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\">\n      <header\n        class=\"loro-product-section__header\"\n        [class.loro-product-section__header--collapsible]=\"collapsible()\"\n        [attr.role]=\"collapsible() ? 'button' : null\"\n        [attr.tabindex]=\"collapsible() ? 0 : null\"\n        [attr.aria-expanded]=\"collapsible() ? expanded() : null\"\n        (click)=\"toggle()\"\n        (keydown.enter)=\"toggle()\"\n        (keydown.space)=\"toggle()\">\n        <span class=\"loro-product-section__icon\">\n          <loro-icon [name]=\"icon()\" [size]=\"18\" [alt]=\"title()\" color=\"inverse\" />\n        </span>\n        <h2>{{ title() }}</h2>\n        @if (collapsible()) {\n          <span class=\"loro-product-section__toggle\" aria-hidden=\"true\">\n            <loro-icon\n              [name]=\"expanded() ? 'chevron-up' : 'chevron-down'\"\n              [size]=\"18\"\n              [alt]=\"expanded() ? 'Contraer' : 'Expandir'\"\n              color=\"primary-strong\" />\n          </span>\n        }\n      </header>\n      @if (!collapsible() || expanded()) {\n        <div class=\"loro-product-section__body\">\n          <ng-content />\n        </div>\n      }\n    </section>", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-product-section{display:grid;gap:.7rem}.loro-product-section__header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.8rem;margin-inline:-.35rem;padding:.25rem .35rem;border-radius:.75rem;color:var(--loro-text-strong);transition:background .15s ease,transform .15s ease}.loro-product-section__header--collapsible{cursor:pointer;-webkit-tap-highlight-color:transparent}.loro-product-section__header--collapsible:hover{background:#6c3cff0e}.loro-product-section__header--collapsible:focus-visible{outline:2px solid rgba(108,60,255,.32);outline-offset:2px}.loro-product-section__header--collapsible:active{transform:scale(.995);background:#6c3cff14}.loro-product-section__icon{display:grid;width:2.1rem;height:2.1rem;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--loro-primary-500),var(--loro-primary-700))}h2{margin:0;font-size:1.12rem;font-weight:950;line-height:1.2}.loro-product-section__toggle{display:grid;width:2.25rem;height:2.25rem;place-items:center;border-radius:50%}.loro-product-section__body{overflow:hidden;border:1px solid var(--loro-border-subtle);border-radius:.8rem;background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft)}@media(max-width:640px){.loro-product-section{gap:.25rem}.loro-product-section__header{grid-template-columns:1.2rem minmax(0,1fr) 1.35rem;gap:.35rem;margin-inline:0;padding:.08rem 0}.loro-product-section__icon{width:1.2rem;height:1.2rem}.loro-product-section__icon loro-icon,.loro-product-section__toggle loro-icon{transform:scale(.72)}h2{font-size:.72rem;line-height:1.05}.loro-product-section__toggle{display:grid;width:1.35rem;height:1.35rem;place-items:center;border:1px solid color-mix(in srgb,var(--loro-primary-500) 18%,transparent);background:color-mix(in srgb,var(--loro-primary-500) 6%,transparent)}.loro-product-section__body{border-radius:.58rem}}\n"], dependencies: [{ kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroProductSection, decorators: [{
-            type: Component,
-            args: [{ selector: 'loro-product-section', standalone: true, imports: [LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"loro-product-section\">\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 {
-    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
-    email = input.required(...(ngDevMode ? [{ debugName: "email" }] : /* istanbul ignore next */ []));
-    imageSrc = input(null, ...(ngDevMode ? [{ debugName: "imageSrc" }] : /* istanbul ignore next */ []));
-    changePhotoLabel = input('Cambiar foto', ...(ngDevMode ? [{ debugName: "changePhotoLabel" }] : /* istanbul ignore next */ []));
-    changePhotoLoadingLabel = input('Actualizando...', ...(ngDevMode ? [{ debugName: "changePhotoLoadingLabel" }] : /* istanbul ignore next */ []));
-    changePhotoLoading = input(false, ...(ngDevMode ? [{ debugName: "changePhotoLoading" }] : /* istanbul ignore next */ []));
-    changePhotoDisabled = input(false, ...(ngDevMode ? [{ debugName: "changePhotoDisabled" }] : /* istanbul ignore next */ []));
-    changePhotoClick = output();
-    imageFailed = signal(false, ...(ngDevMode ? [{ debugName: "imageFailed" }] : /* istanbul ignore next */ []));
-    constructor() {
-        effect(() => {
-            this.imageSrc();
-            this.imageFailed.set(false);
-        });
-    }
-    resolvedImageSrc() {
-        return this.imageFailed() ? null : this.imageSrc();
-    }
-    onImageError() {
-        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\">\n      <div class=\"loro-profile-card__avatar\">\n        @if (resolvedImageSrc()) {\n          <img [src]=\"resolvedImageSrc()!\" [alt]=\"name()\" (error)=\"onImageError()\" />\n        } @else {\n          <loro-icon name=\"user\" [size]=\"72\" [alt]=\"name()\" color=\"primary\" />\n        }\n      </div>\n      <div class=\"loro-profile-card__copy\">\n        <h2>{{ name() }}</h2>\n        <p>{{ email() }}</p>\n        <loro-button\n          [label]=\"changePhotoLoading() ? changePhotoLoadingLabel() : changePhotoLabel()\"\n          icon=\"camera\"\n          variant=\"outline\"\n          [disabled]=\"changePhotoDisabled() || changePhotoLoading()\"\n          [loading]=\"changePhotoLoading()\"\n          (buttonClick)=\"changePhotoClick.emit()\" />\n      </div>\n    </section>", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-profile-card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:1.5rem;padding:clamp(1.25rem,3vw,2rem);border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-card);background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft)}.loro-profile-card__avatar{display:grid;width:clamp(7rem,16vw,9.5rem);aspect-ratio:1;place-items:center;overflow:hidden;border-radius:50%;background:linear-gradient(180deg,#6c3cff24,#6c3cff0a)}img{width:100%;height:100%;object-fit:cover}h2,p{margin:0}h2{color:var(--loro-text-strong);font-size:clamp(2rem,4vw,2.7rem);font-weight:900;line-height:1}p{margin:.4rem 0 1rem;color:var(--loro-muted);font-size:1.05rem;font-weight:650}@media(max-width:520px){.loro-profile-card{grid-template-columns:max-content minmax(0,1fr);gap:1rem}}\n"], dependencies: [{ kind: "component", type: LoroButton, selector: "loro-button", inputs: ["label", "text", "icon", "iconContent", "iconMode", "iconSize", "iconButtonSize", "iconColor", "socialMobileCompact", "selected", "variant", "typeButton", "color", "size", "fullWidth", "buttonWidth", "disabled", "loading", "type", "formId", "ariaLabel", "ariaDescription"], outputs: ["buttonClick", "change", "sanChange"] }, { kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroProfileCard, decorators: [{
-            type: Component,
-            args: [{ selector: 'loro-profile-card', standalone: true, imports: [LoroButton, LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"loro-profile-card\">\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 {
-    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    firstName = input('Patricia', ...(ngDevMode ? [{ debugName: "firstName" }] : /* istanbul ignore next */ []));
-    eyebrow = input('Mi perfil', ...(ngDevMode ? [{ debugName: "eyebrow" }] : /* istanbul ignore next */ []));
-    greeting = input('¡Qué bien verte por aquí!', ...(ngDevMode ? [{ debugName: "greeting" }] : /* istanbul ignore next */ []));
-    profileImageSrc = input(null, ...(ngDevMode ? [{ debugName: "profileImageSrc" }] : /* istanbul ignore next */ []));
-    profileImageAlt = input('Imagen de perfil', ...(ngDevMode ? [{ debugName: "profileImageAlt" }] : /* istanbul ignore next */ []));
-    avatarIconName = input('user', ...(ngDevMode ? [{ debugName: "avatarIconName" }] : /* istanbul ignore next */ []));
-    avatarIconSize = input(24, ...(ngDevMode ? [{ debugName: "avatarIconSize" }] : /* istanbul ignore next */ []));
-    avatarAlt = input('Perfil', ...(ngDevMode ? [{ debugName: "avatarAlt" }] : /* istanbul ignore next */ []));
-    avatarSize = input('2.75rem', ...(ngDevMode ? [{ debugName: "avatarSize" }] : /* istanbul ignore next */ []));
-    avatarRadius = input('0.625rem', ...(ngDevMode ? [{ debugName: "avatarRadius" }] : /* istanbul ignore next */ []));
-    parrotImageName = input('profile', ...(ngDevMode ? [{ debugName: "parrotImageName" }] : /* istanbul ignore next */ []));
-    parrotImageAlt = input('Mascota de perfil AlLoro', ...(ngDevMode ? [{ debugName: "parrotImageAlt" }] : /* istanbul ignore next */ []));
-    parrotMobileWidth = input('34%', ...(ngDevMode ? [{ debugName: "parrotMobileWidth" }] : /* istanbul ignore next */ []));
-    parrotWebWidth = input('34%', ...(ngDevMode ? [{ debugName: "parrotWebWidth" }] : /* istanbul ignore next */ []));
-    eyebrowFontSize = input('clamp(0.75rem, 2.8cqi, 0.95rem)', ...(ngDevMode ? [{ debugName: "eyebrowFontSize" }] : /* istanbul ignore next */ []));
-    titleFontSize = input('clamp(1.5rem, 6.4cqi, 2.45rem)', ...(ngDevMode ? [{ debugName: "titleFontSize" }] : /* istanbul ignore next */ []));
-    greetingFontSize = input('clamp(0.8rem, 3.2cqi, 1.05rem)', ...(ngDevMode ? [{ debugName: "greetingFontSize" }] : /* istanbul ignore next */ []));
-    elevated = input(true, ...(ngDevMode ? [{ debugName: "elevated" }] : /* istanbul ignore next */ []));
-    avatarIconCssSize() {
-        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 });
-}
-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: {
-                        '[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()'
-                    }, 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"] }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], firstName: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstName", required: false }] }], eyebrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "eyebrow", required: false }] }], greeting: [{ type: i0.Input, args: [{ isSignal: true, alias: "greeting", required: false }] }], profileImageSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileImageSrc", required: false }] }], profileImageAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileImageAlt", required: false }] }], avatarIconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarIconName", required: false }] }], avatarIconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarIconSize", required: false }] }], avatarAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarAlt", required: false }] }], avatarSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarSize", required: false }] }], avatarRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarRadius", required: false }] }], parrotImageName: [{ type: i0.Input, args: [{ isSignal: true, alias: "parrotImageName", required: false }] }], parrotImageAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "parrotImageAlt", required: false }] }], parrotMobileWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "parrotMobileWidth", required: false }] }], parrotWebWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "parrotWebWidth", required: false }] }], eyebrowFontSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "eyebrowFontSize", required: false }] }], titleFontSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleFontSize", required: false }] }], greetingFontSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "greetingFontSize", required: false }] }], elevated: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevated", required: false }] }] } });
-
-class LoroStatCard {
-    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-    value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
-    eyebrow = input('', ...(ngDevMode ? [{ debugName: "eyebrow" }] : /* istanbul ignore next */ []));
-    icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-    iconSize = input(30, ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
-    image = input(null, ...(ngDevMode ? [{ debugName: "image" }] : /* istanbul ignore next */ []));
-    topImage = input(null, ...(ngDevMode ? [{ debugName: "topImage" }] : /* istanbul ignore next */ []));
-    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') {\n      <loro-image class=\"loro-stat-card__top-image\" [name]=\"topImage() || 'loro-despensa'\" [alt]=\"title()\" width=\"6rem\" />\n    }\n    <article class=\"loro-stat-card\" [class]=\"'loro-stat-card loro-stat-card--' + variant()\">\n      @if (icon()) {\n        <span class=\"loro-stat-card__icon\">\n          <loro-icon [name]=\"icon()!\" [size]=\"iconSize()\" [alt]=\"title()\" [color]=\"variant() === 'danger' ? 'danger' : 'primary'\" />\n        </span>\n      }\n      <div class=\"loro-stat-card__copy\">\n        @if (eyebrow() || variant() === 'image-corner') {\n          <p class=\"loro-stat-card__eyebrow\">{{ eyebrow() || title() }}</p>\n          <h2>{{ value() || title() }}</h2>\n        }\n\n        @if (value() && variant() !== 'image-corner') {\n          <p class=\"loro-stat-card__title\">{{ title() }}</p>\n        }\n        @if (description()) {\n          <p class=\"loro-stat-card__description\">{{ description() }}</p>\n        }\n      </div>\n      @if (variant() === 'card-basket') {\n        <div class=\"shopping-summary-card__total\">\n          <small>Total estimado</small>\n          <strong>{{ total().toLocaleString('es-ES', { minimumFractionDigits: 2 }) }} \u20AC</strong>\n        </div>\n      }\n      @if (image()) {\n        <loro-image class=\"loro-stat-card__image\" [name]=\"image()!\" [alt]=\"title()\" width=\"5.8rem\" />\n      }\n    </article>", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-stat-card__top-image{display:flex;justify-content:center;pointer-events:none}.loro-stat-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;min-height:6.8rem;padding:1.1rem 1.25rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-card);background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft);color:var(--loro-text);isolation:isolate}.loro-stat-card--tinted{background:var(--loro-surface-tinted)}.loro-stat-card--danger{background:#dc26260f}.loro-stat-card--compare-summary{grid-template-columns:3.85rem minmax(0,1fr);gap:.95rem;min-height:6rem;padding:.95rem 1.1rem;border-radius:1.35rem;background:var(--loro-surface)}.loro-stat-card--compare-inline{grid-template-columns:2.5rem minmax(0,1fr);gap:.65rem;min-height:3.7rem;padding:.7rem .9rem;border-radius:1rem;background:var(--loro-surface);box-shadow:none}.loro-stat-card--image-corner{grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.85rem;min-height:11.5rem;padding:1.2rem 6.9rem 1.2rem 1.2rem;border-radius:1.35rem;background:color-mix(in srgb,var(--loro-primary-500) 4%,var(--loro-surface))}.loro-stat-card__icon{position:relative;z-index:1;display:grid;width:3.7rem;height:3.7rem;place-items:center;border-radius:1rem;background:var(--loro-brand-tint-surface)}.loro-stat-card--danger .loro-stat-card__icon{background:#dc262617}.loro-stat-card--compare-summary .loro-stat-card__icon{width:3.55rem;height:3.55rem;border-radius:1rem}.loro-stat-card--compare-inline .loro-stat-card__icon{width:2.5rem;height:2.5rem;border-radius:.85rem}.loro-stat-card--image-corner .loro-stat-card__icon{width:3rem;height:3rem;border-radius:50%}.loro-stat-card__copy{position:relative;z-index:1;display:grid;align-content:center;min-width:0}h2,p{margin:0}h2{color:var(--loro-text-strong);font-size:clamp(1.45rem,4vw,2.15rem);font-weight:950;line-height:1.05;overflow-wrap:anywhere}.loro-stat-card__title{color:var(--loro-text-strong);font-size:1rem;font-weight:900}.loro-stat-card--compare-summary h2{font-size:clamp(1.25rem,4.8vw,1.75rem);line-height:.98}.loro-stat-card--compare-summary .loro-stat-card__title{font-size:clamp(.95rem,3.6vw,1.1rem);line-height:1.05}.loro-stat-card--compare-inline h2{font-size:clamp(.95rem,1.7vw,1.15rem);line-height:1}.loro-stat-card--compare-inline .loro-stat-card__title{color:var(--loro-muted-strong);font-size:.78rem;font-weight:850;line-height:1.05}.loro-stat-card--image-corner h2{font-size:clamp(1.45rem,3vw,2.1rem);line-height:1.02}.loro-stat-card--image-corner .loro-stat-card__title,.loro-stat-card--image-corner .loro-stat-card__eyebrow{color:var(--loro-text-strong);font-size:1.05rem;font-weight:900;line-height:1.12}.loro-stat-card__description,.loro-stat-card__eyebrow{margin-top:.35rem;color:var(--loro-muted);font-weight:700;line-height:1.35}.loro-stat-card__image{align-self:end}.loro-stat-card--image-corner .loro-stat-card__copy{align-content:start;gap:.5rem}.loro-stat-card--image-corner .loro-stat-card__eyebrow{margin-top:.15rem}.loro-stat-card--image-corner .loro-stat-card__description{margin-top:0;white-space:pre-line;max-width:18ch}.loro-stat-card--image-corner .loro-stat-card__image{position:absolute;top:1.55rem;right:1.2rem;align-self:start;width:4.95rem;pointer-events:none}.shopping-summary-card__total{display:grid;justify-items:end;color:var(--loro-muted);font-weight:750}.shopping-summary-card__total strong{color:var(--loro-primary-700);font-size:2rem;font-weight:950}@media(max-width:640px){.loro-stat-card{gap:.8rem;min-height:5.5rem;padding:.9rem 1rem}.loro-stat-card__icon{width:3rem;height:3rem;border-radius:.85rem}h2{font-size:clamp(1.2rem,5vw,1.55rem);line-height:1}.loro-stat-card__title{font-size:clamp(.84rem,3vw,.95rem);line-height:1.15}.loro-stat-card--compare-summary{grid-template-columns:3.1rem minmax(0,1fr);gap:.75rem;min-height:5.35rem;padding:.8rem .9rem;border-radius:1.2rem}.loro-stat-card--compare-summary .loro-stat-card__icon{width:3rem;height:3rem}.loro-stat-card--compare-summary h2{font-size:clamp(1.1rem,5vw,1.45rem)}.loro-stat-card--compare-summary .loro-stat-card__title{font-size:clamp(.88rem,3.4vw,1rem)}.loro-stat-card--compare-inline{grid-template-columns:2.2rem minmax(0,1fr);gap:.55rem;min-height:3.3rem;padding:.55rem .75rem}.loro-stat-card--compare-inline .loro-stat-card__icon{width:2.2rem;height:2.2rem;border-radius:.75rem}.loro-stat-card--compare-inline h2{font-size:1rem}.loro-stat-card--compare-inline .loro-stat-card__title{font-size:.74rem}.loro-stat-card--image-corner{min-height:8.25rem;gap:.65rem;padding:.95rem 4.6rem .95rem .95rem;border-radius:1.15rem}.loro-stat-card--image-corner .loro-stat-card__icon{width:2.45rem;height:2.45rem}.loro-stat-card--image-corner h2{font-size:clamp(1.05rem,4.8vw,1.65rem);line-height:1}.loro-stat-card--image-corner .loro-stat-card__title,.loro-stat-card--image-corner .loro-stat-card__eyebrow{font-size:.88rem;line-height:1.05}.loro-stat-card--image-corner .loro-stat-card__description{font-size:.78rem;line-height:1.16;max-width:16ch}.loro-stat-card--image-corner .loro-stat-card__image{top:1.15rem;right:.9rem;width:3.55rem}}\n"], dependencies: [{ kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }, { kind: "component", type: LoroImage, selector: "loro-image", inputs: ["name", "alt", "size", "width", "height", "fit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroStatCard, decorators: [{
-            type: Component,
-            args: [{ selector: 'loro-stat-card', standalone: true, imports: [LoroIcon, LoroImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (variant() === 'image-corner' || variant() === 'card-basket') {\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 {
-    rank = input.required(...(ngDevMode ? [{ debugName: "rank" }] : /* istanbul ignore next */ []));
-    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
-    price = input.required(...(ngDevMode ? [{ debugName: "price" }] : /* istanbul ignore next */ []));
-    delta = input(0, ...(ngDevMode ? [{ debugName: "delta" }] : /* istanbul ignore next */ []));
-    logoName = input(null, ...(ngDevMode ? [{ debugName: "logoName" }] : /* istanbul ignore next */ []));
-    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\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\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 {
-    totalLabel = input('Total estimado', ...(ngDevMode ? [{ debugName: "totalLabel" }] : /* istanbul ignore next */ []));
-    total = input.required(...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
-    primaryLabel = input('Ya lo he comprado', ...(ngDevMode ? [{ debugName: "primaryLabel" }] : /* istanbul ignore next */ []));
-    secondaryLabel = input('Comparar precios', ...(ngDevMode ? [{ debugName: "secondaryLabel" }] : /* istanbul ignore next */ []));
-    helper = input('Los productos marcados se anadiran a tu despensa.', ...(ngDevMode ? [{ debugName: "helper" }] : /* istanbul ignore next */ []));
-    leftImage = input('loro-buy', ...(ngDevMode ? [{ debugName: "leftImage" }] : /* istanbul ignore next */ []));
-    rightImage = input('pantry-cabinet', ...(ngDevMode ? [{ debugName: "rightImage" }] : /* istanbul ignore next */ []));
-    primaryDisabled = input(false, ...(ngDevMode ? [{ debugName: "primaryDisabled" }] : /* istanbul ignore next */ []));
-    secondaryDisabled = input(false, ...(ngDevMode ? [{ debugName: "secondaryDisabled" }] : /* istanbul ignore next */ []));
-    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\">\n      <div class=\"loro-summary-bar__total\">\n        <small>{{ totalLabel() }}</small>\n        <strong>{{ total().toLocaleString('es-ES', { minimumFractionDigits: 2 }) }} \u20AC</strong>\n        @if (secondaryLabel()) {\n          <loro-button\n            [label]=\"secondaryLabel()\"\n            icon=\"tag\"\n            [iconSize]=\"20\"\n            variant=\"outline\"\n            [disabled]=\"secondaryDisabled()\"\n            (buttonClick)=\"secondaryAction.emit()\" />\n        }\n      </div>\n      <div class=\"loro-summary-bar__flow\" aria-hidden=\"true\">\n        <loro-image [name]=\"leftImage()\" alt=\"\" width=\"5.9rem\" />\n        <loro-icon name=\"arrow-right\" [size]=\"34\" alt=\"\" color=\"primary\" />\n        <loro-image [name]=\"rightImage()\" alt=\"\" width=\"5.25rem\" />\n      </div>\n      <div class=\"loro-summary-bar__action\">\n        <loro-button\n          [label]=\"primaryLabel()\"\n          icon=\"check\"\n          [iconSize]=\"21\"\n          [fullWidth]=\"true\"\n          [disabled]=\"primaryDisabled()\"\n          (buttonClick)=\"primaryAction.emit()\" />\n        @if (helper()) {\n          <small>{{ helper() }}</small>\n        }\n      </div>\n    </aside>", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-summary-bar{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:1.45rem;width:100%;min-width:0;min-height:6.75rem;padding:.75rem 1.9rem;box-sizing:border-box;border:1px solid var(--loro-border-subtle);border-radius:1rem;background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-panel)}.loro-summary-bar__total{display:grid;grid-template-columns:minmax(7rem,auto) minmax(9.5rem,auto);align-items:end;justify-content:start;gap:.25rem 1.6rem;min-width:0}.loro-summary-bar__total loro-button{grid-row:1/span 2;grid-column:2;align-self:center;--loro-summary-button-min-height: 2.9rem;--loro-summary-button-padding: .65rem 1rem;--loro-summary-button-font-size: 1rem}.loro-summary-bar__action{display:grid;justify-items:stretch;gap:.45rem;min-width:0;max-width:100%;overflow:hidden}small{color:var(--loro-muted);font-size:.92rem;font-weight:750;line-height:1.3}strong{color:var(--loro-primary-700);font-size:2.15rem;font-weight:950;line-height:1;white-space:nowrap}.loro-summary-bar__flow{display:inline-grid;grid-template-columns:auto auto auto;align-items:center;justify-content:center;gap:clamp(.55rem,1vw,1rem);min-width:0;padding-inline:clamp(.75rem,1.8vw,2.1rem);border-left:1px solid var(--loro-border-subtle);color:var(--loro-primary-700);font-size:2rem;font-weight:900}.loro-summary-bar__action loro-button{min-width:0;--loro-summary-button-min-height: 2.65rem;--loro-summary-button-padding: .62rem 1rem;--loro-summary-button-font-size: 1rem}.loro-summary-bar loro-button{--loro-button-min-height: var(--loro-summary-button-min-height);--loro-button-padding: var(--loro-summary-button-padding);--loro-button-radius: .55rem;--loro-button-font-size: var(--loro-summary-button-font-size)}:host ::ng-deep .loro-summary-bar loro-button .loro-button{max-width:100%;min-width:0}:host ::ng-deep .loro-summary-bar loro-button .loro-button span{min-width:0;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .loro-summary-bar__action loro-button,:host ::ng-deep .loro-summary-bar__action loro-button .loro-button{width:100%}.loro-summary-bar__action small{min-width:0;max-width:100%;overflow-wrap:anywhere;text-align:center}@media(max-width:1023.88px){.loro-summary-bar{grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);grid-template-areas:\"total flow\" \"total action\";align-items:center;gap:.55rem .8rem;min-height:0;padding:.85rem .95rem;border-radius:1.15rem}.loro-summary-bar__total{grid-area:total;grid-template-columns:1fr;align-content:center;justify-items:start;gap:.36rem;min-width:0;height:100%;padding-right:.65rem;border-right:1px solid var(--loro-border-subtle)}.loro-summary-bar__total loro-button{grid-row:auto;grid-column:auto;width:100%;max-width:9.6rem;--loro-summary-button-min-height: 2.2rem;--loro-summary-button-padding: .48rem .6rem;--loro-summary-button-font-size: .82rem}.loro-summary-bar__flow{grid-area:flow;display:inline-grid;justify-self:center;width:100%;max-width:10.75rem;gap:.32rem;padding-inline:0;border-left:0}.loro-summary-bar__flow loro-image:first-child{width:4.35rem}.loro-summary-bar__flow loro-image:last-child{width:3.85rem}.loro-summary-bar__action{grid-area:action;justify-items:stretch;gap:.28rem;min-width:0;width:100%}.loro-summary-bar__action loro-button{display:block;width:100%;min-width:0;--loro-summary-button-min-height: 2.35rem;--loro-summary-button-padding: .5rem .55rem;--loro-summary-button-font-size: .82rem}small{font-size:.82rem}strong{font-size:clamp(1.45rem,5.6vw,1.9rem)}}@media(max-width:640px){.loro-summary-bar{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:.48rem .62rem;padding:.78rem .82rem}.loro-summary-bar__total loro-button{max-width:8.9rem;--loro-summary-button-min-height: 2.1rem;--loro-summary-button-padding: .44rem .52rem;--loro-summary-button-font-size: .74rem}.loro-summary-bar__flow loro-image:first-child{width:3.45rem}.loro-summary-bar__flow loro-image:last-child{width:3.2rem}.loro-summary-bar__flow{max-width:8.45rem;gap:.2rem}.loro-summary-bar__flow loro-icon{transform:scale(.78)}.loro-summary-bar__action loro-button{--loro-summary-button-min-height: 2.2rem;--loro-summary-button-padding: .48rem .44rem;--loro-summary-button-font-size: .74rem}small{font-size:.72rem}strong{font-size:clamp(1.28rem,7vw,1.6rem)}}@media(max-width:430px){.loro-summary-bar{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);padding:.72rem}.loro-summary-bar__total{padding-right:.5rem}.loro-summary-bar__total loro-button{max-width:7.8rem;--loro-summary-button-font-size: .68rem}.loro-summary-bar__action loro-button{--loro-summary-button-font-size: .68rem}.loro-summary-bar__flow{max-width:7.6rem}.loro-summary-bar__flow loro-image:first-child{width:3rem}.loro-summary-bar__flow loro-image:last-child{width:2.85rem}}\n"], dependencies: [{ kind: "component", type: LoroButton, selector: "loro-button", inputs: ["label", "text", "icon", "iconContent", "iconMode", "iconSize", "iconButtonSize", "iconColor", "socialMobileCompact", "selected", "variant", "typeButton", "color", "size", "fullWidth", "buttonWidth", "disabled", "loading", "type", "formId", "ariaLabel", "ariaDescription"], outputs: ["buttonClick", "change", "sanChange"] }, { kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }, { kind: "component", type: LoroImage, selector: "loro-image", inputs: ["name", "alt", "size", "width", "height", "fit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroSummaryBar, decorators: [{
-            type: Component,
-            args: [{ selector: 'loro-summary-bar', standalone: true, imports: [LoroButton, LoroIcon, LoroImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "<aside class=\"loro-summary-bar\">\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 {
-    options = input.required(...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
-    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    align = input('flex', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
-    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\n      class=\"loro-tab\"\n      role=\"tablist\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      [class.loro-tab--block]=\"align() === 'block'\"\n    >\n      @for (option of options(); track option.value) {\n        <button\n          type=\"button\"\n          role=\"tab\"\n          class=\"loro-tab__button\"\n          [class.loro-tab__button--active]=\"value() === option.value\"\n          [attr.aria-selected]=\"value() === option.value\"\n          [attr.aria-label]=\"option.ariaLabel || option.label\"\n          (click)=\"change.emit(option.value)\"\n        >\n          @if (option.icon) {\n            <loro-icon\n              [name]=\"option.icon\"\n              [size]=\"iconSize()\"\n              [alt]=\"option.label\"\n              [decorative]=\"true\"\n              [color]=\"value() === option.value ? 'primary' : 'muted'\"\n            />\n          }\n          <span>{{ option.label }}</span>\n        </button>\n      }\n    </div>", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-tab{display:grid;grid-template-columns:repeat(var(--loro-tab-count, 2),minmax(0,1fr));min-height:var(--loro-tab-min-height, 2.8rem);overflow:hidden;border-bottom:1px solid var(--loro-border-subtle);background:transparent}.loro-tab__button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-width:0;min-height:100%;padding:var(--loro-tab-button-padding, .58rem .95rem .72rem);border:0;border-bottom:2px solid transparent;color:var(--loro-muted-strong);font:inherit;font-size:var(--loro-tab-font-size, .95rem);font-weight:900;line-height:var(--loro-tab-line-height, 1.15);background:transparent;cursor:pointer;transition:color .14s ease,border-color .14s ease,background .14s ease}.loro-tab--block .loro-tab__button{flex-direction:column;gap:.35rem}.loro-tab__button--active{border-bottom-color:var(--loro-primary-500);color:var(--loro-primary-500)}.loro-tab__button:hover{background:color-mix(in srgb,var(--loro-primary-500) 4%,transparent)}.loro-tab__button:focus-visible{outline:3px solid color-mix(in srgb,var(--loro-primary-500) 28%,transparent);outline-offset:-2px;border-radius:.35rem}\n"], dependencies: [{ kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroTab, decorators: [{
-            type: Component,
-            args: [{ selector: 'loro-tab', standalone: true, imports: [LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[style.--loro-tab-count]': 'options().length',
-                    }, 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 {
-    /** Visible heading. Keep it short and specific. */
-    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-    /** Plain text body for common inline alerts. Rich content can still be projected. */
-    message = input('', ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
-    /** Semantic visual treatment. Meaning must never depend on colour alone. */
-    variant = input('info', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    /** Controls live-region behaviour for dynamically inserted messages. */
-    announcement = input('auto', ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
-    /** Allows programmatic focus without adding the alert to the Tab order. */
-    focusable = input(false, ...(ngDevMode ? [{ debugName: "focusable" }] : /* istanbul ignore next */ []));
-    /** Shows the built-in action button when a label is supplied. */
-    actionLabel = input('', ...(ngDevMode ? [{ debugName: "actionLabel" }] : /* istanbul ignore next */ []));
-    /** Shows a close button and emits dismissed when activated. */
-    dismissible = input(false, ...(ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []));
-    /** Accessible name for the icon-only close button. */
-    dismissLabel = input('Cerrar aviso', ...(ngDevMode ? [{ debugName: "dismissLabel" }] : /* istanbul ignore next */ []));
-    /** Emitted by the built-in action button. */
-    action = output();
-    /** Emitted by the close button. The parent decides whether to remove the alert. */
-    dismissed = output();
-    resolvedIcon = computed(() => {
-        switch (this.variant()) {
-            case 'success':
-                return 'tick-circle';
-            case 'warning':
-            case 'error':
-                return 'shield-alert';
-            case 'neutral':
-            case 'info':
-            default:
-                return 'info';
-        }
-    }, ...(ngDevMode ? [{ debugName: "resolvedIcon" }] : /* istanbul ignore next */ []));
-    resolvedIconColor = computed(() => this.variant() === 'error' ? 'danger' : 'currentColor', ...(ngDevMode ? [{ debugName: "resolvedIconColor" }] : /* istanbul ignore next */ []));
-    role = computed(() => {
-        const announcement = this.resolvedAnnouncement();
-        if (announcement === 'off') {
-            return null;
-        }
-        return announcement === 'assertive'
-            ? 'alert'
-            : 'status';
-    }, ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
-    ariaLive = computed(() => {
-        const announcement = this.resolvedAnnouncement();
-        return announcement === 'off'
-            ? null
-            : announcement;
-    }, ...(ngDevMode ? [{ debugName: "ariaLive" }] : /* istanbul ignore next */ []));
-    resolvedAnnouncement = computed(() => {
-        const announcement = this.announcement();
-        if (announcement !== 'auto') {
-            return announcement;
-        }
-        return this.variant() === 'error'
-            ? 'assertive'
-            : '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 });
-}
-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: {
-                        '[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()',
-                    }, 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"] }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], announcement: [{ type: i0.Input, args: [{ isSignal: true, alias: "announcement", required: false }] }], focusable: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusable", required: false }] }], actionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLabel", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], dismissLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissLabel", required: false }] }], action: [{ type: i0.Output, args: ["action"] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }] } });
-
-class LoroNotification {
-    count = input(0, ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
-    maxCount = input(9, ...(ngDevMode ? [{ debugName: "maxCount" }] : /* istanbul ignore next */ []));
-    showZero = input(false, ...(ngDevMode ? [{ debugName: "showZero" }] : /* istanbul ignore next */ []));
-    active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
-    expanded = input(null, ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    ariaLabel = input('Notifications', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    iconSize = input(25, ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
-    notificationClick = output();
-    showBadge = computed(() => this.count() > 0 || this.showZero(), ...(ngDevMode ? [{ debugName: "showBadge" }] : /* istanbul ignore next */ []));
-    badgeLabel = computed(() => {
-        const count = Math.max(0, this.count());
-        const maxCount = Math.max(1, this.maxCount());
-        return count > maxCount ? `${maxCount}+` : count.toString();
-    }, ...(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\n      type=\"button\"\n      class=\"loro-notification\"\n      [class.loro-notification--active]=\"active()\"\n      [class.loro-notification--disabled]=\"disabled()\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-expanded]=\"expanded()\"\n      (click)=\"notificationClick.emit()\">\n      <loro-icon name=\"bell\" [size]=\"iconSize()\" alt=\"\" [decorative]=\"true\" color=\"primary\" />\n      @if (showBadge()) {\n        <span class=\"loro-notification__badge\" [attr.aria-label]=\"badgeAriaLabel()\">\n          {{ badgeLabel() }}\n        </span>\n      }\n    </button>", styles: [":host{display:inline-flex;font-family:var(--loro-font-brand)}.loro-notification{position:relative;display:grid;width:var(--loro-notification-size, 2.75rem);height:var(--loro-notification-size, 2.75rem);place-items:center;border:0;border-radius:50%;background:transparent;color:var(--loro-primary-700);cursor:pointer;transition:background .15s ease,transform .15s ease;-webkit-tap-highlight-color:transparent}.loro-notification:hover,.loro-notification--active{background:transparent}.loro-notification:focus-visible{outline:2px solid rgba(108,60,255,.35);outline-offset:2px}.loro-notification:active{transform:scale(.97)}.loro-notification--disabled{cursor:not-allowed;opacity:.55;transform:none}.loro-notification__badge{position:absolute;top:.18rem;right:.1rem;display:grid;min-width:1.15rem;height:1.15rem;place-items:center;padding-inline:.25rem;border:2px solid var(--loro-surface);border-radius:999px;background:var(--loro-primary-500);color:#fff;font-size:.68rem;font-weight:950;line-height:1;box-sizing:border-box}\n"], dependencies: [{ kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroNotification, decorators: [{
-            type: Component,
-            args: [{ selector: 'loro-notification', standalone: true, imports: [LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\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"] }] } });
+            args: [{ selector: 'loro-notification', standalone: true, imports: [LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n      type=\"button\"\n      class=\"loro-notification\"\n      [class.loro-notification--active]=\"active()\"\n      [class.loro-notification--disabled]=\"disabled()\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-expanded]=\"expanded()\"\n      (click)=\"notificationClick.emit()\">\n      <loro-icon name=\"bell\" [size]=\"iconSize()\" alt=\"\" [decorative]=\"true\" color=\"primary\" />\n      @if (showBadge()) {\n        <span class=\"loro-notification__badge\" [attr.aria-label]=\"badgeAriaLabel()\">\n          {{ badgeLabel() }}\n        </span>\n      }\n    </button>", styles: [":host{display:inline-flex;font-family:var(--loro-font-brand)}.loro-notification{position:relative;display:grid;width:var(--loro-notification-size, 2.75rem);height:var(--loro-notification-size, 2.75rem);place-items:center;border:0;border-radius:50%;background:transparent;color:var(--loro-primary-700);cursor:pointer;transition:background .15s ease,transform .15s ease;-webkit-tap-highlight-color:transparent}.loro-notification:hover,.loro-notification--active{background:transparent}.loro-notification:focus-visible{outline:2px solid rgba(108,60,255,.35);outline-offset:2px}.loro-notification:active{transform:scale(.97)}.loro-notification--disabled{cursor:not-allowed;opacity:.55;transform:none}.loro-notification__badge{position:absolute;top:.18rem;right:.1rem;display:grid;min-width:1.15rem;height:1.15rem;place-items:center;padding-inline:.25rem;border:2px solid var(--loro-surface);border-radius:999px;background:var(--loro-primary-500);color:#fff;font-size:.68rem;font-weight:950;line-height:1;box-sizing:border-box}\n"] }]
+        }], propDecorators: { count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], maxCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxCount", required: false }] }], showZero: [{ type: i0.Input, args: [{ isSignal: true, alias: "showZero", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], notificationClick: [{ type: i0.Output, args: ["notificationClick"] }] } });
 
 class LoroNotificationRow {
     title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
@@ -2475,11 +1705,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\n      class=\"loro-notification-row-shell\"\n      data-horizontal-gesture\n      [class.loro-notification-row-shell--dragging]=\"dragging()\"\n      [class.loro-notification-row-shell--armed]=\"armed()\"\n      [class.loro-notification-row-shell--removing]=\"removing()\"\n      (touchstart)=\"onTouchStart($event)\"\n      (touchmove)=\"onTouchMove($event)\"\n      (touchend)=\"onTouchEnd()\"\n      (touchcancel)=\"resetDrag()\">\n      <button\n        type=\"button\"\n        class=\"loro-notification-row-shell__delete\"\n        aria-label=\"Eliminar notificacion\"\n        (pointerdown)=\"$event.stopPropagation()\"\n        (touchstart)=\"$event.stopPropagation()\"\n        (click)=\"onDeleteClick($event)\">\n        <loro-icon name=\"trash-white\" [size]=\"22\" alt=\"\" [decorative]=\"true\" color=\"inverse\" />\n        <span>Eliminar</span>\n      </button>\n      <article\n        role=\"button\"\n        tabindex=\"0\"\n        class=\"loro-notification-row\"\n        [class.loro-notification-row--unread]=\"unread()\"\n        [style.transform]=\"'translate3d(' + dragX() + 'px, 0, 0)'\"\n        (click)=\"onRowClick()\"\n        (keydown.enter)=\"onRowKeydown($event)\"\n        (keydown.space)=\"onRowKeydown($event)\">\n        <span class=\"loro-notification-row__icon\">\n          <loro-icon [name]=\"icon()\" [size]=\"26\" [alt]=\"title()\" color=\"primary\" />\n        </span>\n        <span class=\"loro-notification-row__content\">\n          <span class=\"loro-notification-row__meta\">\n            <strong>{{ title() }}</strong>\n            @if (time()) {\n              <small>{{ time() }}</small>\n            }\n          </span>\n          <span class=\"loro-notification-row__message\">{{ message() }}</span>\n        </span>\n        @if (unread()) {\n          <span class=\"loro-notification-row__dot\" aria-label=\"Unread\"></span>\n        }\n        <button\n          type=\"button\"\n          class=\"loro-notification-row__delete-button\"\n          aria-label=\"Eliminar notificacion\"\n          (click)=\"onDeleteClick($event)\">\n          <loro-icon name=\"trash\" [size]=\"18\" alt=\"\" [decorative]=\"true\" color=\"danger\" />\n        </button>\n      </article>\n    </div>", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-notification-row-shell{position:relative;overflow:hidden;background:transparent;touch-action:pan-y}.loro-notification-row-shell__delete{position:absolute;inset:0 0 0 auto;display:grid;width:8.75rem;align-content:center;justify-items:center;gap:.45rem;border:0;background:#ef4444;color:var(--loro-text-inverse);font:inherit;font-weight:850;cursor:pointer;opacity:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:opacity .18s ease,transform .18s ease}.loro-notification-row-shell--dragging .loro-notification-row-shell__delete,.loro-notification-row-shell--armed .loro-notification-row-shell__delete,.loro-notification-row-shell--removing .loro-notification-row-shell__delete{opacity:1}.loro-notification-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:.85rem;width:100%;padding:.82rem .95rem;border:0;border-bottom:1px solid var(--loro-border-subtle);background:var(--loro-surface);color:var(--loro-text);text-align:left;cursor:pointer;will-change:transform;transition:background .15s ease,transform .22s cubic-bezier(.2,.8,.2,1),opacity .18s ease}.loro-notification-row-shell--dragging .loro-notification-row{transition:background .15s ease}.loro-notification-row-shell--removing .loro-notification-row{opacity:.18;transform:translate3d(-100%,0,0)!important}:host:last-child .loro-notification-row{border-bottom-color:transparent}.loro-notification-row:hover{background:var(--loro-surface)}.loro-notification-row:focus-visible{position:relative;z-index:1;outline:2px solid rgba(108,60,255,.32);outline-offset:-2px}.loro-notification-row__icon{display:grid;width:2.5rem;height:2.5rem;place-items:center;border-radius:.8rem;background:transparent}.loro-notification-row__content{display:grid;gap:.2rem;min-width:0}.loro-notification-row__meta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:.75rem}strong{overflow:hidden;color:var(--loro-text-strong);font-size:.92rem;font-weight:950;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}small,.loro-notification-row__message{color:var(--loro-muted);font-size:.82rem;font-weight:700;line-height:1.35}.loro-notification-row__dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--loro-primary-500)}.loro-notification-row__delete-button{display:grid;width:2.25rem;height:2.25rem;place-items:center;border:0;border-radius:.7rem;background:color-mix(in srgb,var(--loro-danger-text) 8%,transparent);cursor:pointer;opacity:0;transition:background .15s ease,opacity .15s ease,transform .15s ease}.loro-notification-row:hover .loro-notification-row__delete-button,.loro-notification-row:focus-visible .loro-notification-row__delete-button,.loro-notification-row__delete-button:focus-visible{opacity:1}.loro-notification-row__delete-button:hover,.loro-notification-row__delete-button:focus-visible{background:color-mix(in srgb,var(--loro-danger-text) 14%,transparent);outline:0;transform:translateY(-1px)}@media(max-width:1023.88px){.loro-notification-row{grid-template-columns:auto minmax(0,1fr) auto;padding:.82rem .8rem}.loro-notification-row__delete-button{display:none}}\n"], dependencies: [{ kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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)}:host:last-child .loro-notification-row{border-bottom-color:transparent}.loro-notification-row:hover{background:var(--loro-surface)}.loro-notification-row:focus-visible{position:relative;z-index:1;outline:2px solid rgba(108,60,255,.32);outline-offset:-2px}.loro-notification-row__icon{display:grid;width:2.5rem;height:2.5rem;place-items:center;border-radius:.8rem;background:transparent}.loro-notification-row__content{display:grid;gap:.2rem;min-width:0}.loro-notification-row__meta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:.75rem}strong{overflow:hidden;color:var(--loro-text-strong);font-size:.92rem;font-weight:950;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}small,.loro-notification-row__message{color:var(--loro-muted);font-size:.82rem;font-weight:700;line-height:1.35}.loro-notification-row__dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--loro-primary-500)}.loro-notification-row__delete-button{display:grid;width:2.25rem;height:2.25rem;place-items:center;border:0;border-radius:.7rem;background:color-mix(in srgb,var(--loro-danger-text) 8%,transparent);cursor:pointer;opacity:0;transition:background .15s ease,opacity .15s ease,transform .15s ease}.loro-notification-row:hover .loro-notification-row__delete-button,.loro-notification-row:focus-visible .loro-notification-row__delete-button,.loro-notification-row__delete-button:focus-visible{opacity:1}.loro-notification-row__delete-button:hover,.loro-notification-row__delete-button:focus-visible{background:color-mix(in srgb,var(--loro-danger-text) 14%,transparent);outline:0;transform:translateY(-1px)}@media(max-width:1023.88px){.loro-notification-row{grid-template-columns:auto minmax(0,1fr) auto;padding:.82rem .8rem}.loro-notification-row__delete-button{display:none}}\n"], dependencies: [{ kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroNotificationRow, decorators: [{
             type: Component,
-            args: [{ selector: 'loro-notification-row', standalone: true, imports: [LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\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"] }]
+            args: [{ selector: 'loro-notification-row', standalone: true, imports: [LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n      class=\"loro-notification-row-shell\"\n      data-horizontal-gesture\n      [class.loro-notification-row-shell--dragging]=\"dragging()\"\n      [class.loro-notification-row-shell--armed]=\"armed()\"\n      [class.loro-notification-row-shell--removing]=\"removing()\"\n      (touchstart)=\"onTouchStart($event)\"\n      (touchmove)=\"onTouchMove($event)\"\n      (touchend)=\"onTouchEnd()\"\n      (touchcancel)=\"resetDrag()\">\n      <button\n        type=\"button\"\n        class=\"loro-notification-row-shell__delete\"\n        aria-label=\"Eliminar notificacion\"\n        (pointerdown)=\"$event.stopPropagation()\"\n        (touchstart)=\"$event.stopPropagation()\"\n        (click)=\"onDeleteClick($event)\">\n        <loro-icon name=\"trash-white\" [size]=\"22\" alt=\"\" [decorative]=\"true\" color=\"inverse\" />\n        <span>Eliminar</span>\n      </button>\n      <article\n        role=\"button\"\n        tabindex=\"0\"\n        class=\"loro-notification-row\"\n        [class.loro-notification-row--unread]=\"unread()\"\n        [style.transform]=\"'translate3d(' + dragX() + 'px, 0, 0)'\"\n        (click)=\"onRowClick()\"\n        (keydown.enter)=\"onRowKeydown($event)\"\n        (keydown.space)=\"onRowKeydown($event)\">\n        <span class=\"loro-notification-row__icon\">\n          <loro-icon [name]=\"icon()\" [size]=\"26\" [alt]=\"title()\" color=\"primary\" />\n        </span>\n        <span class=\"loro-notification-row__content\">\n          <span class=\"loro-notification-row__meta\">\n            <strong>{{ title() }}</strong>\n            @if (time()) {\n              <small>{{ time() }}</small>\n            }\n          </span>\n          <span class=\"loro-notification-row__message\">{{ message() }}</span>\n        </span>\n        @if (unread()) {\n          <span class=\"loro-notification-row__dot\" aria-label=\"Unread\"></span>\n        }\n        <button\n          type=\"button\"\n          class=\"loro-notification-row__delete-button\"\n          aria-label=\"Eliminar notificacion\"\n          (click)=\"onDeleteClick($event)\">\n          <loro-icon name=\"trash\" [size]=\"18\" alt=\"\" [decorative]=\"true\" color=\"danger\" />\n        </button>\n      </article>\n    </div>", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-notification-row-shell{position:relative;overflow:hidden;background:transparent;touch-action:pan-y}.loro-notification-row-shell__delete{position:absolute;inset:0 0 0 auto;display:grid;width:8.75rem;align-content:center;justify-items:center;gap:.45rem;border:0;background:#ef4444;color:var(--loro-text-inverse);font:inherit;font-weight:850;cursor:pointer;opacity:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:opacity .18s ease,transform .18s ease}.loro-notification-row-shell--dragging .loro-notification-row-shell__delete,.loro-notification-row-shell--armed .loro-notification-row-shell__delete,.loro-notification-row-shell--removing .loro-notification-row-shell__delete{opacity:1}.loro-notification-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:.85rem;width:100%;padding:.82rem .95rem;border:0;border-bottom:1px solid var(--loro-border-subtle);background:var(--loro-surface);color:var(--loro-text);text-align:left;cursor:pointer;will-change:transform;transition:background .15s ease,transform .22s cubic-bezier(.2,.8,.2,1),opacity .18s ease}.loro-notification-row-shell--dragging .loro-notification-row{transition:background .15s ease}.loro-notification-row-shell--removing .loro-notification-row{opacity:.18;transform:translate3d(-100%,0,0)}: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 {
@@ -2525,11 +1755,11 @@ class LoroSpinner {
     showMessage = input(true, ...(ngDevMode ? [{ debugName: "showMessage" }] : /* istanbul ignore next */ []));
     showDots = input(true, ...(ngDevMode ? [{ debugName: "showDots" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroSpinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroSpinner, isStandalone: true, selector: "loro-spinner", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, showBrand: { classPropertyName: "showBrand", publicName: "showBrand", isSignal: true, isRequired: false, transformFunction: null }, brandText: { classPropertyName: "brandText", publicName: "brandText", isSignal: true, isRequired: false, transformFunction: null }, showMessage: { classPropertyName: "showMessage", publicName: "showMessage", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"loro-spinner\" role=\"status\" aria-live=\"polite\" [attr.aria-label]=\"ariaLabel()\">\n  <div class=\"loro-spinner__panel\">\n    <loro-image class=\"loro-spinner__image\" [name]=\"iconName\" fit=\"contain\" />\n\n    @if (showBrand()) {\n      <strong class=\"loro-spinner__brand\">{{ brandText() }}</strong>\n    }\n\n    @if (showMessage()) {\n      <p class=\"loro-spinner__message\">{{ message() }}</p>\n    }\n\n    @if (showDots()) {\n      <div class=\"loro-spinner__dots\" aria-hidden=\"true\">\n        <span></span>\n        <span></span>\n        <span></span>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".loro-spinner{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;min-height:100dvh;padding:max(var(--loro-space-5),env(safe-area-inset-top)) var(--loro-space-5) max(var(--loro-space-5),env(safe-area-inset-bottom));background:var(--loro-page-background);color:var(--loro-text);font-family:var(--loro-font-brand);isolation:isolate}.loro-spinner__panel{display:flex;flex-direction:column;align-items:center;padding:24px}.loro-spinner__image{width:8rem;margin-bottom:8px}.loro-spinner__brand{color:var(--loro-primary-500);font-size:3rem;font-weight:800;letter-spacing:0}.loro-spinner__message{font-size:1.25rem;font-weight:500;letter-spacing:0;margin-bottom:8px}.loro-spinner__dots{display:inline-flex;align-items:center;gap:var(--loro-space-2);min-height:.75rem}.loro-spinner__dots span{width:.55rem;height:.55rem;border-radius:var(--loro-radius-pill);background:var(--loro-primary-500);animation:loro-spinner-pulse 1.05s ease-in-out infinite}.loro-spinner__dots span:nth-child(2){animation-delay:.14s}.loro-spinner__dots span:nth-child(3){animation-delay:.28s}@media(min-width:1024px){.loro-spinner{background:var(--loro-surface-overlay);-webkit-backdrop-filter:blur(.625rem);backdrop-filter:blur(.625rem)}.loro-spinner__image{width:5rem}.loro-spinner__brand{font-size:1.5rem}.loro-spinner__message{font-size:.75rem}.loro-spinner__panel{min-width:16rem;padding:var(--loro-space-6);border:1px solid var(--loro-border-soft);border-radius:var(--loro-radius-card-lg);background:var(--loro-surface-elevated);min-height:16rem}}@keyframes loro-spinner-pulse{0%,80%,to{opacity:.28;transform:scale(.78)}40%{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.loro-spinner__dots span{animation:none;opacity:.72}}\n"], dependencies: [{ 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: LoroSpinner, isStandalone: true, selector: "loro-spinner", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, showBrand: { classPropertyName: "showBrand", publicName: "showBrand", isSignal: true, isRequired: false, transformFunction: null }, brandText: { classPropertyName: "brandText", publicName: "brandText", isSignal: true, isRequired: false, transformFunction: null }, showMessage: { classPropertyName: "showMessage", publicName: "showMessage", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"loro-spinner\" role=\"status\" aria-live=\"polite\" [attr.aria-label]=\"ariaLabel()\">\n  <div class=\"loro-spinner__panel\">\n    <loro-image class=\"loro-spinner__image\" [name]=\"iconName\" />\n\n    @if (showBrand()) {\n      <strong class=\"loro-spinner__brand\">{{ brandText() }}</strong>\n    }\n\n    @if (showMessage()) {\n      <p class=\"loro-spinner__message\">{{ message() }}</p>\n    }\n\n    @if (showDots()) {\n      <div class=\"loro-spinner__dots\" aria-hidden=\"true\">\n        <span></span>\n        <span></span>\n        <span></span>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".loro-spinner{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;min-height:100dvh;padding:max(var(--loro-space-5),env(safe-area-inset-top)) var(--loro-space-5) max(var(--loro-space-5),env(safe-area-inset-bottom));background:var(--loro-page-background);color:var(--loro-text);font-family:var(--loro-font-brand);isolation:isolate}.loro-spinner__panel{display:flex;flex-direction:column;align-items:center;padding:24px}.loro-spinner__image{width:8rem;margin-bottom:8px}.loro-spinner__brand{color:var(--loro-primary-500);font-size:3rem;font-weight:800;letter-spacing:0}.loro-spinner__message{font-size:1.25rem;font-weight:500;letter-spacing:0;margin-bottom:8px}.loro-spinner__dots{display:inline-flex;align-items:center;gap:var(--loro-space-2);min-height:.75rem}.loro-spinner__dots span{width:.55rem;height:.55rem;border-radius:var(--loro-radius-pill);background:var(--loro-primary-500);animation:loro-spinner-pulse 1.05s ease-in-out infinite}.loro-spinner__dots span:nth-child(2){animation-delay:.14s}.loro-spinner__dots span:nth-child(3){animation-delay:.28s}@media(min-width:1024px){.loro-spinner{background:var(--loro-surface-overlay);-webkit-backdrop-filter:blur(.625rem);backdrop-filter:blur(.625rem)}.loro-spinner__image{width:5rem}.loro-spinner__brand{font-size:1.5rem}.loro-spinner__message{font-size:.75rem}.loro-spinner__panel{min-width:16rem;padding:var(--loro-space-6);border:1px solid var(--loro-border-soft);border-radius:var(--loro-radius-card-lg);background:var(--loro-surface-elevated);min-height:16rem}}@keyframes loro-spinner-pulse{0%,80%,to{opacity:.28;transform:scale(.78)}40%{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.loro-spinner__dots span{animation:none;opacity:.72}}\n"], dependencies: [{ kind: "component", type: LoroImage, selector: "loro-image", inputs: ["name", "alt", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroSpinner, decorators: [{
             type: Component,
-            args: [{ selector: 'loro-spinner', standalone: true, imports: [LoroImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"loro-spinner\" role=\"status\" aria-live=\"polite\" [attr.aria-label]=\"ariaLabel()\">\n  <div class=\"loro-spinner__panel\">\n    <loro-image class=\"loro-spinner__image\" [name]=\"iconName\" fit=\"contain\" />\n\n    @if (showBrand()) {\n      <strong class=\"loro-spinner__brand\">{{ brandText() }}</strong>\n    }\n\n    @if (showMessage()) {\n      <p class=\"loro-spinner__message\">{{ message() }}</p>\n    }\n\n    @if (showDots()) {\n      <div class=\"loro-spinner__dots\" aria-hidden=\"true\">\n        <span></span>\n        <span></span>\n        <span></span>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".loro-spinner{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;min-height:100dvh;padding:max(var(--loro-space-5),env(safe-area-inset-top)) var(--loro-space-5) max(var(--loro-space-5),env(safe-area-inset-bottom));background:var(--loro-page-background);color:var(--loro-text);font-family:var(--loro-font-brand);isolation:isolate}.loro-spinner__panel{display:flex;flex-direction:column;align-items:center;padding:24px}.loro-spinner__image{width:8rem;margin-bottom:8px}.loro-spinner__brand{color:var(--loro-primary-500);font-size:3rem;font-weight:800;letter-spacing:0}.loro-spinner__message{font-size:1.25rem;font-weight:500;letter-spacing:0;margin-bottom:8px}.loro-spinner__dots{display:inline-flex;align-items:center;gap:var(--loro-space-2);min-height:.75rem}.loro-spinner__dots span{width:.55rem;height:.55rem;border-radius:var(--loro-radius-pill);background:var(--loro-primary-500);animation:loro-spinner-pulse 1.05s ease-in-out infinite}.loro-spinner__dots span:nth-child(2){animation-delay:.14s}.loro-spinner__dots span:nth-child(3){animation-delay:.28s}@media(min-width:1024px){.loro-spinner{background:var(--loro-surface-overlay);-webkit-backdrop-filter:blur(.625rem);backdrop-filter:blur(.625rem)}.loro-spinner__image{width:5rem}.loro-spinner__brand{font-size:1.5rem}.loro-spinner__message{font-size:.75rem}.loro-spinner__panel{min-width:16rem;padding:var(--loro-space-6);border:1px solid var(--loro-border-soft);border-radius:var(--loro-radius-card-lg);background:var(--loro-surface-elevated);min-height:16rem}}@keyframes loro-spinner-pulse{0%,80%,to{opacity:.28;transform:scale(.78)}40%{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.loro-spinner__dots span{animation:none;opacity:.72}}\n"] }]
+            args: [{ selector: 'loro-spinner', standalone: true, imports: [LoroImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"loro-spinner\" role=\"status\" aria-live=\"polite\" [attr.aria-label]=\"ariaLabel()\">\n  <div class=\"loro-spinner__panel\">\n    <loro-image class=\"loro-spinner__image\" [name]=\"iconName\" />\n\n    @if (showBrand()) {\n      <strong class=\"loro-spinner__brand\">{{ brandText() }}</strong>\n    }\n\n    @if (showMessage()) {\n      <p class=\"loro-spinner__message\">{{ message() }}</p>\n    }\n\n    @if (showDots()) {\n      <div class=\"loro-spinner__dots\" aria-hidden=\"true\">\n        <span></span>\n        <span></span>\n        <span></span>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".loro-spinner{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;min-height:100dvh;padding:max(var(--loro-space-5),env(safe-area-inset-top)) var(--loro-space-5) max(var(--loro-space-5),env(safe-area-inset-bottom));background:var(--loro-page-background);color:var(--loro-text);font-family:var(--loro-font-brand);isolation:isolate}.loro-spinner__panel{display:flex;flex-direction:column;align-items:center;padding:24px}.loro-spinner__image{width:8rem;margin-bottom:8px}.loro-spinner__brand{color:var(--loro-primary-500);font-size:3rem;font-weight:800;letter-spacing:0}.loro-spinner__message{font-size:1.25rem;font-weight:500;letter-spacing:0;margin-bottom:8px}.loro-spinner__dots{display:inline-flex;align-items:center;gap:var(--loro-space-2);min-height:.75rem}.loro-spinner__dots span{width:.55rem;height:.55rem;border-radius:var(--loro-radius-pill);background:var(--loro-primary-500);animation:loro-spinner-pulse 1.05s ease-in-out infinite}.loro-spinner__dots span:nth-child(2){animation-delay:.14s}.loro-spinner__dots span:nth-child(3){animation-delay:.28s}@media(min-width:1024px){.loro-spinner{background:var(--loro-surface-overlay);-webkit-backdrop-filter:blur(.625rem);backdrop-filter:blur(.625rem)}.loro-spinner__image{width:5rem}.loro-spinner__brand{font-size:1.5rem}.loro-spinner__message{font-size:.75rem}.loro-spinner__panel{min-width:16rem;padding:var(--loro-space-6);border:1px solid var(--loro-border-soft);border-radius:var(--loro-radius-card-lg);background:var(--loro-surface-elevated);min-height:16rem}}@keyframes loro-spinner-pulse{0%,80%,to{opacity:.28;transform:scale(.78)}40%{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.loro-spinner__dots span{animation:none;opacity:.72}}\n"] }]
         }], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], showBrand: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBrand", required: false }] }], brandText: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandText", required: false }] }], showMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMessage", required: false }] }], showDots: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDots", required: false }] }] } });
 
 class LoroToast {
@@ -2573,14 +1803,96 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     }, 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;
-class LoroAuthField {
-    icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+class LoroCheckbox {
+    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    helperText = input('', ...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
+    text = input('', ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    errorText = computed(() => this.errors()[0]?.message?.trim() ?? '', ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
+    showError = computed(() => this.errorText().length > 0 || (this.invalid() && this.touched()), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+    toggle(checked) {
+        if (this.disabled() || this.readonly()) {
+            return;
+        }
+        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\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\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 {
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    updateValue(value) {
+        this.value.set(value);
+        this.valueChange.emit(value);
+    }
+    markAsTouched() {
+        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\">\n      @if (label()) {\n        <span class=\"loro-dropdown__label\">{{ label() }}</span>\n      }\n      <span class=\"loro-dropdown__control\">\n        <select [value]=\"value()\" [disabled]=\"disabled() || readonly()\" [required]=\"required()\" (change)=\"updateValue(($any($event.target).value ?? '').toString())\" (blur)=\"markAsTouched()\">\n          @if (placeholder()) {\n            <option value=\"\" disabled>{{ placeholder() }}</option>\n          }\n          @for (option of options(); track option.value) {\n            <option [value]=\"option.value\">{{ option.label }}</option>\n          }\n        </select>\n        <loro-icon name=\"chevron-down\" [size]=\"22\" alt=\"Abrir opciones\" color=\"primary\" />\n      </span>\n    </label>", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-dropdown{display:grid;gap:.55rem}.loro-dropdown__label{color:var(--loro-muted-strong);font-size:.95rem;font-weight:800}.loro-dropdown__control{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;min-height:3.4rem;padding:0 1rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-input);background:var(--loro-surface)}select{width:100%;border:0;outline:0;appearance:none;background:transparent;color:var(--loro-text-strong);font:inherit;font-weight:700}\n"], dependencies: [{ kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroDropdown, decorators: [{
+            type: Component,
+            args: [{ selector: 'loro-dropdown', standalone: true, imports: [LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"loro-dropdown\">\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 {
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    placeholder = input.required(...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    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())\">\n      @if (icon()) {\n        <loro-icon [name]=\"icon()!\" [size]=\"20\" [alt]=\"label()\" [color]=\"active() ? 'inverse' : 'primary'\" />\n      }\n      <span>{{ label() }}</span>\n    </button>", styles: [":host{display:inline-flex;font-family:var(--loro-font-brand)}.loro-filter-chip{display:inline-flex;align-items:center;gap:.45rem;min-height:2.55rem;padding:.55rem 1rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-pill);background:var(--loro-surface);color:var(--loro-muted-strong);font:inherit;font-size:.9rem;font-weight:850;cursor:pointer;white-space:nowrap}.loro-filter-chip--active{border-color:transparent;background:linear-gradient(135deg,var(--loro-primary-500),var(--loro-primary-700));color:#fff;box-shadow:var(--loro-shadow-button)}@media(max-width:640px){.loro-filter-chip{gap:.4rem;min-height:2.3rem;padding:.48rem .78rem;font-size:clamp(.78rem,2.9vw,.9rem)}}@media(max-width:430px){.loro-filter-chip{gap:.34rem;min-height:2.2rem;padding:.42rem .7rem;font-size:clamp(.74rem,2.8vw,.84rem)}}\n"], dependencies: [{ kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroFilterChip, decorators: [{
+            type: Component,
+            args: [{ selector: 'loro-filter-chip', standalone: true, imports: [LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button type=\"button\" class=\"loro-filter-chip\" [class.loro-filter-chip--active]=\"active()\" (click)=\"selected.emit(value())\">\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"] }] } });
+
+function optionalNumberAttribute$1(value) {
+    if (value === undefined || value === null || value === '') {
+        return undefined;
+    }
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : undefined;
+}
+let nextLoroInputId = 0;
+class LoroInput {
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    helperText = input('', ...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
     value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
-    autocomplete = input('off', ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    autocomplete = input('', ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
+    inputmode = input('', ...(ngDevMode ? [{ debugName: "inputmode" }] : /* istanbul ignore next */ []));
+    icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    iconSize = input(24, ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
+    trailingIcon = input(null, ...(ngDevMode ? [{ debugName: "trailingIcon" }] : /* istanbul ignore next */ []));
+    trailingIconSize = input(24, ...(ngDevMode ? [{ debugName: "trailingIconSize" }] : /* istanbul ignore next */ []));
+    trailingAriaLabel = input('', ...(ngDevMode ? [{ debugName: "trailingAriaLabel" }] : /* istanbul ignore next */ []));
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
     state = input('default', ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
     errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
@@ -2590,101 +1902,130 @@ class LoroAuthField {
     readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
-    valueChange = output();
-    errorId = `loro-auth-field-error-${++nextLoroAuthFieldId}`;
-    errorText = computed(() => this.errorMessage().trim() || this.errors()[0]?.message?.trim() || '', ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
-    hasError = computed(() => this.state() === 'error' || this.errorText().length > 0 || (this.invalid() && this.touched()), ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
-    passwordVisible = signal(false, ...(ngDevMode ? [{ debugName: "passwordVisible" }] : /* istanbul ignore next */ []));
-    showToggle() {
-        return this.type() === 'password';
+    unit = input('ud', ...(ngDevMode ? [{ debugName: "unit" }] : /* istanbul ignore next */ []));
+    step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute$1 });
+    max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute$1 });
+    trailingClick = output();
+    control = viewChild('control', ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
+    errorId = `loro-input-error-${++nextLoroInputId}`;
+    errorText = computed(() => {
+        const manualMessage = this.errorMessage().trim();
+        if (manualMessage) {
+            return manualMessage;
+        }
+        return this.errors()[0]?.message?.trim() ?? '';
+    }, ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
+    hasError = computed(() => this.state() === 'error'
+        || this.errorText().length > 0
+        || (this.invalid() && this.touched()), ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    hasSuccess = computed(() => this.state() === 'success' && !this.hasError(), ...(ngDevMode ? [{ debugName: "hasSuccess" }] : /* istanbul ignore next */ []));
+    hasLoading = computed(() => this.state() === 'loading' && !this.hasError(), ...(ngDevMode ? [{ debugName: "hasLoading" }] : /* istanbul ignore next */ []));
+    isAuthVariant = computed(() => this.variant() === 'auth', ...(ngDevMode ? [{ debugName: "isAuthVariant" }] : /* istanbul ignore next */ []));
+    passwordVisible = model(false, ...(ngDevMode ? [{ debugName: "passwordVisible" }] : /* istanbul ignore next */ []));
+    showPasswordToggle = computed(() => this.isAuthVariant() && this.type() === 'password', ...(ngDevMode ? [{ debugName: "showPasswordToggle" }] : /* istanbul ignore next */ []));
+    resolvedType = computed(() => this.showPasswordToggle() && this.passwordVisible() ? 'text' : this.type(), ...(ngDevMode ? [{ debugName: "resolvedType" }] : /* istanbul ignore next */ []));
+    resolvedLeadingIconColor = computed(() => this.hasError() ? 'danger' : this.hasSuccess() ? 'success' : this.isAuthVariant() ? 'primary-deep' : 'primary', ...(ngDevMode ? [{ debugName: "resolvedLeadingIconColor" }] : /* istanbul ignore next */ []));
+    resolvedTrailingIconColor = computed(() => this.trailingIcon() === 'eye' || this.trailingIcon() === 'eye-off'
+        ? 'muted'
+        : this.hasError() ? 'danger' : this.hasSuccess() ? 'success' : 'muted', ...(ngDevMode ? [{ debugName: "resolvedTrailingIconColor" }] : /* istanbul ignore next */ []));
+    focus(options) {
+        this.control()?.nativeElement.focus(options);
+    }
+    adjust(delta) {
+        const value = this.coerceNumber(this.value());
+        const nextValue = this.clampValue(value + delta);
+        this.value.set(this.formatValue(nextValue));
+        this.touched.set(true);
     }
-    resolvedType() {
-        return this.type() === 'password' && this.passwordVisible() ? 'text' : this.type();
+    normalizeValue(value) {
+        this.value.set(this.formatValue(this.clampValue(this.coerceNumber(value))));
+        this.touched.set(true);
     }
     updateValue(value) {
         this.value.set(value);
-        this.valueChange.emit(value);
     }
     markAsTouched() {
         this.touched.set(true);
     }
-    toggleVisibility() {
+    togglePasswordVisibility() {
         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\n      class=\"loro-auth-field\"\n      [class.loro-auth-field--selected]=\"selected()\"\n      [class.loro-auth-field--error]=\"hasError()\"\n    >\n      <span class=\"sr-only\">{{ label() }}</span>\n      <span class=\"loro-auth-field__icon\">\n        <loro-icon [name]=\"icon()\" [size]=\"28\" [alt]=\"label()\" />\n      </span>\n      <input\n        class=\"loro-auth-field__input\"\n        [type]=\"resolvedType()\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [placeholder]=\"placeholder()\"\n        [value]=\"value()\"\n        [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [required]=\"required()\"\n        [attr.aria-describedby]=\"hasError() && errorText() ? errorId : null\"\n        (input)=\"updateValue(($any($event.target).value ?? '').toString())\"\n        (blur)=\"markAsTouched()\"\n      />\n      @if (showToggle()) {\n        <button\n          type=\"button\"\n          class=\"loro-auth-field__toggle\"\n          (click)=\"toggleVisibility()\"\n          [attr.aria-label]=\"passwordVisible() ? 'Ocultar contenido' : 'Mostrar contenido'\"\n        >\n          <loro-icon name=\"eye\" [size]=\"26\" alt=\"Mostrar contenido\" />\n        </button>\n      }\n    </label>\n    @if (hasError() && errorText()) {\n      <span class=\"loro-auth-field__error\" [id]=\"errorId\">\n        <loro-icon name=\"shield-alert\" [size]=\"15\" color=\"danger\" [decorative]=\"true\" />\n        <span>{{ errorText() }}</span>\n      </span>\n    }", styles: [":host{display:grid;gap:.35rem}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;padding:0}.loro-auth-field{display:grid;grid-template-columns:2rem minmax(0,1fr) auto;align-items:center;border:1px solid var(--loro-border-strong);border-radius:.72rem;background:var(--loro-surface);padding:.48rem .65rem;box-shadow:var(--loro-shadow-soft);color:var(--loro-text);font-family:var(--loro-font-brand);transition:border-color .18s ease,box-shadow .18s ease}.loro-auth-field:hover,.loro-auth-field:focus-within,.loro-auth-field--selected{border-color:var(--loro-auth-field-active-border, var(--loro-primary-500));box-shadow:var(--loro-shadow-soft),0 0 0 3px color-mix(in srgb,var(--loro-primary-500) 14%,transparent)}.loro-auth-field--error{border-color:color-mix(in srgb,var(--loro-danger-text) 30%,var(--loro-border-strong));background:color-mix(in srgb,var(--loro-danger-surface) 34%,var(--loro-surface));box-shadow:var(--loro-shadow-soft),0 0 0 3px color-mix(in srgb,var(--loro-danger-text) 7%,transparent)}.loro-auth-field--error:hover,.loro-auth-field--error:focus-within{border-color:color-mix(in srgb,var(--loro-danger-text) 44%,var(--loro-border-strong));box-shadow:var(--loro-shadow-soft),0 0 0 3px color-mix(in srgb,var(--loro-danger-text) 10%,transparent)}.loro-auth-field__icon{display:grid;place-items:center;width:24px}.loro-auth-field__icon loro-icon{transform:scale(.62)}.loro-auth-field__input{width:100%;border:0;outline:none;background:transparent;color:var(--loro-text);font:inherit;font-size:.72rem;line-height:1.3}.loro-auth-field__input::placeholder{color:var(--loro-muted)}.loro-auth-field__toggle{border:0;background:transparent;padding:0;color:inherit;line-height:0;cursor:pointer}.loro-auth-field__toggle loro-icon{transform:scale(.62)}.loro-auth-field__error{display:inline-grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.35rem;color:var(--loro-danger-text);font-size:.72rem;font-weight:750;line-height:1.3}\n"], dependencies: [{ kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroAuthField, decorators: [{
-            type: Component,
-            args: [{ selector: 'loro-auth-field', standalone: true, imports: [LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label\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 {
-    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
-    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
-    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
-    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
-    errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
-    helperText = input('', ...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
-    text = input('', ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
-    errorText = computed(() => this.errors()[0]?.message?.trim() ?? '', ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
-    showError = computed(() => this.errorText().length > 0 || (this.invalid() && this.touched()), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
-    toggle(checked) {
-        if (this.disabled() || this.readonly()) {
+    coerceNumber(value) {
+        const parsed = Number(value.replace(',', '.'));
+        return Number.isFinite(parsed) ? parsed : (this.min() ?? 0);
+    }
+    formatValue(value) {
+        if (this.normalizedUnit() === 'ud') {
+            return Math.round(value).toString();
+        }
+        return Number(value.toFixed(1)).toLocaleString('es-ES', {
+            minimumFractionDigits: Number.isInteger(value) ? 0 : 1,
+            maximumFractionDigits: 1,
+        });
+    }
+    normalizedUnit() {
+        return this.unit() === 'kg' ? 'kg' : 'ud';
+    }
+    stepperInputSize() {
+        return this.normalizedUnit() === 'kg' ? 4 : 3;
+    }
+    stepperInputMaxLength() {
+        return this.normalizedUnit() === 'kg' ? 4 : 3;
+    }
+    sanitizeStepperInput(event) {
+        const input = event.target;
+        if (!(input instanceof HTMLInputElement)) {
             return;
         }
-        this.checked.set(checked);
+        const value = this.sanitizeValue(input.value);
+        if (input.value !== value) {
+            input.value = value;
+        }
+        if (value === '' || value === ',' || value === '.') {
+            return;
+        }
+        const formatted = this.formatValue(this.clampValue(this.coerceNumber(value)));
+        input.value = formatted;
+        this.value.set(formatted);
     }
-    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\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\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 {
-    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
-    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
-    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
-    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
-    errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
-    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
-    valueChange = output();
-    updateValue(value) {
-        this.value.set(value);
-        this.valueChange.emit(value);
+    clampValue(value) {
+        const min = this.min() ?? 0;
+        const max = this.max() ?? 100;
+        return Math.min(max, Math.max(min, value));
     }
-    markAsTouched() {
-        this.touched.set(true);
+    sanitizeValue(value) {
+        if (this.normalizedUnit() === 'ud') {
+            return value.replace(/\D/g, '').slice(0, this.stepperInputMaxLength());
+        }
+        const normalized = value.replace(/\./g, ',').replace(/[^\d,]/g, '');
+        const [integer = '', decimal = ''] = normalized.split(',');
+        const nextInteger = integer.slice(0, 3);
+        const nextDecimal = decimal.slice(0, 1);
+        return normalized.includes(',') ? `${nextInteger},${nextDecimal}` : nextInteger.slice(0, 3);
     }
-    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\">\n      @if (label()) {\n        <span class=\"loro-dropdown__label\">{{ label() }}</span>\n      }\n      <span class=\"loro-dropdown__control\">\n        <select [value]=\"value()\" [disabled]=\"disabled() || readonly()\" [required]=\"required()\" (change)=\"updateValue(($any($event.target).value ?? '').toString())\" (blur)=\"markAsTouched()\">\n          @if (placeholder()) {\n            <option value=\"\" disabled>{{ placeholder() }}</option>\n          }\n          @for (option of options(); track option.value) {\n            <option [value]=\"option.value\">{{ option.label }}</option>\n          }\n        </select>\n        <loro-icon name=\"chevron-down\" [size]=\"22\" alt=\"Abrir opciones\" color=\"primary\" />\n      </span>\n    </label>", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-dropdown{display:grid;gap:.55rem}.loro-dropdown__label{color:var(--loro-muted-strong);font-size:.95rem;font-weight:800}.loro-dropdown__control{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;min-height:3.4rem;padding:0 1rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-input);background:var(--loro-surface)}select{width:100%;border:0;outline:0;appearance:none;background:transparent;color:var(--loro-text-strong);font:inherit;font-weight:700}\n"], dependencies: [{ kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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 }, 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 }, 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 }, passwordVisible: { classPropertyName: "passwordVisible", publicName: "passwordVisible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", trailingClick: "trailingClick", passwordVisible: "passwordVisibleChange" }, 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  >\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--auth]=\"isAuthVariant()\"\n    [class.loro-input--selected]=\"selected()\"\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]=\"resolvedType()\"\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 (showPasswordToggle()) {\n        <button\n          type=\"button\"\n          class=\"loro-input__trailing-button\"\n          [attr.aria-label]=\"passwordVisible() ? 'Ocultar contenido' : 'Mostrar contenido'\"\n          (click)=\"togglePasswordVisibility()\"\n        >\n          <loro-icon\n            [name]=\"passwordVisible() ? 'eye-off' : 'eye'\"\n            [size]=\"trailingIconSize()\"\n            alt=\"\"\n            [decorative]=\"true\"\n            [color]=\"resolvedTrailingIconColor()\"\n          />\n        </button>\n      } @else 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}\n", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-input{display:grid;gap:.55rem;color:var(--loro-text)}.loro-input--auth{gap:.35rem}.loro-input--selected .loro-input__control,.loro-input--auth:hover .loro-input__control,.loro-input--auth:focus-within .loro-input__control{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 .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--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--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--auth .loro-input__control{min-height:3.1rem;padding-inline:.9rem;border-radius:.8rem;grid-template-columns:auto minmax(0,1fr) auto;gap:.7rem}.loro-input--auth .loro-input__label{color:var(--loro-text-strong);font-size:.92rem;font-weight:800}.loro-input--auth .loro-input__control input{font-size:.9rem;font-weight:700}.loro-input--auth .loro-input__control[loro-input__control]{min-width:0}.loro-input--auth .loro-input__control .loro-icon{width:1rem;height:1rem}.loro-input--auth .loro-input__trailing-button{width:2.25rem;height:2.25rem;margin-right:-.35rem}.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)}.loro-input 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)}.loro-input 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__label{color:color-mix(in srgb,var(--loro-danger-text) 68%,var(--loro-muted-strong))}.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__label{color:color-mix(in srgb,var(--loro-primary-500) 72%,var(--loro-muted-strong))}.loro-input__error{display:inline-grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.4rem;color:var(--loro-danger-text);font-size:var(--loro-input-support-font-size, .82rem);font-weight:var(--loro-input-support-font-weight, 750);line-height:var(--loro-input-support-line-height, 1.35)}.loro-input__helper{display:inline-block;color:var(--loro-muted);font-size:var(--loro-input-support-font-size, .82rem);font-weight:var(--loro-input-support-font-weight, 750);line-height:var(--loro-input-support-line-height, 1.35)}.loro-input__success{display:inline-grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.4rem;color:var(--loro-success, #1f9d55);font-size:var(--loro-input-support-font-size, .82rem);font-weight:var(--loro-input-support-font-weight, 750);line-height:var(--loro-input-support-line-height, 1.35)}.loro-input__loading{display:flex;align-items:center;gap:.35rem;color:var(--loro-primary-700);font-size:var(--loro-input-support-font-size, .82rem);font-weight:var(--loro-input-support-font-weight, 750);line-height:var(--loro-input-support-line-height, 1.35)}.loro-input__loader{width:1rem;height:1rem;border:2px solid color-mix(in srgb,var(--loro-primary-500) 18%,transparent);border-top-color:var(--loro-primary-500);border-radius:50%;animation:loro-input-spin .75s linear infinite}.loro-input--stepper{display:grid;grid-template-columns:1.85rem minmax(3.9rem,1fr) 1.85rem;align-items:center;min-width:0;min-height:2.25rem;overflow:hidden;border:1px solid color-mix(in srgb,var(--loro-primary-500) 12%,var(--loro-border-subtle) 88%);border-radius:.65rem;background:var(--loro-surface);color:var(--loro-text-strong);font-weight:900;text-align:center;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--loro-surface) 70%,transparent)}.loro-input--stepper button{height:100%;min-width:0;border:0;background:transparent;color:var(--loro-primary-700);font:inherit;font-weight:950;line-height:1;cursor:pointer;transition:background .15s ease,color .15s ease}.loro-input--stepper button:active{background:color-mix(in srgb,var(--loro-primary-500) 10%,var(--loro-surface) 90%)}.loro-input__stepper-value{display:inline-grid;grid-template-columns:minmax(1.55rem,max-content) auto;align-items:center;justify-content:center;gap:.18rem;min-width:0;overflow:hidden;padding-inline:.1rem;white-space:nowrap}.loro-input--stepper input{width:auto;min-width:1.55rem;max-width:2.75rem;overflow:hidden;padding:0;text-align:right;text-overflow:clip;white-space:nowrap;font-weight:900;font-size:clamp(.85rem,2.4vw,.98rem);letter-spacing:-.02em}.loro-input__stepper-value span{min-width:1.05rem;color:var(--loro-text-strong);font-size:clamp(.8rem,2.2vw,.92rem);font-weight:950;line-height:1}.loro-input--stepper-kg input{min-width:2.1rem;max-width:2.35rem}@media(max-width:1023.88px){.loro-input__control input{font-size:16px}.loro-input--stepper{grid-template-columns:1.65rem minmax(3.65rem,1fr) 1.65rem;min-height:2.2rem}.loro-input__stepper-value{gap:.16rem}}@keyframes loro-input-spin{to{transform:rotate(360deg)}}@keyframes loro-input-dot-blink{0%,20%{opacity:.25}50%{opacity:1}to{opacity:.25}}\n"], dependencies: [{ kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroDropdown, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroInput, decorators: [{
             type: Component,
-            args: [{ selector: 'loro-dropdown', standalone: true, imports: [LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"loro-dropdown\">\n      @if (label()) {\n        <span class=\"loro-dropdown__label\">{{ label() }}</span>\n      }\n      <span class=\"loro-dropdown__control\">\n        <select [value]=\"value()\" [disabled]=\"disabled() || readonly()\" [required]=\"required()\" (change)=\"updateValue(($any($event.target).value ?? '').toString())\" (blur)=\"markAsTouched()\">\n          @if (placeholder()) {\n            <option value=\"\" disabled>{{ placeholder() }}</option>\n          }\n          @for (option of options(); track option.value) {\n            <option [value]=\"option.value\">{{ option.label }}</option>\n          }\n        </select>\n        <loro-icon name=\"chevron-down\" [size]=\"22\" alt=\"Abrir opciones\" color=\"primary\" />\n      </span>\n    </label>", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-dropdown{display:grid;gap:.55rem}.loro-dropdown__label{color:var(--loro-muted-strong);font-size:.95rem;font-weight:800}.loro-dropdown__control{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;min-height:3.4rem;padding:0 1rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-input);background:var(--loro-surface)}select{width:100%;border:0;outline:0;appearance:none;background:transparent;color:var(--loro-text-strong);font:inherit;font-weight:700}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+            args: [{ selector: 'loro-input', standalone: true, imports: [LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (variant() === 'stepper') {\n  <span\n    class=\"loro-input loro-input--stepper-field\"\n    [class.loro-input--error]=\"hasError()\"\n    [class.loro-input--success]=\"hasSuccess()\"\n  >\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--auth]=\"isAuthVariant()\"\n    [class.loro-input--selected]=\"selected()\"\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]=\"resolvedType()\"\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 (showPasswordToggle()) {\n        <button\n          type=\"button\"\n          class=\"loro-input__trailing-button\"\n          [attr.aria-label]=\"passwordVisible() ? 'Ocultar contenido' : 'Mostrar contenido'\"\n          (click)=\"togglePasswordVisibility()\"\n        >\n          <loro-icon\n            [name]=\"passwordVisible() ? 'eye-off' : 'eye'\"\n            [size]=\"trailingIconSize()\"\n            alt=\"\"\n            [decorative]=\"true\"\n            [color]=\"resolvedTrailingIconColor()\"\n          />\n        </button>\n      } @else 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}\n", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-input{display:grid;gap:.55rem;color:var(--loro-text)}.loro-input--auth{gap:.35rem}.loro-input--selected .loro-input__control,.loro-input--auth:hover .loro-input__control,.loro-input--auth:focus-within .loro-input__control{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 .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--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--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--auth .loro-input__control{min-height:3.1rem;padding-inline:.9rem;border-radius:.8rem;grid-template-columns:auto minmax(0,1fr) auto;gap:.7rem}.loro-input--auth .loro-input__label{color:var(--loro-text-strong);font-size:.92rem;font-weight:800}.loro-input--auth .loro-input__control input{font-size:.9rem;font-weight:700}.loro-input--auth .loro-input__control[loro-input__control]{min-width:0}.loro-input--auth .loro-input__control .loro-icon{width:1rem;height:1rem}.loro-input--auth .loro-input__trailing-button{width:2.25rem;height:2.25rem;margin-right:-.35rem}.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)}.loro-input 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)}.loro-input 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__label{color:color-mix(in srgb,var(--loro-danger-text) 68%,var(--loro-muted-strong))}.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__label{color:color-mix(in srgb,var(--loro-primary-500) 72%,var(--loro-muted-strong))}.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 }] }], 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"] }], 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 }] }], passwordVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "passwordVisible", required: false }] }, { type: i0.Output, args: ["passwordVisibleChange"] }] } });
 
-class LoroFilterChip {
+class LoroRadio {
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-    active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    checked = input(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    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: 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())\">\n      @if (icon()) {\n        <loro-icon [name]=\"icon()!\" [size]=\"20\" [alt]=\"label()\" [color]=\"active() ? 'inverse' : 'primary'\" />\n      }\n      <span>{{ label() }}</span>\n    </button>", styles: [":host{display:inline-flex;font-family:var(--loro-font-brand)}.loro-filter-chip{display:inline-flex;align-items:center;gap:.45rem;min-height:2.55rem;padding:.55rem 1rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-pill);background:var(--loro-surface);color:var(--loro-muted-strong);font:inherit;font-size:.9rem;font-weight:850;cursor:pointer;white-space:nowrap}.loro-filter-chip--active{border-color:transparent;background:linear-gradient(135deg,var(--loro-primary-500),var(--loro-primary-700));color:#fff;box-shadow:var(--loro-shadow-button)}@media(max-width:640px){.loro-filter-chip{gap:.4rem;min-height:2.3rem;padding:.48rem .78rem;font-size:clamp(.78rem,2.9vw,.9rem)}}@media(max-width:430px){.loro-filter-chip{gap:.34rem;min-height:2.2rem;padding:.42rem .7rem;font-size:clamp(.74rem,2.8vw,.84rem)}}\n"], dependencies: [{ kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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\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: LoroFilterChip, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroRadio, 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())\">\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"] }] } });
+            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 LoroSegmentedControl {
     options = input.required(...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
@@ -2725,11 +2066,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()\">\n      <span class=\"loro-select__icon\">\n        <loro-icon [name]=\"icon()\" [size]=\"44\" [alt]=\"title()\" color=\"primary-deep\" />\n      </span>\n      <div class=\"loro-select__copy\">\n        <h3>{{ title() }} @if (badge()) {<loro-badge [label]=\"badge()\" variant=\"info\" />}</h3>\n        <p>{{ subtitle() }}</p>\n        <small>{{ meta() }}</small>\n      </div>\n      <div class=\"loro-select__side\">\n        @if (status()) {\n          <span class=\"loro-select__status\">{{ status() }}</span>\n        }\n        @if (actionLabel()) {\n          <loro-button [label]=\"actionLabel()\" variant=\"outline\" (buttonClick)=\"action.emit()\" />\n        }\n      </div>\n    </article>", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-select{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1.25rem;padding:1rem;border-top:1px solid var(--loro-border-subtle);background:transparent}.loro-select--selected{border:1px solid rgba(108,60,255,.28);border-radius:1rem;background:#6c3cff0a}.loro-select__icon{display:grid;width:5.2rem;height:5.2rem;place-items:center;border:1px solid var(--loro-border-subtle);border-radius:1rem;background:var(--loro-surface-muted)}h3,p,small{margin:0}h3{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;color:var(--loro-text-strong);font-size:1.15rem;font-weight:900}p{margin-top:.35rem;color:var(--loro-muted-strong);font-weight:700}small,.loro-select__status{color:var(--loro-muted);font-weight:700}.loro-select__side{display:flex;align-items:center;justify-content:flex-end;gap:1rem}@media(max-width:680px){.loro-select{grid-template-columns:5rem minmax(0,1fr);border:1px solid var(--loro-border-subtle);border-radius:1rem}.loro-select__side{grid-column:2;justify-content:flex-start}}\n"], dependencies: [{ kind: "component", type: LoroBadge, selector: "loro-badge", inputs: ["label", "variant"] }, { kind: "component", type: LoroButton, selector: "loro-button", inputs: ["label", "text", "icon", "iconContent", "iconMode", "iconSize", "iconButtonSize", "iconColor", "socialMobileCompact", "selected", "variant", "typeButton", "color", "size", "fullWidth", "buttonWidth", "disabled", "loading", "type", "formId", "ariaLabel", "ariaDescription"], outputs: ["buttonClick", "change", "sanChange"] }, { kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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 [text]=\"actionLabel()\" variant=\"secondary\" (buttonClick)=\"action.emit()\" />\n        }\n      </div>\n    </article>\n", 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: ["text", "icon", "iconColor", "iconOnly", "iconSize", "variant", "width", "ariaLabel", "ariaDescription"], outputs: ["buttonClick"] }, { kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroSelect, decorators: [{
             type: Component,
-            args: [{ selector: 'loro-select', standalone: true, imports: [LoroBadge, LoroButton, LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"loro-select\" [class.loro-select--selected]=\"selected()\">\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"] }]
+            args: [{ selector: 'loro-select', standalone: true, imports: [LoroBadge, LoroButton, LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"loro-select\" [class.loro-select--selected]=\"selected()\">\n      <span class=\"loro-select__icon\">\n        <loro-icon [name]=\"icon()\" [size]=\"44\" [alt]=\"title()\" color=\"primary-deep\" />\n      </span>\n      <div class=\"loro-select__copy\">\n        <h3>{{ title() }} @if (badge()) {<loro-badge [label]=\"badge()\" variant=\"info\" />}</h3>\n        <p>{{ subtitle() }}</p>\n        <small>{{ meta() }}</small>\n      </div>\n      <div class=\"loro-select__side\">\n        @if (status()) {\n          <span class=\"loro-select__status\">{{ status() }}</span>\n        }\n        @if (actionLabel()) {\n          <loro-button [text]=\"actionLabel()\" variant=\"secondary\" (buttonClick)=\"action.emit()\" />\n        }\n      </div>\n    </article>\n", 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) {
@@ -2766,137 +2107,400 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             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 {
-    label = input('Adjuntar captura', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    title = input('Haz clic para seleccionar un archivo o arrastra y suelta aqui', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-    description = input('Formatos: PNG, JPG, GIF, PDF (max. 10 MB)', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
-    accept = input('image/*,.pdf', ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
-    optional = input(true, ...(ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []));
-    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()\">\n      @if (label()) {\n        <span class=\"loro-upload__label\">{{ label() }} @if (optional()) {<small>Opcional</small>}</span>\n      }\n      <span class=\"loro-upload__drop\">\n        <loro-icon name=\"paperclip\" [size]=\"28\" alt=\"Adjuntar archivo\" color=\"primary\" />\n        <span class=\"loro-upload__copy\">\n          <span>{{ title() }}</span>\n          @if (description()) {\n            <small>{{ description() }}</small>\n          }\n        </span>\n        @if (compact()) {\n          <loro-icon name=\"chevron-right\" [size]=\"22\" alt=\"Seleccionar\" color=\"primary\" />\n        }\n        <input type=\"file\" [accept]=\"accept()\" (change)=\"fileSelected.emit($any($event.target).files?.[0] ?? null)\" />\n      </span>\n    </label>", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-upload{display:grid;gap:.7rem}.loro-upload__label{display:flex;gap:.75rem;color:var(--loro-text-strong);font-weight:900}.loro-upload__label small{color:var(--loro-muted);font-weight:700}.loro-upload__drop{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.85rem;min-height:4.4rem;padding:1rem;border:1px dashed var(--loro-border-strong);border-radius:var(--loro-radius-input);background:var(--loro-surface);color:var(--loro-muted-strong);cursor:pointer}.loro-upload--compact .loro-upload__drop{grid-template-columns:auto minmax(0,1fr) auto;border-style:solid}.loro-upload__copy{display:grid;gap:.15rem;font-weight:800;line-height:1.25}.loro-upload__copy small{color:var(--loro-muted);font-weight:650}input{position:absolute;inset:0;opacity:0;cursor:pointer}\n"], dependencies: [{ kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+const LORO_TOGGLE_DEFAULTS = {
+    checked: false,
+    disabled: false,
+    required: false,
+    invalid: false,
+    ariaLabel: 'Cambiar estado',
+};
+
+class LoroToggle {
+    checked = model(LORO_TOGGLE_DEFAULTS.checked, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    disabled = input(LORO_TOGGLE_DEFAULTS.disabled, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    required = input(LORO_TOGGLE_DEFAULTS.required, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    invalid = input(LORO_TOGGLE_DEFAULTS.invalid, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(LORO_TOGGLE_DEFAULTS.ariaLabel, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    isChecked = computed(() => this.checked(), ...(ngDevMode ? [{ debugName: "isChecked" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    toggle() {
+        if (this.isDisabled()) {
+            return;
+        }
+        this.checked.update((current) => !current);
+        this.touched.set(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: LoroToggle, isStandalone: true, selector: "loro-toggle", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, 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" }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"loro-toggle\"\n  [class.loro-toggle--checked]=\"isChecked()\"\n  [class.loro-toggle--disabled]=\"isDisabled()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-pressed]=\"isChecked()\"\n  (click)=\"toggle()\"\n>\n  <span class=\"loro-toggle__thumb\"></span>\n</button>\n", 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,box-shadow .16s ease}.loro-toggle:focus-visible{outline:2px solid var(--loro-focus-ring);outline-offset:2px}.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--disabled{cursor:not-allowed;opacity:.7}.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 .loro-toggle__thumb{transform:translate(1.75rem)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroUpload, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroToggle, decorators: [{
             type: Component,
-            args: [{ selector: 'loro-upload', standalone: true, imports: [LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"loro-upload\" [class.loro-upload--compact]=\"compact()\">\n      @if (label()) {\n        <span class=\"loro-upload__label\">{{ label() }} @if (optional()) {<small>Opcional</small>}</span>\n      }\n      <span class=\"loro-upload__drop\">\n        <loro-icon name=\"paperclip\" [size]=\"28\" alt=\"Adjuntar archivo\" color=\"primary\" />\n        <span class=\"loro-upload__copy\">\n          <span>{{ title() }}</span>\n          @if (description()) {\n            <small>{{ description() }}</small>\n          }\n        </span>\n        @if (compact()) {\n          <loro-icon name=\"chevron-right\" [size]=\"22\" alt=\"Seleccionar\" color=\"primary\" />\n        }\n        <input type=\"file\" [accept]=\"accept()\" (change)=\"fileSelected.emit($any($event.target).files?.[0] ?? null)\" />\n      </span>\n    </label>", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-upload{display:grid;gap:.7rem}.loro-upload__label{display:flex;gap:.75rem;color:var(--loro-text-strong);font-weight:900}.loro-upload__label small{color:var(--loro-muted);font-weight:700}.loro-upload__drop{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.85rem;min-height:4.4rem;padding:1rem;border:1px dashed var(--loro-border-strong);border-radius:var(--loro-radius-input);background:var(--loro-surface);color:var(--loro-muted-strong);cursor:pointer}.loro-upload--compact .loro-upload__drop{grid-template-columns:auto minmax(0,1fr) auto;border-style:solid}.loro-upload__copy{display:grid;gap:.15rem;font-weight:800;line-height:1.25}.loro-upload__copy small{color:var(--loro-muted);font-weight:650}input{position:absolute;inset:0;opacity:0;cursor:pointer}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], fileSelected: [{ type: i0.Output, args: ["fileSelected"] }] } });
+            args: [{ selector: 'loro-toggle', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  type=\"button\"\n  class=\"loro-toggle\"\n  [class.loro-toggle--checked]=\"isChecked()\"\n  [class.loro-toggle--disabled]=\"isDisabled()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-pressed]=\"isChecked()\"\n  (click)=\"toggle()\"\n>\n  <span class=\"loro-toggle__thumb\"></span>\n</button>\n", 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,box-shadow .16s ease}.loro-toggle:focus-visible{outline:2px solid var(--loro-focus-ring);outline-offset:2px}.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--disabled{cursor:not-allowed;opacity:.7}.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 .loro-toggle__thumb{transform:translate(1.75rem)}\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 }] }] } });
 
-class LoroModal {
-    document = inject(DOCUMENT);
-    dragStartY = 0;
-    dragStartTop = 0;
-    open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
-    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    placement = input('center', ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
-    dismissible = input(true, ...(ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []));
-    sheetDragToClose = input(true, ...(ngDevMode ? [{ debugName: "sheetDragToClose" }] : /* istanbul ignore next */ []));
-    sheetRestTop = input('', ...(ngDevMode ? [{ debugName: "sheetRestTop" }] : /* istanbul ignore next */ []));
-    showBackdrop = input(true, ...(ngDevMode ? [{ debugName: "showBackdrop" }] : /* istanbul ignore next */ []));
-    closeOnBackdrop = input(true, ...(ngDevMode ? [{ debugName: "closeOnBackdrop" }] : /* istanbul ignore next */ []));
-    modalClose = output();
-    sheetDragging = signal(false, ...(ngDevMode ? [{ debugName: "sheetDragging" }] : /* istanbul ignore next */ []));
-    sheetTop = signal(null, ...(ngDevMode ? [{ debugName: "sheetTop" }] : /* istanbul ignore next */ []));
-    sheetRestTopCss = computed(() => this.isSheetInteractionEnabled() ? `${this.collapsedSheetTop()}px` : null, ...(ngDevMode ? [{ debugName: "sheetRestTopCss" }] : /* istanbul ignore next */ []));
-    sheetDragOffsetCss = computed(() => {
-        if (!this.isSheetInteractionEnabled()) {
-            return null;
+const LORO_CARD_SELECTOR_DEFAULT_ACTION = {
+    ariaLabel: 'Eliminar archivo',
+    icon: 'x',
+    iconSize: 16,
+};
+
+class LoroCardSelector {
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    mediaKind = input('other', ...(ngDevMode ? [{ debugName: "mediaKind" }] : /* istanbul ignore next */ []));
+    mediaImage = input(null, ...(ngDevMode ? [{ debugName: "mediaImage" }] : /* istanbul ignore next */ []));
+    action = input(LORO_CARD_SELECTOR_DEFAULT_ACTION, ...(ngDevMode ? [{ debugName: "action" }] : /* istanbul ignore next */ []));
+    actionClick = output();
+    hasMediaImage = computed(() => Boolean(this.mediaImage()), ...(ngDevMode ? [{ debugName: "hasMediaImage" }] : /* istanbul ignore next */ []));
+    resolvedMediaLabel = computed(() => {
+        switch (this.mediaKind()) {
+            case 'image':
+                return 'IMG';
+            case 'pdf':
+                return 'PDF';
+            case 'word':
+                return 'DOC';
+            case 'archive':
+                return 'ZIP';
+            default:
+                return 'FILE';
         }
-        return `${Math.max(0, this.currentSheetTop() - this.collapsedSheetTop())}px`;
-    }, ...(ngDevMode ? [{ debugName: "sheetDragOffsetCss" }] : /* istanbul ignore next */ []));
-    backdropOpacity = computed(() => {
-        if (!this.isSheetInteractionEnabled()) {
-            return '1';
+    }, ...(ngDevMode ? [{ debugName: "resolvedMediaLabel" }] : /* istanbul ignore next */ []));
+    resolvedAction = computed(() => this.action(), ...(ngDevMode ? [{ debugName: "resolvedAction" }] : /* istanbul ignore next */ []));
+    onActionClick() {
+        this.actionClick.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroCardSelector, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroCardSelector, isStandalone: true, selector: "loro-card-selector", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, mediaKind: { classPropertyName: "mediaKind", publicName: "mediaKind", isSignal: true, isRequired: false, transformFunction: null }, mediaImage: { classPropertyName: "mediaImage", publicName: "mediaImage", isSignal: true, isRequired: false, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: "<article class=\"loro-card-selector\">\n  <span class=\"loro-card-selector__media\" aria-hidden=\"true\">\n    @if (hasMediaImage()) {\n      <img class=\"loro-card-selector__image\" [src]=\"mediaImage()!\" [alt]=\"title()\" />\n    } @else {\n      <span class=\"loro-card-selector__badge\" [class]=\"'loro-card-selector__badge loro-card-selector__badge--' + mediaKind()\">\n        {{ resolvedMediaLabel() }}\n      </span>\n    }\n  </span>\n\n  <span class=\"loro-card-selector__copy\">\n    <span class=\"loro-card-selector__title\">{{ title() }}</span>\n    @if (description()) {\n      <span class=\"loro-card-selector__description\">{{ description() }}</span>\n    }\n  </span>\n\n  <span class=\"loro-card-selector__action\">\n    <loro-button\n      variant=\"tertiary\"\n      [iconOnly]=\"true\"\n      [icon]=\"resolvedAction().icon\"\n      [iconSize]=\"resolvedAction().iconSize ?? 16\"\n      iconColor=\"var(--loro-danger-text)\"\n      [ariaLabel]=\"resolvedAction().ariaLabel\"\n      (buttonClick)=\"onActionClick()\"\n    />\n  </span>\n</article>\n", styles: [":host{display:block;min-width:0;font-family:var(--loro-font-brand)}.loro-card-selector{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.9rem;width:100%;min-width:0;padding:.75rem;border:1px solid var(--loro-border-subtle);border-radius:1.25rem;background:var(--loro-surface);box-shadow:var(--loro-shadow-soft)}.loro-card-selector__media{display:grid;width:4.6rem;height:4.6rem;overflow:hidden;border-radius:1rem;place-items:center;background:color-mix(in srgb,var(--loro-primary-500) 8%,white)}.loro-card-selector__image{display:block;width:100%;height:100%;object-fit:cover}.loro-card-selector__badge{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:1rem;color:var(--loro-primary-700);font-size:.85rem;font-weight:900;letter-spacing:.04em}.loro-card-selector__badge--image,.loro-card-selector__badge--word{background:color-mix(in srgb,var(--loro-primary-500) 12%,white)}.loro-card-selector__badge--pdf{background:color-mix(in srgb,var(--loro-danger-text) 10%,white);color:var(--loro-danger-text)}.loro-card-selector__badge--archive{background:color-mix(in srgb,var(--loro-warning) 12%,white);color:#986c00}.loro-card-selector__badge--other{background:var(--loro-surface-muted);color:var(--loro-muted-strong)}.loro-card-selector__copy{display:grid;gap:.15rem;min-width:0}.loro-card-selector__title{overflow:hidden;color:var(--loro-text-strong);font-size:.92rem;font-weight:850;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}.loro-card-selector__description{color:var(--loro-muted);font-size:.82rem;font-weight:700;line-height:1.2;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis;word-break:break-word}.loro-card-selector__action{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}\n"], dependencies: [{ kind: "component", type: LoroButton, selector: "loro-button", inputs: ["text", "icon", "iconColor", "iconOnly", "iconSize", "variant", "width", "ariaLabel", "ariaDescription"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroCardSelector, decorators: [{
+            type: Component,
+            args: [{ selector: 'loro-card-selector', standalone: true, imports: [LoroButton], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"loro-card-selector\">\n  <span class=\"loro-card-selector__media\" aria-hidden=\"true\">\n    @if (hasMediaImage()) {\n      <img class=\"loro-card-selector__image\" [src]=\"mediaImage()!\" [alt]=\"title()\" />\n    } @else {\n      <span class=\"loro-card-selector__badge\" [class]=\"'loro-card-selector__badge loro-card-selector__badge--' + mediaKind()\">\n        {{ resolvedMediaLabel() }}\n      </span>\n    }\n  </span>\n\n  <span class=\"loro-card-selector__copy\">\n    <span class=\"loro-card-selector__title\">{{ title() }}</span>\n    @if (description()) {\n      <span class=\"loro-card-selector__description\">{{ description() }}</span>\n    }\n  </span>\n\n  <span class=\"loro-card-selector__action\">\n    <loro-button\n      variant=\"tertiary\"\n      [iconOnly]=\"true\"\n      [icon]=\"resolvedAction().icon\"\n      [iconSize]=\"resolvedAction().iconSize ?? 16\"\n      iconColor=\"var(--loro-danger-text)\"\n      [ariaLabel]=\"resolvedAction().ariaLabel\"\n      (buttonClick)=\"onActionClick()\"\n    />\n  </span>\n</article>\n", styles: [":host{display:block;min-width:0;font-family:var(--loro-font-brand)}.loro-card-selector{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.9rem;width:100%;min-width:0;padding:.75rem;border:1px solid var(--loro-border-subtle);border-radius:1.25rem;background:var(--loro-surface);box-shadow:var(--loro-shadow-soft)}.loro-card-selector__media{display:grid;width:4.6rem;height:4.6rem;overflow:hidden;border-radius:1rem;place-items:center;background:color-mix(in srgb,var(--loro-primary-500) 8%,white)}.loro-card-selector__image{display:block;width:100%;height:100%;object-fit:cover}.loro-card-selector__badge{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:1rem;color:var(--loro-primary-700);font-size:.85rem;font-weight:900;letter-spacing:.04em}.loro-card-selector__badge--image,.loro-card-selector__badge--word{background:color-mix(in srgb,var(--loro-primary-500) 12%,white)}.loro-card-selector__badge--pdf{background:color-mix(in srgb,var(--loro-danger-text) 10%,white);color:var(--loro-danger-text)}.loro-card-selector__badge--archive{background:color-mix(in srgb,var(--loro-warning) 12%,white);color:#986c00}.loro-card-selector__badge--other{background:var(--loro-surface-muted);color:var(--loro-muted-strong)}.loro-card-selector__copy{display:grid;gap:.15rem;min-width:0}.loro-card-selector__title{overflow:hidden;color:var(--loro-text-strong);font-size:.92rem;font-weight:850;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}.loro-card-selector__description{color:var(--loro-muted);font-size:.82rem;font-weight:700;line-height:1.2;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis;word-break:break-word}.loro-card-selector__action{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], mediaKind: [{ type: i0.Input, args: [{ isSignal: true, alias: "mediaKind", required: false }] }], mediaImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "mediaImage", required: false }] }], action: [{ type: i0.Input, args: [{ isSignal: true, alias: "action", required: false }] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }] } });
+
+const LORO_UPLOAD_DEFAULTS = {
+    label: 'Adjuntar archivos',
+    title: 'Haz clic para seleccionar archivos o arrastra y suelta aquí',
+    description: 'PNG, JPG, GIF o PDF. Máx. 10 MB por archivo',
+    errorMessage: '',
+    variant: 'default',
+    multiple: true,
+    maxFiles: 10,
+};
+
+const LORO_FILE_KEY_SEPARATOR = '-';
+const formatLoroFileKey = (file) => `${file.name}${LORO_FILE_KEY_SEPARATOR}${file.size}${LORO_FILE_KEY_SEPARATOR}${file.lastModified}`;
+const dedupeLoroFiles = (files) => {
+    const seen = new Set();
+    return files.filter((file) => {
+        const key = formatLoroFileKey(file);
+        if (seen.has(key)) {
+            return false;
         }
-        const collapsedTop = this.collapsedSheetTop();
-        const progress = (this.currentSheetTop() - collapsedTop) / Math.max(1, this.maxSheetTop() - collapsedTop);
-        return String(0.42 - Math.min(0.18, progress * 0.18));
-    }, ...(ngDevMode ? [{ debugName: "backdropOpacity" }] : /* istanbul ignore next */ []));
-    constructor() {
-        effect((onCleanup) => {
-            if (this.open()) {
-                this.resetSheetState();
-                this.lockDocumentScroll(onCleanup);
-            }
-        });
+        seen.add(key);
+        return true;
+    });
+};
+const normalizeLoroMaxFiles = (maxFiles, multiple) => {
+    if (!multiple) {
+        return 1;
     }
-    requestClose() {
-        this.resetSheetState();
-        this.modalClose.emit();
+    return Math.max(1, Math.floor(maxFiles));
+};
+
+const formatLoroFileName = (name, maxLength = 44) => {
+    const normalizedName = name.trim().replace(/\s+/g, ' ');
+    if (normalizedName.length <= maxLength) {
+        return normalizedName;
+    }
+    const lastDotIndex = normalizedName.lastIndexOf('.');
+    const extension = lastDotIndex > 0 ? normalizedName.slice(lastDotIndex) : '';
+    const baseName = lastDotIndex > 0 ? normalizedName.slice(0, lastDotIndex) : normalizedName;
+    const availableLength = Math.max(maxLength - extension.length - 1, 16);
+    const trimmedBase = baseName.slice(0, availableLength).trimEnd();
+    return `${trimmedBase}…${extension}`;
+};
+
+let nextLoroUploadId = 0;
+class LoroUpload {
+    destroyRef = inject(DestroyRef);
+    control = viewChild('control', ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
+    previewUrls = new Map();
+    cleanupPreviewUrls = this.destroyRef.onDestroy(() => {
+        for (const url of this.previewUrls.values()) {
+            URL.revokeObjectURL(url);
+        }
+        this.previewUrls.clear();
+    });
+    label = input(LORO_UPLOAD_DEFAULTS.label, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    title = input(LORO_UPLOAD_DEFAULTS.title, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    description = input(LORO_UPLOAD_DEFAULTS.description, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    errorMessage = input(LORO_UPLOAD_DEFAULTS.errorMessage, ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    variant = input(LORO_UPLOAD_DEFAULTS.variant, ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    multiple = input(LORO_UPLOAD_DEFAULTS.multiple, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    maxFiles = input(LORO_UPLOAD_DEFAULTS.maxFiles, ...(ngDevMode ? [{ debugName: "maxFiles" }] : /* istanbul ignore next */ []));
+    errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    value = model([], ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    isDragging = model(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
+    limitErrorMessage = signal('', ...(ngDevMode ? [{ debugName: "limitErrorMessage" }] : /* istanbul ignore next */ []));
+    uploadId = `loro-upload-${++nextLoroUploadId}`;
+    errorText = computed(() => String(this.errors()[0]?.message ?? '').trim(), ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
+    resolvedMaxFiles = computed(() => normalizeLoroMaxFiles(this.maxFiles(), this.multiple()), ...(ngDevMode ? [{ debugName: "resolvedMaxFiles" }] : /* istanbul ignore next */ []));
+    resolvedVariant = computed(() => {
+        if (this.isLimitExceeded()) {
+            return 'error';
+        }
+        if (this.variant() !== 'default') {
+            return this.variant();
+        }
+        return this.hasFiles() ? 'success' : 'default';
+    }, ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
+    hasFiles = computed(() => this.value().length > 0, ...(ngDevMode ? [{ debugName: "hasFiles" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.resolvedVariant() === 'disabled', ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    isLimitExceeded = computed(() => this.limitErrorMessage().length > 0, ...(ngDevMode ? [{ debugName: "isLimitExceeded" }] : /* istanbul ignore next */ []));
+    resolvedErrorMessage = computed(() => {
+        const limitMessage = this.limitErrorMessage().trim();
+        if (limitMessage) {
+            return limitMessage;
+        }
+        if (this.variant() !== 'error') {
+            return '';
+        }
+        const manualMessage = String(this.errorMessage() ?? '').trim();
+        if (manualMessage) {
+            return manualMessage;
+        }
+        return this.errorText();
+    }, ...(ngDevMode ? [{ debugName: "resolvedErrorMessage" }] : /* istanbul ignore next */ []));
+    displayFiles = computed(() => this.value().map((file) => ({
+        file,
+        kind: this.resolveFileKind(file),
+        displayName: formatLoroFileName(file.name),
+        sizeLabel: this.formatFileSize(file.size),
+        previewUrl: this.getPreviewUrl(file),
+    })), ...(ngDevMode ? [{ debugName: "displayFiles" }] : /* istanbul ignore next */ []));
+    focus(options) {
+        this.control()?.nativeElement.focus(options);
     }
-    onCloseClick(event) {
+    onDragOver(event) {
+        if (this.isDisabled()) {
+            return;
+        }
         event.preventDefault();
-        event.stopPropagation();
-        this.requestClose();
+        this.isDragging.set(true);
     }
-    onSheetTouchStart(event, dialog) {
-        if (!this.isSheetInteractionEnabled() || event.touches.length !== 1 || !this.isDragZone(event, dialog)) {
+    onDragLeave(event) {
+        if (this.isDisabled()) {
             return;
         }
-        this.sheetDragging.set(true);
-        this.dragStartY = event.touches[0].clientY;
-        this.dragStartTop = this.currentSheetTop();
-        event.preventDefault();
+        if (event.currentTarget === event.target) {
+            this.isDragging.set(false);
+        }
     }
-    onSheetTouchMove(event) {
-        if (!this.sheetDragging() || !this.isSheetInteractionEnabled() || event.touches.length !== 1) {
+    onDrop(event) {
+        if (this.isDisabled()) {
             return;
         }
-        const deltaY = Math.max(0, event.touches[0].clientY - this.dragStartY);
-        const nextTop = this.dragStartTop + deltaY;
-        this.sheetTop.set(this.clampSheetTop(nextTop));
         event.preventDefault();
+        this.isDragging.set(false);
+        this.commitFiles(event.dataTransfer?.files);
     }
-    onSheetTouchEnd() {
-        if (!this.sheetDragging()) {
+    onInputChange(event) {
+        if (this.isDisabled()) {
             return;
         }
-        this.sheetDragging.set(false);
-        const currentTop = this.currentSheetTop();
-        const collapsedTop = this.collapsedSheetTop();
-        if (currentTop >= collapsedTop + 64) {
-            this.requestClose();
+        const target = event.target;
+        if (!(target instanceof HTMLInputElement)) {
+            return;
+        }
+        this.commitFiles(target.files);
+        target.value = '';
+    }
+    removeFile(index) {
+        this.setFiles(this.value().filter((_, fileIndex) => fileIndex !== index));
+    }
+    trackByFileName(index, file) {
+        return `${file.name}-${file.size}-${index}`;
+    }
+    commitFiles(fileList) {
+        if (!fileList || fileList.length === 0) {
             return;
         }
-        this.sheetTop.set(collapsedTop);
+        const incomingFiles = Array.from(fileList);
+        const maxFiles = this.resolvedMaxFiles();
+        const mergedFiles = this.multiple() ? [...this.value(), ...incomingFiles] : incomingFiles.slice(0, 1);
+        const dedupedFiles = dedupeLoroFiles(mergedFiles);
+        const nextFiles = dedupedFiles.slice(0, maxFiles);
+        const limitExceeded = this.multiple() ? dedupedFiles.length > maxFiles : false;
+        this.setFiles(nextFiles, limitExceeded);
+    }
+    setFiles(files, limitExceeded = false) {
+        this.syncPreviewUrls(files);
+        this.value.set([...files]);
+        this.limitErrorMessage.set(limitExceeded ? `Puedes subir como máximo ${this.resolvedMaxFiles()} archivos.` : '');
+        this.touched.set(true);
     }
-    resetSheetState() {
-        this.sheetDragging.set(false);
-        this.sheetTop.set(this.isSheetInteractionEnabled() ? this.collapsedSheetTop() : null);
+    formatFileSize(bytes) {
+        const sizeInMb = bytes / 1024 / 1024;
+        return `${sizeInMb.toFixed(sizeInMb >= 10 ? 0 : 1)} MB`;
     }
-    currentSheetTop() {
-        return this.sheetTop() ?? this.collapsedSheetTop();
+    resolveFileKind(file) {
+        const extension = file.name.split('.').pop()?.toLowerCase() ?? '';
+        const imageExtensions = new Set(['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp', 'svg']);
+        const wordExtensions = new Set(['doc', 'docx', 'odt', 'rtf']);
+        const archiveExtensions = new Set(['zip', 'rar', '7z', 'tar', 'gz']);
+        if (file.type.startsWith('image/') || imageExtensions.has(extension)) {
+            return 'image';
+        }
+        if (file.type === 'application/pdf' || extension === 'pdf') {
+            return 'pdf';
+        }
+        if (wordExtensions.has(extension)) {
+            return 'word';
+        }
+        if (archiveExtensions.has(extension)) {
+            return 'archive';
+        }
+        return 'other';
     }
-    clampSheetTop(value) {
-        return Math.min(Math.max(value, this.collapsedSheetTop()), this.maxSheetTop());
+    getPreviewUrl(file) {
+        if (this.resolveFileKind(file) !== 'image') {
+            return null;
+        }
+        const key = formatLoroFileKey(file);
+        const existing = this.previewUrls.get(key);
+        if (existing) {
+            return existing;
+        }
+        const url = URL.createObjectURL(file);
+        this.previewUrls.set(key, url);
+        return url;
     }
-    collapsedSheetTop() {
-        const safeTop = this.safeAreaInsetTop();
-        return Math.max(safeTop + 12, Math.min(88, Math.round(this.viewportHeight() * 0.1)));
+    syncPreviewUrls(files) {
+        const nextKeys = new Set(files.map((file) => formatLoroFileKey(file)));
+        for (const [key, url] of this.previewUrls.entries()) {
+            if (nextKeys.has(key)) {
+                continue;
+            }
+            URL.revokeObjectURL(url);
+            this.previewUrls.delete(key);
+        }
     }
-    maxSheetTop() {
-        return this.viewportHeight() - 56;
+    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 }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, isDragging: { classPropertyName: "isDragging", publicName: "isDragging", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", value: "valueChange", isDragging: "isDraggingChange" }, viewQueries: [{ propertyName: "control", first: true, predicate: ["control"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"loro-upload\"\n  [class.loro-upload--dragging]=\"isDragging()\"\n  [class.loro-upload--selected]=\"hasFiles()\"\n  [class.loro-upload--error]=\"resolvedVariant() === 'error'\"\n  [class.loro-upload--success]=\"resolvedVariant() === 'success'\"\n  [class.loro-upload--info]=\"resolvedVariant() === 'info'\"\n  [class.loro-upload--disabled]=\"resolvedVariant() === 'disabled'\"\n>\n  @if (label()) {\n    <button type=\"button\" class=\"loro-upload__label\" (click)=\"focus()\">{{ label() }}</button>\n  }\n\n  <label\n    class=\"loro-upload__drop\"\n    [attr.for]=\"uploadId\"\n    (dragover)=\"onDragOver($event)\"\n    (dragleave)=\"onDragLeave($event)\"\n    (drop)=\"onDrop($event)\"\n  >\n    <span class=\"loro-upload__icon\">\n      <loro-icon name=\"paperclip\" [size]=\"24\" alt=\"\" color=\"primary\" />\n    </span>\n\n    <span class=\"loro-upload__copy\">\n      <span class=\"loro-upload__title\">{{ title() }}</span>\n      @if (description()) {\n        <small class=\"loro-upload__description\">{{ description() }}</small>\n      }\n    </span>\n  </label>\n\n  <input\n    #control\n    [id]=\"uploadId\"\n    class=\"loro-upload__input\"\n    type=\"file\"\n    [disabled]=\"isDisabled()\"\n    [multiple]=\"multiple() && resolvedMaxFiles() > 1\"\n    (change)=\"onInputChange($event)\"\n  />\n\n  @if (resolvedErrorMessage()) {\n    <span class=\"loro-upload__error\">\n      <span class=\"loro-upload__error-icon\">\n        <loro-icon name=\"icon-warning\" [size]=\"18\" alt=\"\" color=\"danger\" />\n      </span>\n      <span class=\"loro-upload__error-message\">{{ resolvedErrorMessage() }}</span>\n    </span>\n  }\n\n  @if (hasFiles()) {\n    <div class=\"loro-upload__files\">\n    @for (entry of displayFiles(); track trackByFileName($index, entry.file)) {\n      <loro-card-selector\n        [title]=\"entry.displayName\"\n        [description]=\"entry.sizeLabel\"\n        [mediaKind]=\"entry.kind\"\n        [mediaImage]=\"entry.previewUrl\"\n        [action]=\"{ ariaLabel: 'Eliminar archivo', icon: 'x', iconSize: 16 }\"\n        (actionClick)=\"removeFile($index)\"\n      />\n    }\n    </div>\n  }\n</div>\n", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-upload{--loro-upload-border: var(--loro-border-subtle);--loro-upload-surface: var(--loro-surface);--loro-upload-surface-hover: var(--loro-surface-elevated);--loro-upload-surface-selected: var(--loro-surface-muted);--loro-upload-surface-error: var(--loro-danger-surface);display:grid;gap:.5rem}.loro-upload__label{display:inline-flex;width:fit-content;padding:0;border:0;background:transparent;color:var(--loro-text-strong);font-size:.92rem;font-weight:900;line-height:1.2;cursor:pointer;text-align:left}.loro-upload__drop{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.85rem;min-height:4.1rem;padding:.9rem .95rem;border:1px dashed var(--loro-upload-border);border-radius:var(--loro-radius-input);background:var(--loro-upload-surface);color:var(--loro-muted-strong);cursor:pointer;transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease}.loro-upload__drop:hover{background:var(--loro-upload-surface-hover);border-color:var(--loro-border-strong)}.loro-upload__icon{display:inline-flex;align-items:center;justify-content:center;width:2.35rem;height:2.35rem;border-radius:999px;color:var(--loro-primary-700)}.loro-upload__copy{display:grid;gap:.15rem;min-width:0}.loro-upload__title{color:var(--loro-text);font-size:.92rem;font-weight:800;line-height:1.25}.loro-upload__description{color:var(--loro-muted);font-size:.82rem;font-weight:650;line-height:1.3}.loro-upload__input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;border:0;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}.loro-upload__error{display:flex;align-items:center;gap:.45rem;min-width:0;padding-left:.15rem}.loro-upload__error-icon{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:1.15rem;height:1.15rem;margin-top:.15rem;color:var(--loro-danger-text)}.loro-upload__error-message{min-width:0;color:var(--loro-danger-text);font-size:.82rem;font-weight:750;line-height:1.35}.loro-upload--selected .loro-upload__drop{border-style:solid;background:var(--loro-upload-surface-selected)}.loro-upload--success .loro-upload__drop{border-color:color-mix(in srgb,var(--loro-success, #1f9d55) 28%,var(--loro-border-subtle));background:color-mix(in srgb,var(--loro-success, #1f9d55) 8%,var(--loro-surface));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-success, #1f9d55) 10%,transparent)}.loro-upload--success .loro-upload__title{color:color-mix(in srgb,var(--loro-success, #1f9d55) 70%,var(--loro-text))}.loro-upload--info .loro-upload__drop{border-color:color-mix(in srgb,var(--loro-primary-500) 24%,var(--loro-border-subtle));background:color-mix(in srgb,var(--loro-primary-200) 28%,var(--loro-surface))}.loro-upload--info .loro-upload__title{color:var(--loro-primary-700)}.loro-upload--dragging .loro-upload__drop{border-color:var(--loro-primary-500);background:color-mix(in srgb,var(--loro-primary-200) 42%,white);box-shadow:0 0 0 4px color-mix(in srgb,var(--loro-primary-500) 10%,transparent);transform:translateY(-.06rem)}.loro-upload--error .loro-upload__drop{border-color:var(--loro-danger-text);background:var(--loro-upload-surface-error)}.loro-upload--error .loro-upload__title,.loro-upload--error .loro-upload__description,.loro-upload--error .loro-upload__label{color:var(--loro-danger-text)}.loro-upload--disabled{opacity:.62;pointer-events:none}.loro-upload--disabled .loro-upload__drop{border-color:var(--loro-border-soft);background:var(--loro-surface-muted);box-shadow:none;transform:none}.loro-upload--disabled .loro-upload__icon,.loro-upload--disabled .loro-upload__title,.loro-upload--disabled .loro-upload__description,.loro-upload--disabled .loro-upload__label{color:var(--loro-muted)}.loro-upload__files{display:grid;gap:.5rem}\n"], dependencies: [{ kind: "component", type: LoroCardSelector, selector: "loro-card-selector", inputs: ["title", "description", "mediaKind", "mediaImage", "action"], outputs: ["actionClick"] }, { kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroUpload, decorators: [{
+            type: Component,
+            args: [{ selector: 'loro-upload', standalone: true, imports: [LoroCardSelector, LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"loro-upload\"\n  [class.loro-upload--dragging]=\"isDragging()\"\n  [class.loro-upload--selected]=\"hasFiles()\"\n  [class.loro-upload--error]=\"resolvedVariant() === 'error'\"\n  [class.loro-upload--success]=\"resolvedVariant() === 'success'\"\n  [class.loro-upload--info]=\"resolvedVariant() === 'info'\"\n  [class.loro-upload--disabled]=\"resolvedVariant() === 'disabled'\"\n>\n  @if (label()) {\n    <button type=\"button\" class=\"loro-upload__label\" (click)=\"focus()\">{{ label() }}</button>\n  }\n\n  <label\n    class=\"loro-upload__drop\"\n    [attr.for]=\"uploadId\"\n    (dragover)=\"onDragOver($event)\"\n    (dragleave)=\"onDragLeave($event)\"\n    (drop)=\"onDrop($event)\"\n  >\n    <span class=\"loro-upload__icon\">\n      <loro-icon name=\"paperclip\" [size]=\"24\" alt=\"\" color=\"primary\" />\n    </span>\n\n    <span class=\"loro-upload__copy\">\n      <span class=\"loro-upload__title\">{{ title() }}</span>\n      @if (description()) {\n        <small class=\"loro-upload__description\">{{ description() }}</small>\n      }\n    </span>\n  </label>\n\n  <input\n    #control\n    [id]=\"uploadId\"\n    class=\"loro-upload__input\"\n    type=\"file\"\n    [disabled]=\"isDisabled()\"\n    [multiple]=\"multiple() && resolvedMaxFiles() > 1\"\n    (change)=\"onInputChange($event)\"\n  />\n\n  @if (resolvedErrorMessage()) {\n    <span class=\"loro-upload__error\">\n      <span class=\"loro-upload__error-icon\">\n        <loro-icon name=\"icon-warning\" [size]=\"18\" alt=\"\" color=\"danger\" />\n      </span>\n      <span class=\"loro-upload__error-message\">{{ resolvedErrorMessage() }}</span>\n    </span>\n  }\n\n  @if (hasFiles()) {\n    <div class=\"loro-upload__files\">\n    @for (entry of displayFiles(); track trackByFileName($index, entry.file)) {\n      <loro-card-selector\n        [title]=\"entry.displayName\"\n        [description]=\"entry.sizeLabel\"\n        [mediaKind]=\"entry.kind\"\n        [mediaImage]=\"entry.previewUrl\"\n        [action]=\"{ ariaLabel: 'Eliminar archivo', icon: 'x', iconSize: 16 }\"\n        (actionClick)=\"removeFile($index)\"\n      />\n    }\n    </div>\n  }\n</div>\n", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-upload{--loro-upload-border: var(--loro-border-subtle);--loro-upload-surface: var(--loro-surface);--loro-upload-surface-hover: var(--loro-surface-elevated);--loro-upload-surface-selected: var(--loro-surface-muted);--loro-upload-surface-error: var(--loro-danger-surface);display:grid;gap:.5rem}.loro-upload__label{display:inline-flex;width:fit-content;padding:0;border:0;background:transparent;color:var(--loro-text-strong);font-size:.92rem;font-weight:900;line-height:1.2;cursor:pointer;text-align:left}.loro-upload__drop{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.85rem;min-height:4.1rem;padding:.9rem .95rem;border:1px dashed var(--loro-upload-border);border-radius:var(--loro-radius-input);background:var(--loro-upload-surface);color:var(--loro-muted-strong);cursor:pointer;transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease}.loro-upload__drop:hover{background:var(--loro-upload-surface-hover);border-color:var(--loro-border-strong)}.loro-upload__icon{display:inline-flex;align-items:center;justify-content:center;width:2.35rem;height:2.35rem;border-radius:999px;color:var(--loro-primary-700)}.loro-upload__copy{display:grid;gap:.15rem;min-width:0}.loro-upload__title{color:var(--loro-text);font-size:.92rem;font-weight:800;line-height:1.25}.loro-upload__description{color:var(--loro-muted);font-size:.82rem;font-weight:650;line-height:1.3}.loro-upload__input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;border:0;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}.loro-upload__error{display:flex;align-items:center;gap:.45rem;min-width:0;padding-left:.15rem}.loro-upload__error-icon{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:1.15rem;height:1.15rem;margin-top:.15rem;color:var(--loro-danger-text)}.loro-upload__error-message{min-width:0;color:var(--loro-danger-text);font-size:.82rem;font-weight:750;line-height:1.35}.loro-upload--selected .loro-upload__drop{border-style:solid;background:var(--loro-upload-surface-selected)}.loro-upload--success .loro-upload__drop{border-color:color-mix(in srgb,var(--loro-success, #1f9d55) 28%,var(--loro-border-subtle));background:color-mix(in srgb,var(--loro-success, #1f9d55) 8%,var(--loro-surface));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-success, #1f9d55) 10%,transparent)}.loro-upload--success .loro-upload__title{color:color-mix(in srgb,var(--loro-success, #1f9d55) 70%,var(--loro-text))}.loro-upload--info .loro-upload__drop{border-color:color-mix(in srgb,var(--loro-primary-500) 24%,var(--loro-border-subtle));background:color-mix(in srgb,var(--loro-primary-200) 28%,var(--loro-surface))}.loro-upload--info .loro-upload__title{color:var(--loro-primary-700)}.loro-upload--dragging .loro-upload__drop{border-color:var(--loro-primary-500);background:color-mix(in srgb,var(--loro-primary-200) 42%,white);box-shadow:0 0 0 4px color-mix(in srgb,var(--loro-primary-500) 10%,transparent);transform:translateY(-.06rem)}.loro-upload--error .loro-upload__drop{border-color:var(--loro-danger-text);background:var(--loro-upload-surface-error)}.loro-upload--error .loro-upload__title,.loro-upload--error .loro-upload__description,.loro-upload--error .loro-upload__label{color:var(--loro-danger-text)}.loro-upload--disabled{opacity:.62;pointer-events:none}.loro-upload--disabled .loro-upload__drop{border-color:var(--loro-border-soft);background:var(--loro-surface-muted);box-shadow:none;transform:none}.loro-upload--disabled .loro-upload__icon,.loro-upload--disabled .loro-upload__title,.loro-upload--disabled .loro-upload__description,.loro-upload--disabled .loro-upload__label{color:var(--loro-muted)}.loro-upload__files{display:grid;gap:.5rem}\n"] }]
+        }], propDecorators: { control: [{ type: i0.ViewChild, args: ['control', { isSignal: true }] }], 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 }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", 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"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], isDragging: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDragging", required: false }] }, { type: i0.Output, args: ["isDraggingChange"] }] } });
+
+/**
+ * Minimal touch-gesture helper for the modal sheet.
+ *
+ * Keeps swipe state isolated from the component so the modal can focus on
+ * rendering and close orchestration.
+ */
+class LoroModalSwipeService {
+    startY = null;
+    currentY = null;
+    /** Starts tracking a touch gesture only when it comes from a finger. */
+    begin(pointerType, clientY) {
+        if (pointerType !== 'touch') {
+            return;
+        }
+        this.startY = clientY;
+        this.currentY = clientY;
     }
-    viewportHeight() {
-        const win = this.document.defaultView;
-        if (!win) {
-            return 844;
+    /** Updates the current finger position while the drag is active. */
+    update(pointerType, clientY) {
+        if (pointerType !== 'touch' || this.startY === null) {
+            return;
         }
-        const visualHeight = win.visualViewport?.height ?? 0;
-        const layoutHeight = Math.max(win.innerHeight, this.document.documentElement.clientHeight);
-        if (visualHeight > 0 && visualHeight < layoutHeight * 0.75) {
-            return visualHeight;
+        this.currentY = clientY;
+    }
+    /**
+     * Resolves the gesture and returns whether the sheet should close.
+     * The service resets itself so the caller does not need extra cleanup.
+     */
+    finish(threshold) {
+        if (this.startY === null || this.currentY === null) {
+            this.reset();
+            return false;
         }
-        return Math.max(visualHeight, layoutHeight);
+        const deltaY = this.currentY - this.startY;
+        this.reset();
+        return deltaY >= threshold;
     }
-    safeAreaInsetTop() {
-        const win = this.document.defaultView;
-        if (!win) {
+    /** Clears the internal gesture state. */
+    reset() {
+        this.startY = null;
+        this.currentY = null;
+    }
+    /** Returns the current drag translation with a hard cap for stability. */
+    offset(maxOffset) {
+        if (this.startY === null || this.currentY === null) {
             return 0;
         }
-        return Number.parseFloat(win.getComputedStyle(this.document.documentElement).getPropertyValue('env(safe-area-inset-top)')) || 0;
+        const deltaY = Math.max(0, this.currentY - this.startY);
+        return Math.min(deltaY, maxOffset);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroModalSwipeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroModalSwipeService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroModalSwipeService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class LoroModal {
+    document = inject(DOCUMENT);
+    swipe = inject(LoroModalSwipeService);
+    /** Mobile swipe closes after a deliberate downward pull. */
+    closeDragThreshold = 72;
+    /** Keeps body/html locked while the modal is open. */
+    lockScrollEffect = effect((onCleanup) => {
+        if (this.open()) {
+            this.lockDocumentScroll(onCleanup);
+        }
+    }, ...(ngDevMode ? [{ debugName: "lockScrollEffect" }] : /* istanbul ignore next */ []));
+    open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    backdrop = input(true, ...(ngDevMode ? [{ debugName: "backdrop" }] : /* istanbul ignore next */ []));
+    modalClose = output();
+    /** Tracks the sheet translation so the panel follows the finger. */
+    dragTranslateY = signal(0, ...(ngDevMode ? [{ debugName: "dragTranslateY" }] : /* istanbul ignore next */ []));
+    /** Disables the transition while the finger is down. */
+    isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
+    /** Applies the current drag offset without mutating layout flow. */
+    dialogTransform = computed(() => {
+        const offset = this.dragTranslateY();
+        return offset > 0 ? `translateY(${offset}px)` : 'translateY(0)';
+    }, ...(ngDevMode ? [{ debugName: "dialogTransform" }] : /* istanbul ignore next */ []));
+    requestClose() {
+        this.modalClose.emit();
+    }
+    /** Starts the swipe gesture only for touch pointers. */
+    onDragStart(event) {
+        this.swipe.begin(event.pointerType, event.clientY);
+        this.dragTranslateY.set(0);
+        this.isDragging.set(true);
+    }
+    /** Keeps the dialog aligned with the active touch point. */
+    onDragMove(event) {
+        this.swipe.update(event.pointerType, event.clientY);
+        this.dragTranslateY.set(this.swipe.offset(this.getMaxDragTranslateY()));
+    }
+    /** Closes only when the swipe crosses the configured threshold. */
+    onDragEnd() {
+        if (this.swipe.finish(this.closeDragThreshold)) {
+            this.requestClose();
+        }
+        this.dragTranslateY.set(0);
+        this.isDragging.set(false);
     }
     lockDocumentScroll(onCleanup) {
         const body = this.document.body;
@@ -2914,37 +2518,59 @@ class LoroModal {
             documentElement.classList.remove('loro-modal-open');
         });
     }
-    isSheetInteractionEnabled() {
-        return (this.placement() === 'sheet' &&
-            (this.dismissible() || this.sheetDragToClose()) &&
-            !!this.document.defaultView?.matchMedia('(max-width: 1023.88px)').matches);
-    }
-    isDragZone(event, dialog) {
-        const touch = event.touches[0];
-        if (!touch) {
-            return false;
-        }
-        const target = event.target instanceof Element ? event.target : null;
-        if (target?.closest('button, a, input, textarea, select, [contenteditable="true"]')) {
-            return false;
-        }
-        if (target?.closest('.loro-notification-panel__handle, .loro-modal__header')) {
-            return true;
-        }
-        const dialogTop = dialog.getBoundingClientRect().top;
-        return touch.clientY - dialogTop <= 52;
+    /** Caps the live translation so the sheet feels stable on small screens. */
+    getMaxDragTranslateY() {
+        const viewportHeight = this.document.defaultView?.innerHeight ?? 0;
+        return Math.max(0, Math.round(viewportHeight * 0.9));
     }
     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()) {\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 });
+    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 }, backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { modalClose: "modalClose" }, ngImport: i0, template: "@if (open()) {\n  <div class=\"loro-modal\" role=\"presentation\">\n    @if (backdrop()) {\n      <button\n        type=\"button\"\n        class=\"loro-modal__backdrop\"\n        aria-label=\"Cerrar modal\"\n        (click)=\"requestClose()\"\n      ></button>\n    }\n    <section\n      class=\"loro-modal__dialog\"\n      [class.loro-modal__dialog--dragging]=\"isDragging()\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [attr.aria-label]=\"ariaLabel() || title()\"\n      [style.transform]=\"dialogTransform()\"\n    >\n      <!-- Mobile-only drag affordance. Hidden on desktop. -->\n      <button\n        type=\"button\"\n        class=\"loro-modal__drag-handle\"\n        aria-label=\"Desliza hacia abajo para cerrar\"\n        (pointerdown)=\"onDragStart($event)\"\n        (pointermove)=\"onDragMove($event)\"\n        (pointerup)=\"onDragEnd()\"\n        (pointercancel)=\"onDragEnd()\"\n        (pointerleave)=\"onDragEnd()\"\n      >\n        <span></span>\n      </button>\n\n      <header class=\"loro-modal__header\">\n        @if (title()) {\n          <h2>{{ title() }}</h2>\n        }\n        <!-- Desktop close action. Mobile users close via backdrop or swipe. -->\n        <loro-button\n          class=\"loro-modal__close\"\n          icon=\"x\"\n          variant=\"tertiary\"\n          [iconOnly]=\"true\"\n          ariaLabel=\"Cerrar modal\"\n          (buttonClick)=\"requestClose()\"\n        ></loro-button>\n      </header>\n\n      <!-- Default projected body content. -->\n      <div class=\"loro-modal__content\">\n        <ng-content />\n      </div>\n\n      <!-- Optional footer actions, hidden when nothing is projected. -->\n      <div class=\"loro-modal__actions\">\n        <ng-content select=\"[loro-modal-actions]\" />\n      </div>\n    </section>\n  </div>\n}\n", styles: [":host{display:contents;font-family:var(--loro-font-brand)}.loro-modal{--loro-modal-inline-padding: 1rem;position:fixed;inset:0;z-index:5000;display:grid;align-items:end;width:100vw;height:var(--app-fill-height, var(--app-viewport-height, 100dvh));padding:0;isolation:isolate}.loro-modal__backdrop{position:absolute;inset:0;border:0;background:var(--loro-surface-overlay, rgba(255, 255, 255, .72));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer}.loro-modal__dialog{position:relative;z-index:1;display:flex;flex-direction:column;width:100%;max-height:min(70dvh,var(--app-fill-height, var(--app-viewport-height, 100dvh)));overflow:hidden;border:0;border-radius:1.25rem 1.25rem 0 0;background:var(--loro-surface, #fff);box-shadow:var(--loro-shadow-panel);color:var(--loro-text);will-change:transform;transition:transform .18s cubic-bezier(.2,.8,.2,1)}.loro-modal__dialog--dragging{transition:none}.loro-modal__drag-handle{width:100%;padding:.5rem 0 .25rem;border:0;background:transparent;cursor:grab;touch-action:none}.loro-modal__drag-handle span{display:block;width:3.5rem;height:.25rem;margin:0 auto;border-radius:999px;background:color-mix(in srgb,var(--loro-muted) 28%,transparent)}.loro-modal__header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.75rem;padding:1rem var(--loro-modal-inline-padding) .5rem}.loro-modal h2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;text-overflow:ellipsis;word-break:break-word;margin:0;color:var(--loro-text-strong);font-size:1.0625rem;font-weight:900;line-height:1.2;max-width:17.5rem}.loro-modal__close{display:none;place-self:start end}.loro-modal__content{min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0 var(--loro-modal-inline-padding) 1rem;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--loro-muted) 28%,transparent) transparent}.loro-modal__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.5rem;padding:.75rem var(--loro-modal-inline-padding) max(.75rem,env(safe-area-inset-bottom,0px));border-top:1px solid var(--loro-border-subtle);background:var(--loro-surface, #fff)}.loro-modal__actions:empty{display:none}@media(min-width:768px){.loro-modal{--loro-modal-inline-padding: 1.25rem;place-items:center;padding:2rem}.loro-modal__backdrop{background:color-mix(in srgb,var(--loro-surface-overlay, #fff) 70%,var(--loro-text) 30%);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.loro-modal__dialog{max-height:min(46rem,var(--app-fill-height, var(--app-viewport-height, 100dvh)) - 4rem);border-radius:1.25rem;box-shadow:var(--loro-shadow-panel);width:70%}}@media(min-width:768px)and (min-width:1600px){.loro-modal__dialog{width:50%}}@media(min-width:768px){.loro-modal__header{padding:1rem var(--loro-modal-inline-padding) .5rem}.loro-modal__drag-handle{display:none}.loro-modal__content{padding:0 var(--loro-modal-inline-padding) 1rem}.loro-modal__content::-webkit-scrollbar{width:5px}.loro-modal__content::-webkit-scrollbar-track{background:transparent;margin:15px 0}.loro-modal__content::-webkit-scrollbar-thumb{background-color:color-mix(in srgb,var(--loro-muted) 28%,transparent);border-radius:10px}.loro-modal__content::-webkit-scrollbar-thumb:hover{background-color:color-mix(in srgb,var(--loro-muted) 48%,transparent)}.loro-modal__actions{gap:.75rem;padding-block:1rem 1rem;padding-inline:var(--loro-modal-inline-padding)}.loro-modal__close{display:inline-flex}}@media(max-width:479.99px)and (orientation:portrait){.loro-modal__actions{gap:.4rem;padding-block:.6rem max(.6rem,env(safe-area-inset-bottom,0px))}.loro-modal__actions .loro-button,.loro-modal__actions button{min-height:2.5rem;padding:.55rem .8rem;border-radius:.75rem}}\n"], dependencies: [{ kind: "component", type: LoroButton, selector: "loro-button", inputs: ["text", "icon", "iconColor", "iconOnly", "iconSize", "variant", "width", "ariaLabel", "ariaDescription"], outputs: ["buttonClick"] }], 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()) {\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"] }] } });
+            args: [{ selector: 'loro-modal', imports: [LoroButton], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (open()) {\n  <div class=\"loro-modal\" role=\"presentation\">\n    @if (backdrop()) {\n      <button\n        type=\"button\"\n        class=\"loro-modal__backdrop\"\n        aria-label=\"Cerrar modal\"\n        (click)=\"requestClose()\"\n      ></button>\n    }\n    <section\n      class=\"loro-modal__dialog\"\n      [class.loro-modal__dialog--dragging]=\"isDragging()\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [attr.aria-label]=\"ariaLabel() || title()\"\n      [style.transform]=\"dialogTransform()\"\n    >\n      <!-- Mobile-only drag affordance. Hidden on desktop. -->\n      <button\n        type=\"button\"\n        class=\"loro-modal__drag-handle\"\n        aria-label=\"Desliza hacia abajo para cerrar\"\n        (pointerdown)=\"onDragStart($event)\"\n        (pointermove)=\"onDragMove($event)\"\n        (pointerup)=\"onDragEnd()\"\n        (pointercancel)=\"onDragEnd()\"\n        (pointerleave)=\"onDragEnd()\"\n      >\n        <span></span>\n      </button>\n\n      <header class=\"loro-modal__header\">\n        @if (title()) {\n          <h2>{{ title() }}</h2>\n        }\n        <!-- Desktop close action. Mobile users close via backdrop or swipe. -->\n        <loro-button\n          class=\"loro-modal__close\"\n          icon=\"x\"\n          variant=\"tertiary\"\n          [iconOnly]=\"true\"\n          ariaLabel=\"Cerrar modal\"\n          (buttonClick)=\"requestClose()\"\n        ></loro-button>\n      </header>\n\n      <!-- Default projected body content. -->\n      <div class=\"loro-modal__content\">\n        <ng-content />\n      </div>\n\n      <!-- Optional footer actions, hidden when nothing is projected. -->\n      <div class=\"loro-modal__actions\">\n        <ng-content select=\"[loro-modal-actions]\" />\n      </div>\n    </section>\n  </div>\n}\n", styles: [":host{display:contents;font-family:var(--loro-font-brand)}.loro-modal{--loro-modal-inline-padding: 1rem;position:fixed;inset:0;z-index:5000;display:grid;align-items:end;width:100vw;height:var(--app-fill-height, var(--app-viewport-height, 100dvh));padding:0;isolation:isolate}.loro-modal__backdrop{position:absolute;inset:0;border:0;background:var(--loro-surface-overlay, rgba(255, 255, 255, .72));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer}.loro-modal__dialog{position:relative;z-index:1;display:flex;flex-direction:column;width:100%;max-height:min(70dvh,var(--app-fill-height, var(--app-viewport-height, 100dvh)));overflow:hidden;border:0;border-radius:1.25rem 1.25rem 0 0;background:var(--loro-surface, #fff);box-shadow:var(--loro-shadow-panel);color:var(--loro-text);will-change:transform;transition:transform .18s cubic-bezier(.2,.8,.2,1)}.loro-modal__dialog--dragging{transition:none}.loro-modal__drag-handle{width:100%;padding:.5rem 0 .25rem;border:0;background:transparent;cursor:grab;touch-action:none}.loro-modal__drag-handle span{display:block;width:3.5rem;height:.25rem;margin:0 auto;border-radius:999px;background:color-mix(in srgb,var(--loro-muted) 28%,transparent)}.loro-modal__header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.75rem;padding:1rem var(--loro-modal-inline-padding) .5rem}.loro-modal h2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;text-overflow:ellipsis;word-break:break-word;margin:0;color:var(--loro-text-strong);font-size:1.0625rem;font-weight:900;line-height:1.2;max-width:17.5rem}.loro-modal__close{display:none;place-self:start end}.loro-modal__content{min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0 var(--loro-modal-inline-padding) 1rem;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--loro-muted) 28%,transparent) transparent}.loro-modal__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.5rem;padding:.75rem var(--loro-modal-inline-padding) max(.75rem,env(safe-area-inset-bottom,0px));border-top:1px solid var(--loro-border-subtle);background:var(--loro-surface, #fff)}.loro-modal__actions:empty{display:none}@media(min-width:768px){.loro-modal{--loro-modal-inline-padding: 1.25rem;place-items:center;padding:2rem}.loro-modal__backdrop{background:color-mix(in srgb,var(--loro-surface-overlay, #fff) 70%,var(--loro-text) 30%);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.loro-modal__dialog{max-height:min(46rem,var(--app-fill-height, var(--app-viewport-height, 100dvh)) - 4rem);border-radius:1.25rem;box-shadow:var(--loro-shadow-panel);width:70%}}@media(min-width:768px)and (min-width:1600px){.loro-modal__dialog{width:50%}}@media(min-width:768px){.loro-modal__header{padding:1rem var(--loro-modal-inline-padding) .5rem}.loro-modal__drag-handle{display:none}.loro-modal__content{padding:0 var(--loro-modal-inline-padding) 1rem}.loro-modal__content::-webkit-scrollbar{width:5px}.loro-modal__content::-webkit-scrollbar-track{background:transparent;margin:15px 0}.loro-modal__content::-webkit-scrollbar-thumb{background-color:color-mix(in srgb,var(--loro-muted) 28%,transparent);border-radius:10px}.loro-modal__content::-webkit-scrollbar-thumb:hover{background-color:color-mix(in srgb,var(--loro-muted) 48%,transparent)}.loro-modal__actions{gap:.75rem;padding-block:1rem 1rem;padding-inline:var(--loro-modal-inline-padding)}.loro-modal__close{display:inline-flex}}@media(max-width:479.99px)and (orientation:portrait){.loro-modal__actions{gap:.4rem;padding-block:.6rem max(.6rem,env(safe-area-inset-bottom,0px))}.loro-modal__actions .loro-button,.loro-modal__actions button{min-height:2.5rem;padding:.55rem .8rem;border-radius:.75rem}}\n"] }]
+        }], 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 }] }], backdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdrop", required: false }] }], modalClose: [{ type: i0.Output, args: ["modalClose"] }] } });
+
+class LoroHeader {
+    /** Centered page title shown in the header. */
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** Keeps the header fixed to the top when true. */
+    fixed = input(true, ...(ngDevMode ? [{ debugName: "fixed" }] : /* istanbul ignore next */ []));
+    /** Shows or hides the back action on mobile. */
+    showBack = input(false, ...(ngDevMode ? [{ debugName: "showBack" }] : /* istanbul ignore next */ []));
+    /** Unread notification badge count. */
+    notificationCount = input(0, ...(ngDevMode ? [{ debugName: "notificationCount" }] : /* istanbul ignore next */ []));
+    /** Controls the notification trigger active state. */
+    notificationOpen = input(false, ...(ngDevMode ? [{ debugName: "notificationOpen" }] : /* istanbul ignore next */ []));
+    /** Accessible label for the header landmark. */
+    accountSummaryAriaLabel = input.required(...(ngDevMode ? [{ debugName: "accountSummaryAriaLabel" }] : /* istanbul ignore next */ []));
+    /** Accessible label for the back button. */
+    backAriaLabel = input.required(...(ngDevMode ? [{ debugName: "backAriaLabel" }] : /* istanbul ignore next */ []));
+    /** Accessible label for the notification trigger. */
+    notificationAriaLabel = input.required(...(ngDevMode ? [{ debugName: "notificationAriaLabel" }] : /* istanbul ignore next */ []));
+    /** Accessible label for the AI action. */
+    aiAriaLabel = input.required(...(ngDevMode ? [{ debugName: "aiAriaLabel" }] : /* istanbul ignore next */ []));
+    /** Accessible label for the settings action. */
+    settingsAriaLabel = input.required(...(ngDevMode ? [{ debugName: "settingsAriaLabel" }] : /* istanbul ignore next */ []));
+    /** Emits when the back action is pressed. */
+    backClick = output();
+    /** Emits when the notification action is pressed. */
+    notificationClick = output();
+    /** Emits when the AI action is pressed. */
+    aiClick = output();
+    /** Emits when the settings action is pressed. */
+    settingsClick = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroHeader, isStandalone: true, selector: "loro-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, fixed: { classPropertyName: "fixed", publicName: "fixed", isSignal: true, isRequired: false, transformFunction: null }, showBack: { classPropertyName: "showBack", publicName: "showBack", isSignal: true, isRequired: false, transformFunction: null }, notificationCount: { classPropertyName: "notificationCount", publicName: "notificationCount", isSignal: true, isRequired: false, transformFunction: null }, notificationOpen: { classPropertyName: "notificationOpen", publicName: "notificationOpen", isSignal: true, isRequired: false, transformFunction: null }, accountSummaryAriaLabel: { classPropertyName: "accountSummaryAriaLabel", publicName: "accountSummaryAriaLabel", isSignal: true, isRequired: true, transformFunction: null }, backAriaLabel: { classPropertyName: "backAriaLabel", publicName: "backAriaLabel", isSignal: true, isRequired: true, transformFunction: null }, notificationAriaLabel: { classPropertyName: "notificationAriaLabel", publicName: "notificationAriaLabel", isSignal: true, isRequired: true, transformFunction: null }, aiAriaLabel: { classPropertyName: "aiAriaLabel", publicName: "aiAriaLabel", isSignal: true, isRequired: true, transformFunction: null }, settingsAriaLabel: { classPropertyName: "settingsAriaLabel", publicName: "settingsAriaLabel", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { backClick: "backClick", notificationClick: "notificationClick", aiClick: "aiClick", settingsClick: "settingsClick" }, ngImport: i0, template: "<header\n  class=\"loro-header\"\n  [class.loro-header--fixed]=\"fixed()\"\n  [attr.aria-label]=\"accountSummaryAriaLabel()\"\n>\n  <div class=\"loro-header__section loro-header__section--leading\">\n    @if (showBack()) {\n      <loro-button\n        class=\"loro-header__action loro-header__action--back\"\n        variant=\"tertiary\"\n        icon=\"back\"\n        [iconOnly]=\"true\"\n        [iconSize]=\"24\"\n        [ariaLabel]=\"backAriaLabel()\"\n        (buttonClick)=\"backClick.emit()\"\n      />\n    }\n    <div class=\"loro-header__actions loro-header__actions--leading\">\n      <loro-notification\n        [count]=\"notificationCount()\"\n        [active]=\"notificationOpen()\"\n        [expanded]=\"notificationOpen()\"\n        [iconSize]=\"24\"\n        [ariaLabel]=\"notificationAriaLabel()\"\n        (notificationClick)=\"notificationClick.emit()\"\n      />\n      <loro-button\n        class=\"loro-header__action loro-header__action--ai-mobile\"\n        variant=\"tertiary\"\n        icon=\"chat\"\n        [iconOnly]=\"true\"\n        [iconSize]=\"22\"\n        [ariaLabel]=\"aiAriaLabel()\"\n        (buttonClick)=\"aiClick.emit()\"\n      />\n    </div>\n  </div>\n\n  <div class=\"loro-header__title-wrap\">\n    <h1 class=\"loro-header__title\">{{ title() }}</h1>\n  </div>\n\n  <div class=\"loro-header__section loro-header__section--trailing\">\n    <loro-button\n      class=\"loro-header__action loro-header__action--ai-desktop\"\n      variant=\"tertiary\"\n      icon=\"chat\"\n      [iconOnly]=\"true\"\n      [iconSize]=\"22\"\n      [ariaLabel]=\"aiAriaLabel()\"\n      (buttonClick)=\"aiClick.emit()\"\n    />\n    <loro-button\n      class=\"loro-header__action loro-header__action--settings\"\n      variant=\"tertiary\"\n      icon=\"settings\"\n      [iconOnly]=\"true\"\n      [iconSize]=\"22\"\n      [ariaLabel]=\"settingsAriaLabel()\"\n      (buttonClick)=\"settingsClick.emit()\"\n    />\n    <div class=\"loro-header__notification\">\n      <loro-notification\n        [count]=\"notificationCount()\"\n        [active]=\"notificationOpen()\"\n        [expanded]=\"notificationOpen()\"\n        [iconSize]=\"24\"\n        [ariaLabel]=\"notificationAriaLabel()\"\n        (notificationClick)=\"notificationClick.emit()\"\n      />\n    </div>\n  </div>\n</header>\n", styles: [":host{display:block}.loro-header{--loro-layout-header-background-opacity: .96;--loro-layout-header-background-shadow: 0 .35rem 1.4rem color-mix(in srgb, var(--loro-primary-deep) 6%, transparent);position:relative;z-index:80;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.5rem;height:var(--loro-layout-mobile-header-height);padding:env(safe-area-inset-top,0px) var(--loro-layout-mobile-gutter) 0;border-bottom:1px solid var(--loro-border-subtle);background:transparent;isolation:isolate;pointer-events:none}.loro-header--fixed{position:fixed;inset:0 0 auto}.loro-header:before{position:absolute;inset:0;z-index:-1;background:var(--loro-nav-desktop-surface, var(--loro-shell-header-surface));opacity:var(--loro-layout-header-background-opacity, .96);box-shadow:var(--loro-layout-header-background-shadow, 0 .35rem 1.4rem color-mix(in srgb, var(--loro-primary-deep) 6%, transparent));backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);content:\"\"}:host-context(.app-shell--content-scrolled) .loro-header{--loro-layout-header-background-opacity: .88;--loro-layout-header-background-shadow: 0 .5rem 1.5rem color-mix(in srgb, var(--loro-primary-deep) 8%, transparent)}.loro-header__section,.loro-header__actions,.loro-header__title-wrap{min-width:0}.loro-header__section,.loro-header__actions{display:inline-flex;align-items:center}.loro-header__section{pointer-events:auto;gap:.35rem}.loro-header__section--leading{justify-content:flex-start}.loro-header__section--trailing{justify-content:flex-end;gap:.45rem}.loro-header__section *,.loro-header__actions *{pointer-events:auto}.loro-header__actions loro-notification{--loro-notification-size: 2.35rem}.loro-header__action{display:inline-flex;flex:0 0 auto;--loro-button-height: var(--loro-layout-header-action-size, 2.5rem);--loro-button-tertiary-height: var(--loro-layout-header-action-size, 2.5rem);--loro-button-tertiary-padding: 0;--loro-button-tertiary-radius: 50%;--loro-button-hover-background: color-mix(in srgb, var(--loro-primary-500) 7%, transparent);--loro-button-active-background: color-mix(in srgb, var(--loro-primary-500) 11%, transparent);--loro-button-active-transform: scale(.98)}.loro-header__action--ai-desktop,.loro-header__notification{display:none}.loro-header__title-wrap{display:flex;justify-content:center;min-width:0}.loro-header__title{display:block;max-width:min(100%,20rem);margin:0;overflow:hidden;color:var(--loro-text-strong);font:950 1rem/1.1 var(--loro-font-brand);text-align:center;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}@media(min-width:1024px){.loro-header{z-index:70;gap:1rem;min-height:var(--loro-layout-desktop-header-height);padding:0 2rem;background:var(--loro-shell-header-surface);box-shadow:0 .65rem 2rem color-mix(in srgb,var(--loro-primary-deep) 7%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.loro-header__section{min-width:2.75rem;gap:.75rem}.loro-header__section--trailing{justify-content:flex-end}.loro-header__title{max-width:min(100%,34rem);font:950 clamp(1.35rem,2vw,1.8rem)/1.1 var(--loro-font-brand)}.loro-header__actions--leading{display:none}.loro-header__actions loro-notification{--loro-notification-size: 2.75rem}.loro-header__notification{display:inline-flex;align-items:center;z-index:5}.loro-header__action--ai-mobile,.loro-header__action--settings{display:none}.loro-header__action--ai-desktop{display:inline-flex}}@media(max-width:479.99px)and (orientation:portrait){.loro-header{gap:.35rem;padding-inline:.75rem}.loro-header__section{gap:.25rem}.loro-header__section--trailing{gap:.3rem}.loro-header__title{max-width:min(100%,10.5rem);font-size:.88rem;line-height:1.05;white-space:normal;overflow-wrap:anywhere}.loro-header__action--ai-mobile,.loro-header__action--settings,.loro-header__action--back{--loro-button-height: 1.9rem;--loro-button-tertiary-height: 1.9rem}.loro-header__notification loro-notification{--loro-notification-size: 1.9rem}}\n"], dependencies: [{ kind: "component", type: LoroButton, selector: "loro-button", inputs: ["text", "icon", "iconColor", "iconOnly", "iconSize", "variant", "width", "ariaLabel", "ariaDescription"], outputs: ["buttonClick"] }, { kind: "component", type: LoroNotification, selector: "loro-notification", inputs: ["count", "maxCount", "showZero", "active", "expanded", "disabled", "ariaLabel", "iconSize"], outputs: ["notificationClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroHeader, decorators: [{
+            type: Component,
+            args: [{ selector: 'loro-header', standalone: true, imports: [LoroButton, LoroNotification], changeDetection: ChangeDetectionStrategy.OnPush, template: "<header\n  class=\"loro-header\"\n  [class.loro-header--fixed]=\"fixed()\"\n  [attr.aria-label]=\"accountSummaryAriaLabel()\"\n>\n  <div class=\"loro-header__section loro-header__section--leading\">\n    @if (showBack()) {\n      <loro-button\n        class=\"loro-header__action loro-header__action--back\"\n        variant=\"tertiary\"\n        icon=\"back\"\n        [iconOnly]=\"true\"\n        [iconSize]=\"24\"\n        [ariaLabel]=\"backAriaLabel()\"\n        (buttonClick)=\"backClick.emit()\"\n      />\n    }\n    <div class=\"loro-header__actions loro-header__actions--leading\">\n      <loro-notification\n        [count]=\"notificationCount()\"\n        [active]=\"notificationOpen()\"\n        [expanded]=\"notificationOpen()\"\n        [iconSize]=\"24\"\n        [ariaLabel]=\"notificationAriaLabel()\"\n        (notificationClick)=\"notificationClick.emit()\"\n      />\n      <loro-button\n        class=\"loro-header__action loro-header__action--ai-mobile\"\n        variant=\"tertiary\"\n        icon=\"chat\"\n        [iconOnly]=\"true\"\n        [iconSize]=\"22\"\n        [ariaLabel]=\"aiAriaLabel()\"\n        (buttonClick)=\"aiClick.emit()\"\n      />\n    </div>\n  </div>\n\n  <div class=\"loro-header__title-wrap\">\n    <h1 class=\"loro-header__title\">{{ title() }}</h1>\n  </div>\n\n  <div class=\"loro-header__section loro-header__section--trailing\">\n    <loro-button\n      class=\"loro-header__action loro-header__action--ai-desktop\"\n      variant=\"tertiary\"\n      icon=\"chat\"\n      [iconOnly]=\"true\"\n      [iconSize]=\"22\"\n      [ariaLabel]=\"aiAriaLabel()\"\n      (buttonClick)=\"aiClick.emit()\"\n    />\n    <loro-button\n      class=\"loro-header__action loro-header__action--settings\"\n      variant=\"tertiary\"\n      icon=\"settings\"\n      [iconOnly]=\"true\"\n      [iconSize]=\"22\"\n      [ariaLabel]=\"settingsAriaLabel()\"\n      (buttonClick)=\"settingsClick.emit()\"\n    />\n    <div class=\"loro-header__notification\">\n      <loro-notification\n        [count]=\"notificationCount()\"\n        [active]=\"notificationOpen()\"\n        [expanded]=\"notificationOpen()\"\n        [iconSize]=\"24\"\n        [ariaLabel]=\"notificationAriaLabel()\"\n        (notificationClick)=\"notificationClick.emit()\"\n      />\n    </div>\n  </div>\n</header>\n", styles: [":host{display:block}.loro-header{--loro-layout-header-background-opacity: .96;--loro-layout-header-background-shadow: 0 .35rem 1.4rem color-mix(in srgb, var(--loro-primary-deep) 6%, transparent);position:relative;z-index:80;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.5rem;height:var(--loro-layout-mobile-header-height);padding:env(safe-area-inset-top,0px) var(--loro-layout-mobile-gutter) 0;border-bottom:1px solid var(--loro-border-subtle);background:transparent;isolation:isolate;pointer-events:none}.loro-header--fixed{position:fixed;inset:0 0 auto}.loro-header:before{position:absolute;inset:0;z-index:-1;background:var(--loro-nav-desktop-surface, var(--loro-shell-header-surface));opacity:var(--loro-layout-header-background-opacity, .96);box-shadow:var(--loro-layout-header-background-shadow, 0 .35rem 1.4rem color-mix(in srgb, var(--loro-primary-deep) 6%, transparent));backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);content:\"\"}:host-context(.app-shell--content-scrolled) .loro-header{--loro-layout-header-background-opacity: .88;--loro-layout-header-background-shadow: 0 .5rem 1.5rem color-mix(in srgb, var(--loro-primary-deep) 8%, transparent)}.loro-header__section,.loro-header__actions,.loro-header__title-wrap{min-width:0}.loro-header__section,.loro-header__actions{display:inline-flex;align-items:center}.loro-header__section{pointer-events:auto;gap:.35rem}.loro-header__section--leading{justify-content:flex-start}.loro-header__section--trailing{justify-content:flex-end;gap:.45rem}.loro-header__section *,.loro-header__actions *{pointer-events:auto}.loro-header__actions loro-notification{--loro-notification-size: 2.35rem}.loro-header__action{display:inline-flex;flex:0 0 auto;--loro-button-height: var(--loro-layout-header-action-size, 2.5rem);--loro-button-tertiary-height: var(--loro-layout-header-action-size, 2.5rem);--loro-button-tertiary-padding: 0;--loro-button-tertiary-radius: 50%;--loro-button-hover-background: color-mix(in srgb, var(--loro-primary-500) 7%, transparent);--loro-button-active-background: color-mix(in srgb, var(--loro-primary-500) 11%, transparent);--loro-button-active-transform: scale(.98)}.loro-header__action--ai-desktop,.loro-header__notification{display:none}.loro-header__title-wrap{display:flex;justify-content:center;min-width:0}.loro-header__title{display:block;max-width:min(100%,20rem);margin:0;overflow:hidden;color:var(--loro-text-strong);font:950 1rem/1.1 var(--loro-font-brand);text-align:center;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}@media(min-width:1024px){.loro-header{z-index:70;gap:1rem;min-height:var(--loro-layout-desktop-header-height);padding:0 2rem;background:var(--loro-shell-header-surface);box-shadow:0 .65rem 2rem color-mix(in srgb,var(--loro-primary-deep) 7%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.loro-header__section{min-width:2.75rem;gap:.75rem}.loro-header__section--trailing{justify-content:flex-end}.loro-header__title{max-width:min(100%,34rem);font:950 clamp(1.35rem,2vw,1.8rem)/1.1 var(--loro-font-brand)}.loro-header__actions--leading{display:none}.loro-header__actions loro-notification{--loro-notification-size: 2.75rem}.loro-header__notification{display:inline-flex;align-items:center;z-index:5}.loro-header__action--ai-mobile,.loro-header__action--settings{display:none}.loro-header__action--ai-desktop{display:inline-flex}}@media(max-width:479.99px)and (orientation:portrait){.loro-header{gap:.35rem;padding-inline:.75rem}.loro-header__section{gap:.25rem}.loro-header__section--trailing{gap:.3rem}.loro-header__title{max-width:min(100%,10.5rem);font-size:.88rem;line-height:1.05;white-space:normal;overflow-wrap:anywhere}.loro-header__action--ai-mobile,.loro-header__action--settings,.loro-header__action--back{--loro-button-height: 1.9rem;--loro-button-tertiary-height: 1.9rem}.loro-header__notification loro-notification{--loro-notification-size: 1.9rem}}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], fixed: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixed", required: false }] }], showBack: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBack", required: false }] }], notificationCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "notificationCount", required: false }] }], notificationOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "notificationOpen", required: false }] }], accountSummaryAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "accountSummaryAriaLabel", required: true }] }], backAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "backAriaLabel", required: true }] }], notificationAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "notificationAriaLabel", required: true }] }], aiAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiAriaLabel", required: true }] }], settingsAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "settingsAriaLabel", required: true }] }], backClick: [{ type: i0.Output, args: ["backClick"] }], notificationClick: [{ type: i0.Output, args: ["notificationClick"] }], aiClick: [{ type: i0.Output, args: ["aiClick"] }], settingsClick: [{ type: i0.Output, args: ["settingsClick"] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-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 };
+export { LORO_BUTTON_DEFAULTS, LORO_BUTTON_ICON_SIZES, LORO_BUTTON_VARIANTS, LORO_BUTTON_WIDTHS, LORO_ICON_ASSETS, LORO_ICON_LEGACY_NAMES, LORO_ICON_PATHS, LORO_IMAGE_ASSETS, LORO_IMAGE_LEGACY_NAMES, LORO_IMAGE_PATHS, LoroAccordion, LoroAlert, LoroBadge, LoroButton, LoroCardSelector, LoroCheckbox, LoroDropdown, LoroFilterChip, LoroFooter, LoroHeader, LoroIcon, LoroImage, LoroInput, LoroModal, LoroNav, LoroNotification, LoroNotificationPanel, LoroNotificationRow, LoroRadio, LoroSegmentedControl, LoroSelect, LoroSpinner, LoroTextArea, LoroToast, LoroToggle, LoroUpload };
 //# sourceMappingURL=juligc99-loro-ui.mjs.map