@juligc99/loro-ui 0.0.1

package/fesm2022/juligc99-loro-ui.mjs

@@ -0,0 +1,3592 @@
+import * as i0 from '@angular/core';
+import { ChangeDetectionStrategy, Component, input, output, inject, signal, computed, effect, model, viewChild, Injectable } from '@angular/core';
+import { LoroIcon as LoroIcon$1, LORO_ICON_PATHS, LORO_ICON_LEGACY_NAMES } from '@loro-ui/components/resources/loro-icon/loro-icon';
+import { Toolbar, ToolbarWidget } from '@angular/aria/toolbar';
+import { LoroImage as LoroImage$1 } from '@loro-ui/components/resources/loro-image/loro-image';
+import { LoroHapticsService as LoroHapticsService$1 } from '@loro-ui/services/loro-haptics.service';
+import { LoroButton as LoroButton$1 } from '@loro-ui/components/components/loro-button/loro-button';
+import { RouterLink, Router } from '@angular/router';
+import { LoroBadge as LoroBadge$1 } from '@loro-ui/components/components/loro-badge/loro-badge';
+import { LoroRadio as LoroRadio$1 } from '@loro-ui/components/forms/loro-radio/loro-radio';
+import { LoroToggle as LoroToggle$1 } from '@loro-ui/components/forms/loro-toggle/loro-toggle';
+import { LoroInput as LoroInput$1 } from '@loro-ui/components/forms/loro-input/loro-input';
+import { DecimalPipe, DOCUMENT } from '@angular/common';
+import { LoroNotificationRow as LoroNotificationRow$1 } from '@loro-ui/components/feedback/loro-notification-row/loro-notification-row';
+import { LORO_ICON_LEGACY_NAMES as LORO_ICON_LEGACY_NAMES$1, LORO_ICON_PATHS as LORO_ICON_PATHS$1, LORO_IMAGE_LEGACY_NAMES, LORO_IMAGE_PATHS } from '@loro-ui/assets/loro-assets.generated';
+export { LORO_ICON_ASSETS, LORO_ICON_LEGACY_NAMES, LORO_ICON_PATHS, LORO_IMAGE_ASSETS, LORO_IMAGE_LEGACY_NAMES, LORO_IMAGE_PATHS } from '@loro-ui/assets/loro-assets.generated';
+import { Capacitor } from '@capacitor/core';
+import { ImpactStyle, Haptics, NotificationType } from '@capacitor/haptics';
+
+class Footer {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: Footer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: Footer, isStandalone: true, selector: "loro-footer", ngImport: i0, template: `
+    <footer class="loro-footer">
+      <div class="loro-footer__meta">
+        <span class="loro-footer__dot"></span>
+        <p>© 2026 Al Loro App. Todos los derechos reservados.</p>
+      </div>
+      <div class="loro-footer__links">
+        <a href="#">Términos</a>
+        <a href="#">Privacidad</a>
+        <a href="#">Soporte</a>
+      </div>
+    </footer>
+  `, isInline: true, styles: [".loro-footer{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:.75rem;padding-block:1.25rem;border-top:1px solid var(--loro-border-subtle);color:var(--loro-muted);font-size:.75rem}.loro-footer__meta,.loro-footer__links{display:flex;align-items:center;gap:.75rem}.loro-footer__meta{justify-content:center;text-align:center}.loro-footer__dot{width:.375rem;height:.375rem;flex:0 0 auto;border-radius:999px;background:var(--loro-primary-500)}.loro-footer__links{flex-wrap:wrap;justify-content:center;font-weight:600}.loro-footer__links a{color:inherit;text-decoration:none;transition:color .18s ease}.loro-footer__links a:hover{color:var(--loro-primary-500)}.loro-footer p{margin:0}@media(min-width:640px){.loro-footer{flex-direction:row}.loro-footer__meta{text-align:left}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: Footer, decorators: [{
+            type: Component,
+            args: [{ selector: 'loro-footer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <footer class="loro-footer">
+      <div class="loro-footer__meta">
+        <span class="loro-footer__dot"></span>
+        <p>© 2026 Al Loro App. Todos los derechos reservados.</p>
+      </div>
+      <div class="loro-footer__links">
+        <a href="#">Términos</a>
+        <a href="#">Privacidad</a>
+        <a href="#">Soporte</a>
+      </div>
+    </footer>
+  `, styles: [".loro-footer{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:.75rem;padding-block:1.25rem;border-top:1px solid var(--loro-border-subtle);color:var(--loro-muted);font-size:.75rem}.loro-footer__meta,.loro-footer__links{display:flex;align-items:center;gap:.75rem}.loro-footer__meta{justify-content:center;text-align:center}.loro-footer__dot{width:.375rem;height:.375rem;flex:0 0 auto;border-radius:999px;background:var(--loro-primary-500)}.loro-footer__links{flex-wrap:wrap;justify-content:center;font-weight:600}.loro-footer__links a{color:inherit;text-decoration:none;transition:color .18s ease}.loro-footer__links a:hover{color:var(--loro-primary-500)}.loro-footer p{margin:0}@media(min-width:640px){.loro-footer{flex-direction:row}.loro-footer__meta{text-align:left}}\n"] }]
+        }] });
+
+class LoroAccordion {
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    icon = input('help', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    expanded = input(false, ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    expandedChange = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroAccordion, isStandalone: true, selector: "loro-accordion", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedChange: "expandedChange" }, ngImport: i0, template: `
+    <article class="loro-accordion" [class.loro-accordion--open]="expanded()">
+      <button type="button" class="loro-accordion__header" (click)="expandedChange.emit(!expanded())">
+        @if (icon()) {
+          <span class="loro-accordion__icon">
+            <loro-icon [name]="icon()!" [size]="24" [alt]="title()" color="primary" />
+          </span>
+        }
+        <span class="loro-accordion__title">{{ title() }}</span>
+        <loro-icon [name]="expanded() ? 'chevron-up' : 'chevron-down'" [size]="22" alt="Expandir" color="primary" />
+      </button>
+      @if (expanded()) {
+        <div class="loro-accordion__body">
+          <ng-content />
+        </div>
+      }
+    </article>
+  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-accordion{overflow:hidden;border:1px solid var(--loro-border-subtle);border-radius:1rem;background:var(--loro-surface);box-shadow:var(--loro-shadow-soft)}.loro-accordion--open{border-color:#6c3cff57}.loro-accordion__header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.9rem;width:100%;min-height:4.3rem;padding:0 1.1rem;border:0;background:transparent;color:var(--loro-text-strong);font:inherit;text-align:left;cursor:pointer}.loro-accordion__icon{display:grid;width:2.6rem;height:2.6rem;place-items:center;border-radius:50%;background:var(--loro-brand-tint-surface)}.loro-accordion__title{font-size:1rem;font-weight:900;line-height:1.25}.loro-accordion__body{padding:0 1.35rem 1.35rem;color:var(--loro-muted-strong);font-size:.94rem;font-weight:600;line-height:1.65}\n"], dependencies: [{ kind: "component", type: LoroIcon$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroAccordion, decorators: [{
+            type: Component,
+            args: [{ selector: 'loro-accordion', standalone: true, imports: [LoroIcon$1], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <article class="loro-accordion" [class.loro-accordion--open]="expanded()">
+      <button type="button" class="loro-accordion__header" (click)="expandedChange.emit(!expanded())">
+        @if (icon()) {
+          <span class="loro-accordion__icon">
+            <loro-icon [name]="icon()!" [size]="24" [alt]="title()" color="primary" />
+          </span>
+        }
+        <span class="loro-accordion__title">{{ title() }}</span>
+        <loro-icon [name]="expanded() ? 'chevron-up' : 'chevron-down'" [size]="22" alt="Expandir" color="primary" />
+      </button>
+      @if (expanded()) {
+        <div class="loro-accordion__body">
+          <ng-content />
+        </div>
+      }
+    </article>
+  `, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-accordion{overflow:hidden;border:1px solid var(--loro-border-subtle);border-radius:1rem;background:var(--loro-surface);box-shadow:var(--loro-shadow-soft)}.loro-accordion--open{border-color:#6c3cff57}.loro-accordion__header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.9rem;width:100%;min-height:4.3rem;padding:0 1.1rem;border:0;background:transparent;color:var(--loro-text-strong);font:inherit;text-align:left;cursor:pointer}.loro-accordion__icon{display:grid;width:2.6rem;height:2.6rem;place-items:center;border-radius:50%;background:var(--loro-brand-tint-surface)}.loro-accordion__title{font-size:1rem;font-weight:900;line-height:1.25}.loro-accordion__body{padding:0 1.35rem 1.35rem;color:var(--loro-muted-strong);font-size:.94rem;font-weight:600;line-height:1.65}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }] } });
+
+const 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 = [
+    { id: 'settings', label: 'Ajustes', icon: 'settings' },
+    { id: 'logout', label: 'Cerrar sesión', icon: 'logout' },
+];
+class LoroAppNav {
+    haptics = inject(LoroHapticsService$1);
+    draggedMobilePosition = signal(null, ...(ngDevMode ? [{ debugName: "draggedMobilePosition" }] : /* istanbul ignore next */ []));
+    draggedMobileIndex = signal(null, ...(ngDevMode ? [{ debugName: "draggedMobileIndex" }] : /* istanbul ignore next */ []));
+    activePointerId = null;
+    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 */ []));
+    showUtilityItems = input(true, ...(ngDevMode ? [{ debugName: "showUtilityItems" }] : /* istanbul ignore next */ []));
+    compactDesktop = input(false, ...(ngDevMode ? [{ debugName: "compactDesktop" }] : /* istanbul ignore next */ []));
+    itemClick = output();
+    utilityItemClick = output();
+    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 */ []));
+    mobileVisualSlotCount = computed(() => this.mobileItems().length, ...(ngDevMode ? [{ debugName: "mobileVisualSlotCount" }] : /* istanbul ignore next */ []));
+    selectedMobileIndex = computed(() => {
+        const index = this.mobileItems().findIndex((item) => item.active);
+        return index >= 0 ? index : 0;
+    }, ...(ngDevMode ? [{ debugName: "selectedMobileIndex" }] : /* istanbul ignore next */ []));
+    mobileSliderPosition = computed(() => this.draggedMobilePosition() ?? this.mobileItemIndexToVisualSlot(this.selectedMobileIndex()), ...(ngDevMode ? [{ debugName: "mobileSliderPosition" }] : /* istanbul ignore next */ []));
+    isMobileDragging = computed(() => this.draggedMobilePosition() !== null, ...(ngDevMode ? [{ debugName: "isMobileDragging" }] : /* istanbul ignore next */ []));
+    mobileItemCount = computed(() => this.mobileItems().length, ...(ngDevMode ? [{ debugName: "mobileItemCount" }] : /* istanbul ignore next */ []));
+    isMobileItemVisualActive(index) {
+        // Mientras se arrastra, ningún icono cambia visualmente.
+        // El nuevo activo solo se refleja cuando el gesto termina y el padre
+        // actualiza el item con active: true.
+        return this.selectedMobileIndex() === index;
+    }
+    onMainItemClick(item) {
+        if (item.disabled) {
+            return;
+        }
+        this.emitMainItem(item, true);
+    }
+    onMobileItemClick(item) {
+        if (this.suppressNextMobileClick) {
+            this.suppressNextMobileClick = false;
+            return;
+        }
+        this.onMainItemClick(item);
+    }
+    onMobilePointerDown(event) {
+        if (!event.isPrimary || event.button !== 0 || this.mobileItems().length === 0) {
+            return;
+        }
+        const nav = event.currentTarget;
+        this.activePointerId = event.pointerId;
+        nav.setPointerCapture(event.pointerId);
+        const slotPosition = this.getMobileVisualSlotPosition(event.clientX, nav);
+        const index = this.getNearestEnabledMobileIndex(slotPosition);
+        if (index === null) {
+            return;
+        }
+        this.draggedMobilePosition.set(slotPosition);
+        this.draggedMobileIndex.set(index);
+        this.haptics.selection();
+        event.preventDefault();
+    }
+    onMobilePointerMove(event) {
+        if (event.pointerId !== this.activePointerId) {
+            return;
+        }
+        const nav = event.currentTarget;
+        const slotPosition = this.getMobileVisualSlotPosition(event.clientX, nav);
+        const index = this.getNearestEnabledMobileIndex(slotPosition);
+        this.draggedMobilePosition.set(slotPosition);
+        if (index !== null && index !== this.draggedMobileIndex()) {
+            this.draggedMobileIndex.set(index);
+            this.haptics.selection();
+        }
+        event.preventDefault();
+    }
+    onMobilePointerUp(event) {
+        if (event.pointerId !== this.activePointerId) {
+            return;
+        }
+        const nav = event.currentTarget;
+        const slotPosition = this.getMobileVisualSlotPosition(event.clientX, nav);
+        const index = this.getNearestEnabledMobileIndex(slotPosition) ?? this.draggedMobileIndex();
+        this.releaseMobilePointer(nav, event.pointerId);
+        if (index === null) {
+            this.draggedMobilePosition.set(null);
+            this.draggedMobileIndex.set(null);
+            return;
+        }
+        const item = this.mobileItems()[index];
+        if (!item || item.disabled) {
+            this.draggedMobilePosition.set(null);
+            this.draggedMobileIndex.set(null);
+            return;
+        }
+        // Keep the thumb exactly on the snapped item until the parent applies
+        // the new active state, avoiding a visual jump back to the old item.
+        this.draggedMobilePosition.set(this.mobileItemIndexToVisualSlot(index));
+        this.draggedMobileIndex.set(index);
+        this.suppressNextMobileClick = true;
+        globalThis.setTimeout(() => {
+            this.suppressNextMobileClick = false;
+        });
+        this.emitMainItem(item, false);
+        globalThis.queueMicrotask(() => {
+            this.draggedMobilePosition.set(null);
+            this.draggedMobileIndex.set(null);
+        });
+        event.preventDefault();
+    }
+    onMobilePointerCancel(event) {
+        if (event.pointerId !== this.activePointerId) {
+            return;
+        }
+        this.releaseMobilePointer(event.currentTarget, event.pointerId);
+        this.draggedMobilePosition.set(null);
+        this.draggedMobileIndex.set(null);
+    }
+    onUtilityItemClick(item) {
+        if (item.disabled) {
+            return;
+        }
+        this.haptics.impact('light');
+        this.utilityItemClick.emit(item);
+        this.navItemClick.emit({ item, section: 'utility' });
+    }
+    emitMainItem(item, withHaptics) {
+        if (withHaptics) {
+            this.haptics.selection();
+        }
+        this.itemClick.emit(item);
+        this.navItemClick.emit({ item, section: 'main' });
+    }
+    getMobileVisualSlotPosition(clientX, nav) {
+        const slotCount = this.mobileVisualSlotCount();
+        if (slotCount <= 1) {
+            return 0;
+        }
+        const rect = nav.getBoundingClientRect();
+        const itemWidth = rect.width / slotCount;
+        const position = (clientX - rect.left - itemWidth / 2) / itemWidth;
+        return Math.min(Math.max(position, 0), slotCount - 1);
+    }
+    mobileItemGridColumn(index) {
+        return index + 1;
+    }
+    mobileItemIndexToVisualSlot(index) {
+        return index;
+    }
+    getNearestEnabledMobileIndex(slotPosition) {
+        const items = this.mobileItems();
+        const enabledIndexes = items
+            .map((item, index) => ({ item, index }))
+            .filter(({ item }) => !item.disabled)
+            .map(({ index }) => index);
+        if (enabledIndexes.length === 0) {
+            return null;
+        }
+        return enabledIndexes.reduce((nearest, index) => Math.abs(this.mobileItemIndexToVisualSlot(index) - slotPosition) <
+            Math.abs(this.mobileItemIndexToVisualSlot(nearest) - slotPosition)
+            ? index
+            : nearest);
+    }
+    releaseMobilePointer(nav, pointerId) {
+        if (nav.hasPointerCapture(pointerId)) {
+            nav.releasePointerCapture(pointerId);
+        }
+        this.activePointerId = null;
+    }
+    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    [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 class=\"loro-app-nav__mobile-slider\" 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--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:.45}.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;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:active,.loro-app-nav__mobile-item--active,.loro-app-nav__mobile-item:hover{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:.45}.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:none}.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item,.loro-app-nav__mobile--dragging .loro-app-nav__mobile-icon,.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item ::ng-deep .loro-icon,.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item ::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$1, selector: "loro-image", inputs: ["name", "alt", "size", "width", "height", "fit"] }, { kind: "component", type: LoroButton$1, selector: "loro-button", inputs: ["label", "text", "icon", "iconContent", "iconMode", "iconSize", "iconButtonSize", "iconColor", "socialMobileCompact", "selected", "variant", "typeButton", "color", "size", "fullWidth", "buttonWidth", "disabled", "loading", "type", "formId", "ariaLabel", "ariaDescription"], outputs: ["buttonClick", "change", "sanChange"] }, { kind: "component", type: LoroIcon$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroAppNav, decorators: [{
+            type: Component,
+            args: [{ selector: 'loro-app-nav', standalone: true, imports: [Toolbar, ToolbarWidget, LoroImage$1, LoroButton$1, LoroIcon$1], changeDetection: ChangeDetectionStrategy.OnPush, template: "<aside class=\"loro-app-nav\">\n  <div class=\"loro-app-nav__desktop\">\n    <div class=\"loro-app-nav__surface\" [class.loro-app-nav__surface--compact]=\"compactDesktop()\">\n      <div class=\"loro-app-nav__brand\">\n        <loro-image\n          class=\"loro-app-nav__brand-image\"\n          name=\"image-loro-apaisado\"\n          alt=\"AlLoro\"\n          width=\"10rem\"\n          height=\"auto\"\n        />\n      </div>\n\n      <nav class=\"loro-app-nav__nav\" [attr.aria-label]=\"ariaLabel()\">\n        @for (item of desktopItems(); track item.id) {\n          <loro-button\n            class=\"loro-app-nav__item\"\n            [class.loro-app-nav__item--active]=\"item.active\"\n            [class.loro-app-nav__item--disabled]=\"item.disabled\"\n            [class.loro-app-nav__item--logout]=\"item.id === 'logout'\"\n            [text]=\"item.label\"\n            [icon]=\"item.icon\"\n            iconMode=\"with-icon\"\n            iconColor=\"default\"\n            variant=\"navigation\"\n            [selected]=\"!!item.active\"\n            [color]=\"item.id === 'logout' ? 'danger' : 'primary'\"\n            type=\"button\"\n            [fullWidth]=\"true\"\n            [ariaLabel]=\"item.label\"\n            [disabled]=\"!!item.disabled\"\n            (buttonClick)=\"onMainItemClick(item)\"\n          >\n            @if (item.badge !== null && item.badge !== undefined && item.badge !== '') {\n              <span class=\"loro-app-nav__badge\">{{ item.badge }}</span>\n            }\n          </loro-button>\n        }\n      </nav>\n\n      <div class=\"loro-app-nav__spacer\"></div>\n\n      @if (showUtilityItems() && utilityItems().length > 0) {\n        <div class=\"loro-app-nav__divider\" aria-hidden=\"true\"></div>\n\n        <nav\n          class=\"loro-app-nav__nav loro-app-nav__nav--utility\"\n          aria-label=\"Navegaci\u00F3n secundaria\"\n        >\n          @for (item of utilityItems(); track item.id) {\n            <loro-button\n              class=\"loro-app-nav__item\"\n              [class.loro-app-nav__item--active]=\"item.active\"\n              [class.loro-app-nav__item--disabled]=\"item.disabled\"\n              [class.loro-app-nav__item--logout]=\"item.id === 'logout'\"\n              [text]=\"item.label\"\n              [icon]=\"item.icon\"\n              iconMode=\"with-icon\"\n              iconColor=\"default\"\n              variant=\"navigation\"\n              [selected]=\"!!item.active\"\n              [color]=\"item.id === 'logout' ? 'danger' : 'primary'\"\n              type=\"button\"\n              [fullWidth]=\"true\"\n              [ariaLabel]=\"item.label\"\n              [disabled]=\"!!item.disabled\"\n              (buttonClick)=\"onUtilityItemClick(item)\"\n            >\n              @if (item.badge !== null && item.badge !== undefined && item.badge !== '') {\n                <span class=\"loro-app-nav__badge\">{{ item.badge }}</span>\n              }\n            </loro-button>\n          }\n        </nav>\n      }\n    </div>\n  </div>\n\n  <nav\n    ngToolbar\n    class=\"loro-app-nav__mobile\"\n    [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 class=\"loro-app-nav__mobile-slider\" 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--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:.45}.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;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:active,.loro-app-nav__mobile-item--active,.loro-app-nav__mobile-item:hover{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:.45}.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:none}.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item,.loro-app-nav__mobile--dragging .loro-app-nav__mobile-icon,.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item ::ng-deep .loro-icon,.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item ::ng-deep svg{color:var(--loro-nav-mobile-icon, var(--loro-text))!important;opacity:1!important;visibility:visible!important}.loro-app-nav__mobile-label{display:block;max-width:100%;overflow:hidden;color:inherit;font-size:.625rem;font-weight:700;line-height:1.1;text-align:center;text-overflow:ellipsis;white-space:nowrap;opacity:0;transform:translateY(.08rem);transition:opacity .18s ease,transform .18s ease}.loro-app-nav__mobile--with-labels{width:min(92vw - max(1rem,var(--app-shell-mobile-gutter, 1rem) * .75),24rem)}.loro-app-nav__mobile--with-labels .loro-app-nav__mobile-item{min-height:4.4rem;padding-top:.7rem}.loro-app-nav__mobile--with-labels .loro-app-nav__mobile-label{opacity:1;transform:translateY(0)}@media(max-width:479.99px)and (orientation:portrait){:host{height:auto}.loro-app-nav{height:auto;padding:0}.loro-app-nav__desktop{height:auto}}@media(min-width:1024px){:host,.loro-app-nav,.loro-app-nav__desktop{height:100%}.loro-app-nav__desktop{display:block}.loro-app-nav__mobile{display:none}}@media(prefers-reduced-motion:reduce){.loro-app-nav__mobile-slider,.loro-app-nav__mobile-item,.loro-app-nav__mobile-item ::ng-deep .loro-icon{transition-duration:1ms}}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], utilityItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "utilityItems", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], showUtilityItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "showUtilityItems", required: false }] }], compactDesktop: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactDesktop", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], utilityItemClick: [{ type: i0.Output, args: ["utilityItemClick"] }], navItemClick: [{ type: i0.Output, args: ["navItemClick"] }] } });
+
+class LoroAssistantCard {
+    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 */ []));
+    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 } }, ngImport: i0, template: `
+    <section class="loro-assistant-card">
+      <div class="loro-assistant-card__media">
+        @if (imageName()) {
+          <loro-image [name]="imageName()!" [alt]="title()" width="100%" />
+        } @else {
+          <loro-icon [name]="icon()" [size]="56" [alt]="title()" color="primary" />
+        }
+      </div>
+      <div class="loro-assistant-card__copy">
+        <h2>{{ title() }}</h2>
+        <p>{{ description() }}</p>
+      </div>
+      @if (actionLabel()) {
+        <loro-button
+          [label]="actionLabel()"
+          [icon]="actionIcon()"
+          [variant]="actionVariant()"
+          [fullWidth]="true" />
+      }
+    </section>
+  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-assistant-card{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(12rem,auto);align-items:center;gap:1.5rem;padding:1.35rem 1.5rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-card);background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft)}.loro-assistant-card__media{display:grid;width:6rem;height:5rem;place-items:center;overflow:hidden}.loro-assistant-card__copy{min-width:0}h2,p{margin:0}h2{color:var(--loro-text-strong);font-size:1.2rem;font-weight:900;line-height:1.2}p{margin-top:.35rem;color:var(--loro-muted);font-weight:650;line-height:1.45}@media(max-width:680px){.loro-assistant-card{grid-template-columns:auto minmax(0,1fr)}loro-button{grid-column:1 / -1}}\n"], dependencies: [{ kind: "component", type: LoroButton$1, selector: "loro-button", inputs: ["label", "text", "icon", "iconContent", "iconMode", "iconSize", "iconButtonSize", "iconColor", "socialMobileCompact", "selected", "variant", "typeButton", "color", "size", "fullWidth", "buttonWidth", "disabled", "loading", "type", "formId", "ariaLabel", "ariaDescription"], outputs: ["buttonClick", "change", "sanChange"] }, { kind: "component", type: LoroIcon$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }, { kind: "component", type: LoroImage$1, 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$1, LoroIcon$1, LoroImage$1], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <section class="loro-assistant-card">
+      <div class="loro-assistant-card__media">
+        @if (imageName()) {
+          <loro-image [name]="imageName()!" [alt]="title()" width="100%" />
+        } @else {
+          <loro-icon [name]="icon()" [size]="56" [alt]="title()" color="primary" />
+        }
+      </div>
+      <div class="loro-assistant-card__copy">
+        <h2>{{ title() }}</h2>
+        <p>{{ description() }}</p>
+      </div>
+      @if (actionLabel()) {
+        <loro-button
+          [label]="actionLabel()"
+          [icon]="actionIcon()"
+          [variant]="actionVariant()"
+          [fullWidth]="true" />
+      }
+    </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 }] }] } });
+
+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
+      type="button"
+      class="loro-auth-social-button"
+      [class.loro-auth-social-button--outline]="outline()"
+      [class.loro-auth-social-button--selected]="selected()"
+      (click)="releaseFocus($event)"
+    >
+      @if (nativeIconSrc()) {
+        <img
+          class="loro-auth-social-button__native-icon"
+          [src]="nativeIconSrc()"
+          alt=""
+          aria-hidden="true"
+          [style.width.px]="iconSize()"
+          [style.height.px]="iconSize()"
+        />
+      } @else {
+        <loro-icon [name]="icon()" [size]="iconSize()" [alt]="label()" />
+      }
+      <span>{{ label() }}</span>
+    </button>
+  `, isInline: true, styles: [":host{display:block}.loro-auth-social-button{display:flex;width:100%;align-items:center;justify-content:center;gap:.8rem;border:1px solid var(--loro-border-subtle);border-radius:.9rem;background:var(--loro-surface);min-height:3.25rem;padding:.78rem 1rem;box-shadow:var(--loro-shadow-soft);color:var(--loro-text);font:inherit;font-family:var(--loro-font-brand);font-size:.92rem;font-weight:800;cursor:pointer;text-align:center;transition:border-color .18s ease,box-shadow .18s ease,transform .12s ease,background .12s ease}.loro-auth-social-button:hover,.loro-auth-social-button:focus-visible{border-color:var(--loro-auth-field-active-border, var(--loro-primary-500));box-shadow:var(--loro-shadow-soft),0 0 0 3px color-mix(in srgb,var(--loro-primary-500) 14%,transparent)}.loro-auth-social-button:active{background:color-mix(in srgb,var(--loro-primary-500) 6%,var(--loro-surface));transform:scale(.985)}.loro-auth-social-button loro-icon{transform:scale(.82)}.loro-auth-social-button__native-icon{flex:0 0 auto;object-fit:contain}.loro-auth-social-button--outline{border:2px solid var(--loro-primary-500);box-shadow:none;color:var(--loro-primary-500);background:transparent}.loro-auth-social-button--outline:hover,.loro-auth-social-button--outline:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-primary-500) 14%,transparent)}.loro-auth-social-button--outline:active{background:color-mix(in srgb,var(--loro-primary-500) 8%,transparent)}@media(min-width:1024px){.loro-auth-social-button{min-height:3rem;padding:.65rem 1rem;font-size:.86rem}.loro-auth-social-button--outline{font-size:.92rem}}\n"], dependencies: [{ kind: "component", type: LoroIcon$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroAuthSocialButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'loro-auth-social-button', standalone: true, imports: [LoroIcon$1], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <button
+      type="button"
+      class="loro-auth-social-button"
+      [class.loro-auth-social-button--outline]="outline()"
+      [class.loro-auth-social-button--selected]="selected()"
+      (click)="releaseFocus($event)"
+    >
+      @if (nativeIconSrc()) {
+        <img
+          class="loro-auth-social-button__native-icon"
+          [src]="nativeIconSrc()"
+          alt=""
+          aria-hidden="true"
+          [style.width.px]="iconSize()"
+          [style.height.px]="iconSize()"
+        />
+      } @else {
+        <loro-icon [name]="icon()" [size]="iconSize()" [alt]="label()" />
+      }
+      <span>{{ label() }}</span>
+    </button>
+  `, styles: [":host{display:block}.loro-auth-social-button{display:flex;width:100%;align-items:center;justify-content:center;gap:.8rem;border:1px solid var(--loro-border-subtle);border-radius:.9rem;background:var(--loro-surface);min-height:3.25rem;padding:.78rem 1rem;box-shadow:var(--loro-shadow-soft);color:var(--loro-text);font:inherit;font-family:var(--loro-font-brand);font-size:.92rem;font-weight:800;cursor:pointer;text-align:center;transition:border-color .18s ease,box-shadow .18s ease,transform .12s ease,background .12s ease}.loro-auth-social-button:hover,.loro-auth-social-button:focus-visible{border-color:var(--loro-auth-field-active-border, var(--loro-primary-500));box-shadow:var(--loro-shadow-soft),0 0 0 3px color-mix(in srgb,var(--loro-primary-500) 14%,transparent)}.loro-auth-social-button:active{background:color-mix(in srgb,var(--loro-primary-500) 6%,var(--loro-surface));transform:scale(.985)}.loro-auth-social-button loro-icon{transform:scale(.82)}.loro-auth-social-button__native-icon{flex:0 0 auto;object-fit:contain}.loro-auth-social-button--outline{border:2px solid var(--loro-primary-500);box-shadow:none;color:var(--loro-primary-500);background:transparent}.loro-auth-social-button--outline:hover,.loro-auth-social-button--outline:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-primary-500) 14%,transparent)}.loro-auth-social-button--outline:active{background:color-mix(in srgb,var(--loro-primary-500) 8%,transparent)}@media(min-width:1024px){.loro-auth-social-button{min-height:3rem;padding:.65rem 1rem;font-size:.86rem}.loro-auth-social-button--outline{font-size:.92rem}}\n"] }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], outline: [{ type: i0.Input, args: [{ isSignal: true, alias: "outline", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }] } });
+
+class LoroBadge {
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    variant = input('info', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: LoroBadge, isStandalone: true, selector: "loro-badge", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<span class="loro-badge" [class]="'loro-badge loro-badge--' + variant()">{{ label() }}</span>`, isInline: true, styles: [":host{display:inline-flex;min-width:0;font-family:var(--loro-font-brand)}.loro-badge{display:inline-flex;align-items:center;justify-content:center;max-width:100%;min-height:1.75rem;padding:.25rem .7rem;border:1px solid transparent;border-radius:var(--loro-radius-pill);font-size:.82rem;font-weight:800;line-height:1.1;white-space:nowrap}.loro-badge--success{border-color:#1f9d5533;background:#1f9d551f;color:#1f9d55}.loro-badge--error{border-color:#dc26262e;background:#dc26261a;color:#dc2626}.loro-badge--info{border-color:#6c3cff2e;background:#6c3cff1a;color:var(--loro-primary-700)}.loro-badge--warning{border-color:#f5a80038;background:#f5a8001f;color:#986c00}.loro-badge--neutral{border-color:var(--loro-border-soft);background:var(--loro-surface-muted);color:var(--loro-muted-strong)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+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"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+
+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 */ []));
+    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() {
+        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:.62;transform:none}.loro-button--loading{cursor:progress}@keyframes loro-button-spin{to{transform:rotate(360deg)}}@media(max-width:767.88px){.loro-button--social.loro-button--social-mobile-compact{width:var(--loro-button-icon-size, 3rem);min-width:var(--loro-button-icon-size, 3rem);min-height:var(--loro-button-icon-size, 3rem);margin-inline:auto;padding:0;aspect-ratio:1}.loro-button--social.loro-button--social-mobile-compact .loro-button__label{display:none}}@media(prefers-reduced-motion:reduce){.loro-button{transition:none}.loro-button__spinner{animation-duration:1.4s}}\n"], dependencies: [{ kind: "component", type: LoroIcon$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'loro-button', standalone: true, imports: [LoroIcon$1], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.loro-button-host--full]': "resolvedButtonWidth() === 'full'",
+                    }, template: "<button\n  [type]=\"type()\"\n  [attr.form]=\"formId() || null\"\n  class=\"loro-button\"\n  [class]=\"'loro-button loro-button--' + resolvedTypeButton()\"\n  [class.loro-button--outline]=\"variant() === 'outline'\"\n  [class.loro-button--ghost]=\"variant() === 'ghost'\"\n  [class.loro-button--soft]=\"variant() === 'soft'\"\n  [class.loro-button--social]=\"variant() === 'social'\"\n  [class.loro-button--action]=\"variant() === 'action'\"\n  [class.loro-button--navigation]=\"variant() === 'navigation'\"\n  [class.loro-button--danger]=\"variant() === 'danger'\"\n  [class.loro-button--secondary-color]=\"resolvedColor() === 'secondary'\"\n  [class.loro-button--tertiary-color]=\"resolvedColor() === 'tertiary'\"\n  [class.loro-button--danger-color]=\"resolvedColor() === 'danger'\"\n  [class.loro-button--sm]=\"size() === 'sm'\"\n  [class.loro-button--lg]=\"size() === 'lg'\"\n  [class.loro-button--full]=\"resolvedButtonWidth() === 'full'\"\n  [class.loro-button--icon-only]=\"resolvedIconMode() === 'only-icon'\"\n  [class.loro-button--social-mobile-compact]=\"socialMobileCompact()\"\n  [class.loro-button--selected]=\"selected()\"\n  [class.loro-button--loading]=\"loading()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [attr.aria-description]=\"ariaDescription() || null\"\n  [attr.aria-busy]=\"loading()\"\n  [style.--loro-button-icon-size]=\"resolvedIconButtonSize()\"\n  (click)=\"emitChange()\"\n>\n  @if (showIcon()) {\n    <loro-icon\n      [name]=\"resolvedIcon()!\"\n      [size]=\"iconSize()\"\n      [alt]=\"resolvedText()\"\n      [color]=\"resolvedIconColor()\"\n      [renderMode]=\"resolvedIconRenderMode()\"\n    />\n  }\n\n  @if (showSpinner()) {\n    <span class=\"loro-button__spinner\" aria-hidden=\"true\"></span>\n    <span class=\"loro-button__sr-status\" aria-live=\"polite\">{{ loadingAriaLabel() }}</span>\n  }\n\n  @if (resolvedIconMode() !== 'only-icon') {\n    <span class=\"loro-button__label\">{{ resolvedText() }}</span>\n  }\n</button>\n", styles: [":host{display:inline-flex;width:fit-content;font-family:var(--loro-font-brand)}:host(.loro-button-host--full){display:block;width:100%}.loro-button{display:inline-flex;align-items:center;justify-content:center;gap:.65rem;min-width:0;min-height:var(--loro-button-min-height, 3.25rem);padding:var(--loro-button-padding, .85rem 1.25rem);border:1px solid transparent;border-radius:var(--loro-button-radius, .9rem);background:var(--loro-button-background, var(--loro-surface-muted));color:var(--loro-text-strong);box-shadow:var(--loro-button-shadow, none);font:inherit;font-size:var(--loro-button-font-size, 1rem);font-weight:900;line-height:1.1;white-space:normal;overflow-wrap:anywhere;word-break:break-word;text-align:center;cursor:pointer;transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease,color .15s ease}.loro-button__label{min-width:0}.loro-button__spinner{width:1rem;height:1rem;flex:0 0 auto;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:loro-button-spin .7s linear infinite}.loro-button__sr-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.loro-button:hover:not(:disabled){transform:translateY(-1px)}.loro-button--full{width:100%}.loro-button--primary,.loro-button--primary.loro-button--primary-color{background:linear-gradient(135deg,var(--loro-primary-500),var(--loro-primary-700));color:#fff}.loro-button--secondary,.loro-button--outline{border-color:var(--loro-primary-500);background:transparent;color:var(--loro-primary-700)}.loro-button--tertiary,.loro-button--ghost{background:transparent;color:var(--loro-primary-700)}.loro-button--tertiary{min-height:auto;padding:0;border-radius:.55rem;box-shadow:none}.loro-button--tertiary:hover:not(:disabled){transform:none}.loro-button--tertiary:focus-visible{outline:3px solid color-mix(in srgb,var(--loro-primary-500) 28%,transparent);outline-offset:2px}.loro-button--soft{background:color-mix(in srgb,var(--loro-primary-500) 8%,transparent);color:var(--loro-primary-700)}.loro-button--social{border-color:var(--loro-border-subtle);background:var(--loro-surface);color:var(--loro-text)}.loro-button--action{min-height:var(--loro-button-min-height, 2.75rem);padding:var(--loro-button-padding, 0);border:0;border-radius:var(--loro-button-radius, 50%);background:var(--loro-button-background, transparent);color:var(--loro-button-color, var(--loro-primary-700));box-shadow:var(--loro-button-shadow, none)}.loro-button--action:hover:not(:disabled){background:var(--loro-button-hover-background, color-mix(in srgb, var(--loro-primary) 8%, transparent));transform:translateY(-1px)}.loro-button--action:active:not(:disabled){transform:translateY(1px)}.loro-button--action:focus-visible{outline:3px solid var(--loro-button-focus-ring, color-mix(in srgb, var(--loro-primary) 36%, transparent));outline-offset:3px}.loro-button--social:hover:not(:disabled),.loro-button--social:focus-visible{border-color:var(--loro-primary-500);box-shadow:var(--loro-shadow-soft),0 0 0 3px color-mix(in srgb,var(--loro-primary-500) 14%,transparent)}.loro-button--navigation{justify-content:flex-start;gap:1rem;padding:.5rem;border-color:var(--loro-button-border-color, transparent);border-radius:var(--loro-button-radius, 1rem);color:var(--loro-home-avatar-color);text-align:left}.loro-button--navigation .loro-button__label{flex:1;text-align:left}.loro-button--navigation:hover:not(:disabled):not(.loro-button--danger-color):not(.loro-button--selected),.loro-button--navigation:focus-visible:not(:disabled):not(.loro-button--danger-color):not(.loro-button--selected){background:var(--loro-home-avatar-bg);transform:translateY(-.24rem) scale(1.01)}.loro-button--selected{border-color:var(--loro-button-selected-border-color, var(--loro-button-border-color, transparent));background:var(--loro-button-selected-background, var(--loro-button-background, transparent));color:var(--loro-button-selected-color, var(--loro-button-color, var(--loro-nav-button-text, var(--loro-text-strong))))}.loro-button--navigation.loro-button--selected:hover:not(:disabled),.loro-button--navigation.loro-button--selected:focus-visible:not(:disabled){transform:none;border-color:var(--loro-button-selected-border-color, var(--loro-button-border-color, transparent));background:var(--loro-button-selected-background, var(--loro-button-background, transparent));color:var(--loro-button-selected-color, var(--loro-button-color, var(--loro-nav-button-text, var(--loro-text-strong))));outline:none}.loro-button--danger,.loro-button--danger-color{border-color:color-mix(in srgb,var(--loro-danger-text) 24%,transparent);background:var(--loro-danger-surface);color:var(--loro-danger-text)}.loro-button--navigation.loro-button--danger-color{border-color:var(--loro-button-border-color, transparent);background:var(--loro-button-background, var(--loro-danger-surface));color:var(--loro-button-color, var(--loro-danger-text))}.loro-button--secondary-color.loro-button--primary{background:linear-gradient(135deg,var(--loro-primary-700),var(--loro-primary-900));color:#fff}.loro-button--tertiary-color.loro-button--primary{background:linear-gradient(135deg,color-mix(in srgb,var(--loro-primary-500) 82%,white),var(--loro-primary-700));color:#fff}.loro-button--sm{min-height:var(--loro-button-min-height, 2.35rem);border-radius:var(--loro-button-radius, .65rem);font-size:var(--loro-button-font-size, .82rem)}.loro-button--lg{min-height:var(--loro-button-min-height, 3.65rem);padding:var(--loro-button-padding, .95rem 1.35rem);border-radius:var(--loro-button-radius, 1rem);font-size:var(--loro-button-font-size, 1.08rem)}.loro-button--icon-only{width:var(--loro-button-icon-size, 3rem);min-width:var(--loro-button-icon-size, 3rem);padding:0;aspect-ratio:1}.loro-button:disabled{cursor:not-allowed;opacity:.62;transform:none}.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 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
+      class="loro-card"
+      [routerLink]="link() || null"
+      [class.loro-card--tinted]="variant() === 'tinted'"
+      [class.loro-card--danger]="variant() === 'danger'"
+      [class.loro-card--selectable]="variant() === 'selectable'"
+      [class.loro-card--benefit]="variant() === 'benefit'"
+      [class.loro-card--benefit-showcase]="variant() === 'benefit-showcase'"
+      [class.loro-card--home-hero]="variant() === 'home-hero'"
+      [class.loro-card--home-primary]="variant() === 'home-primary'"
+      [class.loro-card--home-secondary]="variant() === 'home-secondary'"
+      [class.loro-card--interactive]="!!link()"
+      [class.loro-card--justify-start]="justify() === 'start'"
+      [class.loro-card--justify-center]="justify() === 'center'"
+      [class.loro-card--justify-end]="justify() === 'end'"
+      [class.loro-card--mobile-justify-start]="mobileJustify() === 'start'"
+      [class.loro-card--mobile-justify-center]="mobileJustify() === 'center'"
+      [class.loro-card--mobile-justify-end]="mobileJustify() === 'end'"
+      [class.loro-card--selected]="selected()">
+      @if (variant() === 'home-hero') {
+        <div class="loro-card__hero-main">
+          <div class="loro-card__hero-avatar" aria-hidden="true">
+            @if (heroAvatarSrc()) {
+              <img [src]="heroAvatarSrc()!" [alt]="heroAvatarAlt()" />
+            } @else {
+              <loro-icon [name]="heroAvatarIcon()" [size]="heroAvatarIconSize()" [alt]="heroAvatarAlt()" />
+            }
+          </div>
+
+          <div class="loro-card__hero-copy">
+            @if (heroGreeting()) {
+              <p>{{ heroGreeting() }}</p>
+            }
+            @if (heroSubtitle()) {
+              <span>{{ heroSubtitle() }}</span>
+            }
+          </div>
+        </div>
+
+        @if (heroVisualImage()) {
+          <div class="loro-card__hero-visual" aria-hidden="true">
+            <loro-image [name]="heroVisualImage()!" [alt]="heroVisualAlt()" width="100%" />
+          </div>
+        }
+      }
+
+      @if ((title() || icon()) && variant() !== 'home-hero') {
+        <header class="loro-card__header">
+          @if (icon()) {
+            <span class="loro-card__icon">
+              <loro-icon
+                [name]="icon()!"
+                [size]="resolvedIconSize()"
+                [alt]="title() || icon()!"
+                [color]="iconColor()"
+                [decorative]="true"
+              />
+            </span>
+          }
+          <div class="loro-card__copy">
+            @if (title()) {
+              <h2 class="loro-card__title">{{ title() }}</h2>
+            }
+            @if (description()) {
+              <p class="loro-card__description">{{ description() }}</p>
+            }
+          </div>
+        </header>
+      }
+      <ng-content />
+      @if (showArrow()) {
+        <span class="loro-card__arrow" aria-hidden="true">
+          <loro-icon name="arrow-right" [size]="arrowSize()" alt="Ir" />
+        </span>
+      }
+    </a>
+  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand);container-type:inline-size}.loro-card{display:grid;gap:1.25rem;padding:clamp(1.25rem,3vw,1.75rem);border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-card);background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft);color:var(--loro-text);text-decoration:none;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background-color .18s ease}.loro-card--interactive{cursor:pointer}.loro-card--interactive:hover,.loro-card--interactive:focus-visible{transform:translateY(-1px);border-color:var(--loro-border-strong);outline:none}.loro-card--tinted{background:var(--loro-surface-tinted)}.loro-card--danger{border-color:#dc262638;background:#dc26260f}.loro-card--selectable{cursor:pointer}.loro-card--selected{border-color:var(--loro-primary-500);background:#6c3cff0d;box-shadow:0 0 0 1px #6c3cff33,var(--loro-shadow-soft)}.loro-card--benefit,.loro-card--benefit-showcase{gap:var(--loro-card-benefit-gap, .7rem);padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;transition:none}.loro-card__header{display:flex;align-items:center;gap:1rem;min-width:0}.loro-card__icon{display:grid;width:3.5rem;height:3.5rem;flex:0 0 auto;place-items:center;border-radius:1rem;background:var(--loro-brand-tint-surface);margin-block-end:.5rem}.loro-card--benefit .loro-card__header,.loro-card--benefit-showcase .loro-card__header{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--loro-card-benefit-header-gap, .75rem);min-width:0}.loro-card--benefit .loro-card__icon,.loro-card--benefit-showcase .loro-card__icon{width:var(--loro-card-benefit-icon-width, var(--loro-card-benefit-icon-size, 2.25rem));height:var(--loro-card-benefit-icon-height, var(--loro-card-benefit-icon-size, 2.25rem));border-radius:999px;background:var(--loro-card-benefit-icon-bg, var(--loro-primary-500));color:#fff}.loro-card__copy{min-width:0}.loro-card__title,.loro-card__description{margin:0}.loro-card__title{color:var(--loro-text-strong);font-size:clamp(1.15rem,2vw,1.45rem);font-weight:900;line-height:1.15}.loro-card__description{margin-top:.35rem;color:var(--loro-muted);font-size:.95rem;line-height:1.45}.loro-card__arrow{display:none;align-items:center;justify-content:center;justify-self:end;width:2.2rem;height:2.2rem;border-radius:999px;line-height:0}.loro-card--benefit .loro-card__title,.loro-card--benefit-showcase .loro-card__title{color:var(--loro-text-strong);font-size:var(--loro-card-benefit-title-font-size, 1rem);font-weight:900;line-height:var(--loro-card-benefit-title-line-height, 1.15);overflow-wrap:anywhere}.loro-card--benefit .loro-card__description,.loro-card--benefit-showcase .loro-card__description{margin-top:.12rem;color:var(--loro-muted);font-size:var(--loro-card-benefit-description-font-size, .82rem);font-weight:var(--loro-card-benefit-description-font-weight, 750);line-height:var(--loro-card-benefit-description-line-height, 1.25);overflow-wrap:anywhere}.loro-card--benefit .loro-card__copy,.loro-card--benefit-showcase .loro-card__copy{min-width:0;width:100%;flex:1 1 auto}.loro-card--benefit-showcase{width:100%;min-width:0}.loro-card--benefit.loro-card--justify-start .loro-card__header,.loro-card--benefit-showcase.loro-card--justify-start .loro-card__header{justify-content:flex-start;text-align:left}.loro-card--benefit.loro-card--justify-center .loro-card__header,.loro-card--benefit-showcase.loro-card--justify-center .loro-card__header{justify-content:center;text-align:center}.loro-card--benefit.loro-card--justify-end .loro-card__header,.loro-card--benefit-showcase.loro-card--justify-end .loro-card__header{justify-content:flex-end;text-align:right}.loro-card--home-primary,.loro-card--home-secondary{position:relative;display:flex;flex-direction:column;align-items:stretch;height:100%;gap:0;min-height:10.5rem;padding:1rem;overflow:hidden;isolation:isolate;border-color:var(--loro-home-card-border);border-radius:1.45rem;background:var(--loro-surface-soft);text-align:left}.loro-card--home-primary:before,.loro-card--home-primary:after,.loro-card--home-secondary:before,.loro-card--home-secondary:after{position:absolute;inset:0;content:\"\";pointer-events:none}.loro-card--home-primary>*,.loro-card--home-secondary>*{position:relative;z-index:1}.loro-card--home-primary .loro-card__header,.loro-card--home-secondary .loro-card__header{display:block;flex:1 1 auto;text-align:left}.loro-card--home-primary .loro-card__icon,.loro-card--home-secondary .loro-card__icon{position:relative;width:3rem;height:3rem;border:1px solid rgba(255,255,255,.2);border-radius:1.15rem;background:var(--loro-home-card-icon-bg);box-shadow:var(--loro-home-card-icon-shadow);color:var(--loro-home-card-icon-color)}.loro-card--home-primary .loro-card__copy,.loro-card--home-secondary .loro-card__copy{min-width:0;display:grid;grid-template-rows:auto auto;justify-items:start;gap:.4rem;min-height:0}.loro-card--home-primary .loro-card__title,.loro-card--home-secondary .loro-card__title{color:var(--loro-home-card-title);font-size:1.16rem;font-weight:800;line-height:1.15;letter-spacing:-.02em;text-align:left}.loro-card--home-primary .loro-card__description,.loro-card--home-secondary .loro-card__description{max-width:none;min-height:0;margin-top:0;color:var(--loro-home-card-description);font-size:.9rem;line-height:1.45;text-align:left}.loro-card--home-primary .loro-card__arrow,.loro-card--home-secondary .loro-card__arrow{display:inline-flex;color:var(--loro-home-card-arrow-color);align-items:center;justify-content:center;align-self:flex-end;margin-top:auto}.loro-card--home-secondary .loro-card__title{font-size:1.08rem}.loro-card--home-secondary .loro-card__description{font-size:.85rem}.loro-card--home-primary:hover,.loro-card--home-primary:focus-visible,.loro-card--home-secondary:hover,.loro-card--home-secondary:focus-visible{transform:translateY(-.24rem) scale(1.01);border-color:var(--loro-home-card-hover-border);box-shadow:var(--loro-home-card-hover-shadow)}.loro-card--home-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.75rem;min-height:6.25rem;overflow:hidden;border-color:var(--loro-home-hero-border);border-radius:1.1rem;background:var(--loro-home-hero-bg);padding:.875rem 1rem;color:var(--loro-home-hero-text)}.loro-card--home-hero .loro-card__header,.loro-card--home-hero .loro-card__copy,.loro-card--home-hero .loro-card__icon{display:none}.loro-card__hero-main{display:flex;align-items:center;gap:.75rem;min-width:0}.loro-card__hero-avatar{display:grid;width:3rem;height:3rem;flex:0 0 3rem;place-items:center;overflow:hidden;border-radius:.95rem;background:var(--loro-home-avatar-bg);color:var(--loro-home-avatar-color)}.loro-card__hero-avatar img{width:100%;height:100%;object-fit:cover}.loro-card__hero-copy{display:grid;gap:.18rem;min-width:0}.loro-card__hero-copy p,.loro-card__hero-copy span{margin:0}.loro-card__hero-copy p{font-size:1rem;font-weight:800;line-height:1.2}.loro-card__hero-copy span{color:var(--loro-home-hero-subtitle);font-size:.875rem;line-height:1.35}.loro-card__hero-visual{width:clamp(4.5rem,24vw,5.75rem);align-self:end}.loro-card--home-hero:hover,.loro-card--home-hero:focus-visible{transform:none;border-color:var(--loro-home-hero-border);box-shadow:var(--loro-shadow-soft)}@media(max-width:1023.88px){.loro-card--benefit.loro-card--mobile-justify-start .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-start .loro-card__header{text-align:left}.loro-card--benefit.loro-card--mobile-justify-center .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-center .loro-card__header{text-align:center;justify-self:center;width:fit-content;max-width:100%;margin-inline:auto}.loro-card--benefit.loro-card--mobile-justify-end .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-end .loro-card__header{text-align:right}.loro-card--benefit.loro-card--mobile-justify-start .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-start .loro-card__header{grid-template-columns:auto minmax(0,1fr)}.loro-card--benefit.loro-card--mobile-justify-center .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-center .loro-card__header{grid-template-columns:auto auto}.loro-card--benefit.loro-card--mobile-justify-end .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-end .loro-card__header{grid-template-columns:auto minmax(0,1fr)}}@container (min-width: 18rem){.loro-card--home-primary,.loro-card--home-secondary{min-height:9.75rem}.loro-card--home-primary .loro-card__header,.loro-card--home-secondary .loro-card__header{display:block}.loro-card--home-hero{min-height:7.25rem;padding:1rem 1.25rem}.loro-card__hero-visual{width:clamp(5.25rem,20vw,7rem)}}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: LoroIcon$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }, { kind: "component", type: LoroImage$1, 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$1, LoroImage$1], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <a
+      class="loro-card"
+      [routerLink]="link() || null"
+      [class.loro-card--tinted]="variant() === 'tinted'"
+      [class.loro-card--danger]="variant() === 'danger'"
+      [class.loro-card--selectable]="variant() === 'selectable'"
+      [class.loro-card--benefit]="variant() === 'benefit'"
+      [class.loro-card--benefit-showcase]="variant() === 'benefit-showcase'"
+      [class.loro-card--home-hero]="variant() === 'home-hero'"
+      [class.loro-card--home-primary]="variant() === 'home-primary'"
+      [class.loro-card--home-secondary]="variant() === 'home-secondary'"
+      [class.loro-card--interactive]="!!link()"
+      [class.loro-card--justify-start]="justify() === 'start'"
+      [class.loro-card--justify-center]="justify() === 'center'"
+      [class.loro-card--justify-end]="justify() === 'end'"
+      [class.loro-card--mobile-justify-start]="mobileJustify() === 'start'"
+      [class.loro-card--mobile-justify-center]="mobileJustify() === 'center'"
+      [class.loro-card--mobile-justify-end]="mobileJustify() === 'end'"
+      [class.loro-card--selected]="selected()">
+      @if (variant() === 'home-hero') {
+        <div class="loro-card__hero-main">
+          <div class="loro-card__hero-avatar" aria-hidden="true">
+            @if (heroAvatarSrc()) {
+              <img [src]="heroAvatarSrc()!" [alt]="heroAvatarAlt()" />
+            } @else {
+              <loro-icon [name]="heroAvatarIcon()" [size]="heroAvatarIconSize()" [alt]="heroAvatarAlt()" />
+            }
+          </div>
+
+          <div class="loro-card__hero-copy">
+            @if (heroGreeting()) {
+              <p>{{ heroGreeting() }}</p>
+            }
+            @if (heroSubtitle()) {
+              <span>{{ heroSubtitle() }}</span>
+            }
+          </div>
+        </div>
+
+        @if (heroVisualImage()) {
+          <div class="loro-card__hero-visual" aria-hidden="true">
+            <loro-image [name]="heroVisualImage()!" [alt]="heroVisualAlt()" width="100%" />
+          </div>
+        }
+      }
+
+      @if ((title() || icon()) && variant() !== 'home-hero') {
+        <header class="loro-card__header">
+          @if (icon()) {
+            <span class="loro-card__icon">
+              <loro-icon
+                [name]="icon()!"
+                [size]="resolvedIconSize()"
+                [alt]="title() || icon()!"
+                [color]="iconColor()"
+                [decorative]="true"
+              />
+            </span>
+          }
+          <div class="loro-card__copy">
+            @if (title()) {
+              <h2 class="loro-card__title">{{ title() }}</h2>
+            }
+            @if (description()) {
+              <p class="loro-card__description">{{ description() }}</p>
+            }
+          </div>
+        </header>
+      }
+      <ng-content />
+      @if (showArrow()) {
+        <span class="loro-card__arrow" aria-hidden="true">
+          <loro-icon name="arrow-right" [size]="arrowSize()" alt="Ir" />
+        </span>
+      }
+    </a>
+  `, styles: [":host{display:block;font-family:var(--loro-font-brand);container-type:inline-size}.loro-card{display:grid;gap:1.25rem;padding:clamp(1.25rem,3vw,1.75rem);border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-card);background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft);color:var(--loro-text);text-decoration:none;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background-color .18s ease}.loro-card--interactive{cursor:pointer}.loro-card--interactive:hover,.loro-card--interactive:focus-visible{transform:translateY(-1px);border-color:var(--loro-border-strong);outline:none}.loro-card--tinted{background:var(--loro-surface-tinted)}.loro-card--danger{border-color:#dc262638;background:#dc26260f}.loro-card--selectable{cursor:pointer}.loro-card--selected{border-color:var(--loro-primary-500);background:#6c3cff0d;box-shadow:0 0 0 1px #6c3cff33,var(--loro-shadow-soft)}.loro-card--benefit,.loro-card--benefit-showcase{gap:var(--loro-card-benefit-gap, .7rem);padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;transition:none}.loro-card__header{display:flex;align-items:center;gap:1rem;min-width:0}.loro-card__icon{display:grid;width:3.5rem;height:3.5rem;flex:0 0 auto;place-items:center;border-radius:1rem;background:var(--loro-brand-tint-surface);margin-block-end:.5rem}.loro-card--benefit .loro-card__header,.loro-card--benefit-showcase .loro-card__header{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--loro-card-benefit-header-gap, .75rem);min-width:0}.loro-card--benefit .loro-card__icon,.loro-card--benefit-showcase .loro-card__icon{width:var(--loro-card-benefit-icon-width, var(--loro-card-benefit-icon-size, 2.25rem));height:var(--loro-card-benefit-icon-height, var(--loro-card-benefit-icon-size, 2.25rem));border-radius:999px;background:var(--loro-card-benefit-icon-bg, var(--loro-primary-500));color:#fff}.loro-card__copy{min-width:0}.loro-card__title,.loro-card__description{margin:0}.loro-card__title{color:var(--loro-text-strong);font-size:clamp(1.15rem,2vw,1.45rem);font-weight:900;line-height:1.15}.loro-card__description{margin-top:.35rem;color:var(--loro-muted);font-size:.95rem;line-height:1.45}.loro-card__arrow{display:none;align-items:center;justify-content:center;justify-self:end;width:2.2rem;height:2.2rem;border-radius:999px;line-height:0}.loro-card--benefit .loro-card__title,.loro-card--benefit-showcase .loro-card__title{color:var(--loro-text-strong);font-size:var(--loro-card-benefit-title-font-size, 1rem);font-weight:900;line-height:var(--loro-card-benefit-title-line-height, 1.15);overflow-wrap:anywhere}.loro-card--benefit .loro-card__description,.loro-card--benefit-showcase .loro-card__description{margin-top:.12rem;color:var(--loro-muted);font-size:var(--loro-card-benefit-description-font-size, .82rem);font-weight:var(--loro-card-benefit-description-font-weight, 750);line-height:var(--loro-card-benefit-description-line-height, 1.25);overflow-wrap:anywhere}.loro-card--benefit .loro-card__copy,.loro-card--benefit-showcase .loro-card__copy{min-width:0;width:100%;flex:1 1 auto}.loro-card--benefit-showcase{width:100%;min-width:0}.loro-card--benefit.loro-card--justify-start .loro-card__header,.loro-card--benefit-showcase.loro-card--justify-start .loro-card__header{justify-content:flex-start;text-align:left}.loro-card--benefit.loro-card--justify-center .loro-card__header,.loro-card--benefit-showcase.loro-card--justify-center .loro-card__header{justify-content:center;text-align:center}.loro-card--benefit.loro-card--justify-end .loro-card__header,.loro-card--benefit-showcase.loro-card--justify-end .loro-card__header{justify-content:flex-end;text-align:right}.loro-card--home-primary,.loro-card--home-secondary{position:relative;display:flex;flex-direction:column;align-items:stretch;height:100%;gap:0;min-height:10.5rem;padding:1rem;overflow:hidden;isolation:isolate;border-color:var(--loro-home-card-border);border-radius:1.45rem;background:var(--loro-surface-soft);text-align:left}.loro-card--home-primary:before,.loro-card--home-primary:after,.loro-card--home-secondary:before,.loro-card--home-secondary:after{position:absolute;inset:0;content:\"\";pointer-events:none}.loro-card--home-primary>*,.loro-card--home-secondary>*{position:relative;z-index:1}.loro-card--home-primary .loro-card__header,.loro-card--home-secondary .loro-card__header{display:block;flex:1 1 auto;text-align:left}.loro-card--home-primary .loro-card__icon,.loro-card--home-secondary .loro-card__icon{position:relative;width:3rem;height:3rem;border:1px solid rgba(255,255,255,.2);border-radius:1.15rem;background:var(--loro-home-card-icon-bg);box-shadow:var(--loro-home-card-icon-shadow);color:var(--loro-home-card-icon-color)}.loro-card--home-primary .loro-card__copy,.loro-card--home-secondary .loro-card__copy{min-width:0;display:grid;grid-template-rows:auto auto;justify-items:start;gap:.4rem;min-height:0}.loro-card--home-primary .loro-card__title,.loro-card--home-secondary .loro-card__title{color:var(--loro-home-card-title);font-size:1.16rem;font-weight:800;line-height:1.15;letter-spacing:-.02em;text-align:left}.loro-card--home-primary .loro-card__description,.loro-card--home-secondary .loro-card__description{max-width:none;min-height:0;margin-top:0;color:var(--loro-home-card-description);font-size:.9rem;line-height:1.45;text-align:left}.loro-card--home-primary .loro-card__arrow,.loro-card--home-secondary .loro-card__arrow{display:inline-flex;color:var(--loro-home-card-arrow-color);align-items:center;justify-content:center;align-self:flex-end;margin-top:auto}.loro-card--home-secondary .loro-card__title{font-size:1.08rem}.loro-card--home-secondary .loro-card__description{font-size:.85rem}.loro-card--home-primary:hover,.loro-card--home-primary:focus-visible,.loro-card--home-secondary:hover,.loro-card--home-secondary:focus-visible{transform:translateY(-.24rem) scale(1.01);border-color:var(--loro-home-card-hover-border);box-shadow:var(--loro-home-card-hover-shadow)}.loro-card--home-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.75rem;min-height:6.25rem;overflow:hidden;border-color:var(--loro-home-hero-border);border-radius:1.1rem;background:var(--loro-home-hero-bg);padding:.875rem 1rem;color:var(--loro-home-hero-text)}.loro-card--home-hero .loro-card__header,.loro-card--home-hero .loro-card__copy,.loro-card--home-hero .loro-card__icon{display:none}.loro-card__hero-main{display:flex;align-items:center;gap:.75rem;min-width:0}.loro-card__hero-avatar{display:grid;width:3rem;height:3rem;flex:0 0 3rem;place-items:center;overflow:hidden;border-radius:.95rem;background:var(--loro-home-avatar-bg);color:var(--loro-home-avatar-color)}.loro-card__hero-avatar img{width:100%;height:100%;object-fit:cover}.loro-card__hero-copy{display:grid;gap:.18rem;min-width:0}.loro-card__hero-copy p,.loro-card__hero-copy span{margin:0}.loro-card__hero-copy p{font-size:1rem;font-weight:800;line-height:1.2}.loro-card__hero-copy span{color:var(--loro-home-hero-subtitle);font-size:.875rem;line-height:1.35}.loro-card__hero-visual{width:clamp(4.5rem,24vw,5.75rem);align-self:end}.loro-card--home-hero:hover,.loro-card--home-hero:focus-visible{transform:none;border-color:var(--loro-home-hero-border);box-shadow:var(--loro-shadow-soft)}@media(max-width:1023.88px){.loro-card--benefit.loro-card--mobile-justify-start .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-start .loro-card__header{text-align:left}.loro-card--benefit.loro-card--mobile-justify-center .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-center .loro-card__header{text-align:center;justify-self:center;width:fit-content;max-width:100%;margin-inline:auto}.loro-card--benefit.loro-card--mobile-justify-end .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-end .loro-card__header{text-align:right}.loro-card--benefit.loro-card--mobile-justify-start .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-start .loro-card__header{grid-template-columns:auto minmax(0,1fr)}.loro-card--benefit.loro-card--mobile-justify-center .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-center .loro-card__header{grid-template-columns:auto auto}.loro-card--benefit.loro-card--mobile-justify-end .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-end .loro-card__header{grid-template-columns:auto minmax(0,1fr)}}@container (min-width: 18rem){.loro-card--home-primary,.loro-card--home-secondary{min-height:9.75rem}.loro-card--home-primary .loro-card__header,.loro-card--home-secondary .loro-card__header{display:block}.loro-card--home-hero{min-height:7.25rem;padding:1rem 1.25rem}.loro-card__hero-visual{width:clamp(5.25rem,20vw,7rem)}}\n"] }]
+        }], 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 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;
+        }
+        if (this.trailing() === 'radio') {
+            this.selectedChange.emit(this.value());
+            return;
+        }
+        const route = this.route();
+        if (route && this.router) {
+            void this.router.navigateByUrl(route);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroCardNav, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroCardNav, isStandalone: true, selector: "loro-card-nav", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, route: { classPropertyName: "route", publicName: "route", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, trailing: { classPropertyName: "trailing", publicName: "trailing", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, badgeLabel: { classPropertyName: "badgeLabel", publicName: "badgeLabel", isSignal: true, isRequired: false, transformFunction: null }, badgeVariant: { classPropertyName: "badgeVariant", publicName: "badgeVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", checkedChange: "checkedChange", selectedChange: "selectedChange" }, ngImport: i0, template: `
+    <button
+      type="button"
+      class="loro-card-nav"
+      [class.loro-card-nav--danger]="variant() === 'danger'"
+      [class.loro-card-nav--soft]="variant() === 'soft'"
+      [class.loro-card-nav--selected]="selected()"
+      (click)="activate()">
+      @if (icon()) {
+        <span class="loro-card-nav__icon">
+          <loro-icon
+            [name]="icon()!"
+            [size]="iconSize()"
+            [alt]="title()"
+            [color]="variant() === 'danger' ? 'danger' : iconColor()" />
+        </span>
+      }
+
+      <span class="loro-card-nav__copy">
+        <span class="loro-card-nav__title">{{ title() }}</span>
+        @if (description()) {
+          <span class="loro-card-nav__description">{{ description() }}</span>
+        }
+      </span>
+
+      <span class="loro-card-nav__trailing" (click)="$event.stopPropagation()">
+        @switch (trailing()) {
+          @case ('toggle') {
+            <loro-toggle [checked]="checked()" [ariaLabel]="title()" (checkedChange)="checkedChange.emit($event)" />
+          }
+          @case ('radio') {
+            <loro-radio [label]="''" [value]="value()" [checked]="selected()" (selected)="selectedChange.emit($event)" />
+          }
+          @case ('text') {
+            <span class="loro-card-nav__value">{{ value() }}</span>
+          }
+          @case ('badge') {
+            <loro-badge [label]="badgeLabel() || value()" [variant]="badgeVariant()" />
+          }
+          @case ('arrow') {
+            <loro-icon
+              class="loro-card-nav__arrow"
+              name="chevron-right"
+              [size]="22"
+              alt="Abrir"
+              [color]="variant() === 'danger' ? 'danger' : 'primary'" />
+          }
+        }
+      </span>
+    </button>
+  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-card-nav{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;width:100%;min-height:4.8rem;padding:.95rem 1.1rem;border:0;border-bottom:1px solid var(--loro-border-subtle);background:transparent;color:var(--loro-text);font:inherit;text-align:left;cursor:pointer}.loro-card-nav:last-child{border-bottom:0}.loro-card-nav--soft,.loro-card-nav--danger{border:1px solid var(--loro-border-subtle);border-radius:1rem;background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft)}.loro-card-nav--danger{border-color:color-mix(in srgb,var(--loro-danger-text) 30%,transparent);background:var(--loro-danger-surface);color:var(--loro-danger-text)}.loro-card-nav--selected{border-color:#6c3cff52;background:#6c3cff0a}.loro-card-nav__icon{display:grid;width:3.15rem;height:3.15rem;place-items:center;border-radius:.9rem;background:var(--loro-brand-tint-surface)}.loro-card-nav--danger .loro-card-nav__icon{background:color-mix(in srgb,var(--loro-danger-text) 12%,transparent)}.loro-card-nav__copy{display:grid;gap:.25rem;min-width:0}.loro-card-nav__title{color:currentColor;font-size:1rem;font-weight:900;line-height:1.2}.loro-card-nav__description{color:var(--loro-muted);font-size:.9rem;font-weight:600;line-height:1.35}.loro-card-nav--danger .loro-card-nav__description{color:color-mix(in srgb,var(--loro-danger-text) 72%,var(--loro-muted))}.loro-card-nav__trailing{display:inline-flex;align-items:center;justify-content:flex-end;min-width:0}.loro-card-nav__value{color:var(--loro-muted-strong);font-weight:800;white-space:nowrap}@media(max-width:520px){.loro-card-nav{gap:.85rem;min-height:5.2rem;padding-inline:1rem}.loro-card-nav__icon{width:3rem;height:3rem}}\n"], dependencies: [{ kind: "component", type: LoroBadge$1, selector: "loro-badge", inputs: ["label", "variant"] }, { kind: "component", type: LoroIcon$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }, { kind: "component", type: LoroRadio$1, selector: "loro-radio", inputs: ["label", "value", "description", "checked", "variant"], outputs: ["selected"] }, { kind: "component", type: LoroToggle$1, selector: "loro-toggle", inputs: ["checked", "disabled", "ariaLabel"], outputs: ["checkedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+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$1, LoroIcon$1, LoroRadio$1, LoroToggle$1], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <button
+      type="button"
+      class="loro-card-nav"
+      [class.loro-card-nav--danger]="variant() === 'danger'"
+      [class.loro-card-nav--soft]="variant() === 'soft'"
+      [class.loro-card-nav--selected]="selected()"
+      (click)="activate()">
+      @if (icon()) {
+        <span class="loro-card-nav__icon">
+          <loro-icon
+            [name]="icon()!"
+            [size]="iconSize()"
+            [alt]="title()"
+            [color]="variant() === 'danger' ? 'danger' : iconColor()" />
+        </span>
+      }
+
+      <span class="loro-card-nav__copy">
+        <span class="loro-card-nav__title">{{ title() }}</span>
+        @if (description()) {
+          <span class="loro-card-nav__description">{{ description() }}</span>
+        }
+      </span>
+
+      <span class="loro-card-nav__trailing" (click)="$event.stopPropagation()">
+        @switch (trailing()) {
+          @case ('toggle') {
+            <loro-toggle [checked]="checked()" [ariaLabel]="title()" (checkedChange)="checkedChange.emit($event)" />
+          }
+          @case ('radio') {
+            <loro-radio [label]="''" [value]="value()" [checked]="selected()" (selected)="selectedChange.emit($event)" />
+          }
+          @case ('text') {
+            <span class="loro-card-nav__value">{{ value() }}</span>
+          }
+          @case ('badge') {
+            <loro-badge [label]="badgeLabel() || value()" [variant]="badgeVariant()" />
+          }
+          @case ('arrow') {
+            <loro-icon
+              class="loro-card-nav__arrow"
+              name="chevron-right"
+              [size]="22"
+              alt="Abrir"
+              [color]="variant() === 'danger' ? 'danger' : 'primary'" />
+          }
+        }
+      </span>
+    </button>
+  `, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-card-nav{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;width:100%;min-height:4.8rem;padding:.95rem 1.1rem;border:0;border-bottom:1px solid var(--loro-border-subtle);background:transparent;color:var(--loro-text);font:inherit;text-align:left;cursor:pointer}.loro-card-nav:last-child{border-bottom:0}.loro-card-nav--soft,.loro-card-nav--danger{border:1px solid var(--loro-border-subtle);border-radius:1rem;background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft)}.loro-card-nav--danger{border-color:color-mix(in srgb,var(--loro-danger-text) 30%,transparent);background:var(--loro-danger-surface);color:var(--loro-danger-text)}.loro-card-nav--selected{border-color:#6c3cff52;background:#6c3cff0a}.loro-card-nav__icon{display:grid;width:3.15rem;height:3.15rem;place-items:center;border-radius:.9rem;background:var(--loro-brand-tint-surface)}.loro-card-nav--danger .loro-card-nav__icon{background:color-mix(in srgb,var(--loro-danger-text) 12%,transparent)}.loro-card-nav__copy{display:grid;gap:.25rem;min-width:0}.loro-card-nav__title{color:currentColor;font-size:1rem;font-weight:900;line-height:1.2}.loro-card-nav__description{color:var(--loro-muted);font-size:.9rem;font-weight:600;line-height:1.35}.loro-card-nav--danger .loro-card-nav__description{color:color-mix(in srgb,var(--loro-danger-text) 72%,var(--loro-muted))}.loro-card-nav__trailing{display:inline-flex;align-items:center;justify-content:flex-end;min-width:0}.loro-card-nav__value{color:var(--loro-muted-strong);font-weight:800;white-space:nowrap}@media(max-width:520px){.loro-card-nav{gap:.85rem;min-height:5.2rem;padding-inline:1rem}.loro-card-nav__icon{width:3rem;height:3rem}}\n"] }]
+        }], 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$1);
+    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');
+    }
+    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$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }, { kind: "component", type: LoroImage$1, selector: "loro-image", inputs: ["name", "alt", "size", "width", "height", "fit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroDashboardCard, decorators: [{
+            type: Component,
+            args: [{ selector: 'loro-dashboard-card', standalone: true, imports: [RouterLink, LoroIcon$1, LoroImage$1], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n  class=\"loro-dashboard-card\"\n  [class.loro-dashboard-card--home]=\"variant() === 'home'\"\n  data-touch-hover\n  [routerLink]=\"link()\"\n  (click)=\"onCardClick()\"\n>\n  <div class=\"loro-dashboard-card__media\" aria-hidden=\"true\">\n    @if (illustration()) {\n      <loro-image\n        [name]=\"illustration()!\"\n        [alt]=\"title()\"\n        width=\"100%\"\n      />\n    } @else if (icon()) {\n      <loro-icon\n        [name]=\"icon()!\"\n        [size]=\"iconSize()\"\n        [alt]=\"title()\"\n      />\n    }\n  </div>\n\n  <div class=\"loro-dashboard-card__content\">\n    <h3>{{ title() }}</h3>\n\n    @if (description()) {\n      <p>{{ description() }}</p>\n    }\n  </div>\n\n  @if (showArrow()) {\n    <div class=\"loro-dashboard-card__arrow\" aria-hidden=\"true\">\n      <loro-icon name=\"arrow-right\" [size]=\"arrowSize()\" alt=\"Ir\" />\n    </div>\n  }\n</a>\n", styles: [":host{display:block;width:100%;min-width:0;height:100%;container-type:inline-size}.loro-dashboard-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:var(--loro-dashboard-card-media-size, 5rem) minmax(var(--loro-dashboard-card-content-min-height, 5.25rem),auto);align-content:center;align-items:start;justify-items:center;gap:var(--loro-dashboard-card-gap, 1rem);width:100%;min-width:0;height:100%;min-height:var(--loro-dashboard-card-min-height, 14.5rem);overflow:hidden;border:1px solid var(--loro-dashboard-card-border, var(--loro-border-subtle));border-radius:var(--loro-dashboard-card-radius, var(--loro-radius-card));background:var(--loro-surface-soft);padding:var(--loro-dashboard-card-padding, 1.625rem 1.25rem);box-shadow:var(--loro-dashboard-card-shadow, var(--loro-shadow-soft));color:inherit;font-family:var(--loro-font-brand);text-align:center;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.loro-dashboard-card:hover,.loro-dashboard-card.is-touch-hover{transform:translateY(-.125rem);border-color:var(--loro-dashboard-card-hover-border, var(--loro-border-strong));box-shadow:var(--loro-dashboard-card-hover-shadow, var(--loro-shadow-panel))}.loro-dashboard-card:active{transform:translateY(0)}.loro-dashboard-card:focus-visible{outline:.1875rem solid var(--loro-focus-ring);outline-offset:.1875rem}.loro-dashboard-card__media{display:grid;width:var(--loro-dashboard-card-media-size, 5rem);height:var(--loro-dashboard-card-media-size, 5rem);place-items:center;min-width:0;color:var(--loro-dashboard-card-icon-color, var(--loro-primary-500));line-height:0}.loro-dashboard-card__media loro-icon,.loro-dashboard-card__media loro-image{display:block;max-width:100%;max-height:100%}.loro-dashboard-card__content{display:grid;grid-template-rows:minmax(var(--loro-dashboard-card-title-min-height, 1.375rem),auto) minmax(var(--loro-dashboard-card-description-min-height, 3.25rem),auto);align-content:start;gap:var(--loro-dashboard-card-content-gap, .5rem);min-width:0;min-height:var(--loro-dashboard-card-content-min-height, 5.25rem);justify-items:center}.loro-dashboard-card__content h3{display:flex;align-items:end;justify-content:center;min-height:var(--loro-dashboard-card-title-min-height, 1.375rem);margin:0;max-width:100%;color:var(--loro-dashboard-card-title-color, var(--loro-primary-900));font-size:var(--loro-dashboard-card-title-size, clamp(1rem, 4.8cqi, 1.25rem));font-weight:var(--loro-dashboard-card-title-weight, 800);line-height:1.1;letter-spacing:-.035em;text-align:center;overflow-wrap:anywhere}.loro-dashboard-card__content p{margin:0;max-width:var(--loro-dashboard-card-description-width, 13.5rem);min-height:var(--loro-dashboard-card-description-min-height, 3.25rem);color:var(--loro-dashboard-card-description-color, var(--loro-muted));font-size:var(--loro-dashboard-card-description-size, clamp(.8125rem, 3.8cqi, .975rem));font-weight:500;line-height:1.35;text-align:center;overflow-wrap:anywhere}.loro-dashboard-card__arrow{display:none;color:var(--loro-dashboard-card-arrow-color, var(--loro-primary-500));line-height:0}.loro-dashboard-card--home{grid-template-rows:var(--loro-dashboard-card-home-media-size, 3rem) minmax(0,1fr) auto;align-content:start;justify-items:stretch;gap:.9rem;min-height:9.75rem;isolation:isolate;border-color:var(--loro-home-card-border);border-radius:1.45rem;background:var(--loro-surface-soft);padding:1rem;text-align:left}.loro-dashboard-card--home .loro-dashboard-card__media{position:relative;width:var(--loro-dashboard-card-home-media-size, 3rem);height:var(--loro-dashboard-card-home-media-size, 3rem);border:1px solid rgba(255,255,255,.2);border-radius:1.15rem;background:var(--loro-home-card-icon-bg);box-shadow:var(--loro-home-card-icon-shadow);color:var(--loro-home-card-icon-color)}.loro-dashboard-card--home .loro-dashboard-card__content{grid-template-rows:auto auto;justify-items:start;gap:.4rem;min-height:0}.loro-dashboard-card--home .loro-dashboard-card__content h3,.loro-dashboard-card--home .loro-dashboard-card__content p{text-align:left}.loro-dashboard-card--home .loro-dashboard-card__content h3{color:var(--loro-home-card-title);font-size:1.16rem;font-weight:800;letter-spacing:-.02em}.loro-dashboard-card--home .loro-dashboard-card__content p{max-width:none;min-height:0;color:var(--loro-home-card-description);font-size:.9rem;line-height:1.45}.loro-dashboard-card--home .loro-dashboard-card__arrow{display:inline-flex;justify-self:end;color:var(--loro-home-card-arrow-color)}.loro-dashboard-card--home:hover,.loro-dashboard-card--home.is-touch-hover{transform:translateY(-.24rem) scale(1.01);border-color:var(--loro-home-card-hover-border);box-shadow:var(--loro-home-card-hover-shadow)}.loro-dashboard-card--home:before,.loro-dashboard-card--home:after{position:absolute;inset:0;content:\"\";pointer-events:none}.loro-dashboard-card--home>*{position:relative;z-index:1}@container (min-width: 18rem){.loro-dashboard-card{grid-template-columns:var(--loro-dashboard-card-desktop-media-size, 5.25rem) minmax(0,1fr) auto;grid-template-rows:auto;align-content:center;align-items:center;justify-items:start;gap:var(--loro-dashboard-card-desktop-gap, 1.5rem);min-height:var(--loro-dashboard-card-row-min-height, 6.75rem);padding:var(--loro-dashboard-card-desktop-padding, 1.25rem 1.5rem);border-radius:var(--loro-dashboard-card-desktop-radius, 1rem);text-align:left}.loro-dashboard-card__media{width:var(--loro-dashboard-card-desktop-media-size, 5.25rem);height:var(--loro-dashboard-card-desktop-media-size, 5.25rem);justify-self:start}.loro-dashboard-card__content{grid-template-rows:auto auto;gap:var(--loro-dashboard-card-desktop-content-gap, .5rem);min-height:0;justify-items:start}.loro-dashboard-card__content h3,.loro-dashboard-card__content p{min-height:0;text-align:left}.loro-dashboard-card__content h3{font-size:var(--loro-dashboard-card-desktop-title-size, 1rem)}.loro-dashboard-card__content p{max-width:var(--loro-dashboard-card-desktop-description-width, 18rem);font-size:var(--loro-dashboard-card-desktop-description-size, .8125rem)}.loro-dashboard-card__arrow{display:flex;align-items:center;justify-content:flex-end;justify-self:end;margin-top:auto}.loro-dashboard-card--home{grid-template-columns:minmax(0,1fr);grid-template-rows:var(--loro-dashboard-card-home-media-size, 3rem) minmax(0,1fr) auto;align-items:start;justify-items:stretch;gap:.9rem;min-height:9.75rem;padding:1rem}.loro-dashboard-card--home .loro-dashboard-card__media{justify-self:start;width:var(--loro-dashboard-card-home-media-size, 3rem);height:var(--loro-dashboard-card-home-media-size, 3rem)}.loro-dashboard-card--home .loro-dashboard-card__content{justify-items:start}.loro-dashboard-card--home .loro-dashboard-card__arrow{display:inline-flex}}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], illustration: [{ type: i0.Input, args: [{ isSignal: true, alias: "illustration", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArrow", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], arrowSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowSize", required: false }] }] } });
+
+class LoroDivider {
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroDivider, 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 }] }] } });
+
+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$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }, { kind: "component", type: LoroImage$1, selector: "loro-image", inputs: ["name", "alt", "size", "width", "height", "fit"] }, { kind: "component", type: LoroInput$1, 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$1, LoroImage$1, LoroInput$1], 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">
+      <header
+        class="loro-product-section__header"
+        [class.loro-product-section__header--collapsible]="collapsible()"
+        [attr.role]="collapsible() ? 'button' : null"
+        [attr.tabindex]="collapsible() ? 0 : null"
+        [attr.aria-expanded]="collapsible() ? expanded() : null"
+        (click)="toggle()"
+        (keydown.enter)="toggle()"
+        (keydown.space)="toggle()">
+        <span class="loro-product-section__icon">
+          <loro-icon [name]="icon()" [size]="18" [alt]="title()" color="inverse" />
+        </span>
+        <h2>{{ title() }}</h2>
+        @if (collapsible()) {
+          <span class="loro-product-section__toggle" aria-hidden="true">
+            <loro-icon
+              [name]="expanded() ? 'chevron-up' : 'chevron-down'"
+              [size]="18"
+              [alt]="expanded() ? 'Contraer' : 'Expandir'"
+              color="primary-strong" />
+          </span>
+        }
+      </header>
+      @if (!collapsible() || expanded()) {
+        <div class="loro-product-section__body">
+          <ng-content />
+        </div>
+      }
+    </section>
+  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-product-section{display:grid;gap:.7rem}.loro-product-section__header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.8rem;margin-inline:-.35rem;padding:.25rem .35rem;border-radius:.75rem;color:var(--loro-text-strong);transition:background .15s ease,transform .15s ease}.loro-product-section__header--collapsible{cursor:pointer;-webkit-tap-highlight-color:transparent}.loro-product-section__header--collapsible:hover{background:#6c3cff0e}.loro-product-section__header--collapsible:focus-visible{outline:2px solid rgba(108,60,255,.32);outline-offset:2px}.loro-product-section__header--collapsible:active{transform:scale(.995);background:#6c3cff14}.loro-product-section__icon{display:grid;width:2.1rem;height:2.1rem;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--loro-primary-500),var(--loro-primary-700))}h2{margin:0;font-size:1.12rem;font-weight:950;line-height:1.2}.loro-product-section__toggle{display:grid;width:2.25rem;height:2.25rem;place-items:center;border-radius:50%}.loro-product-section__body{overflow:hidden;border:1px solid var(--loro-border-subtle);border-radius:.8rem;background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft)}@media(max-width:640px){.loro-product-section{gap:.25rem}.loro-product-section__header{grid-template-columns:1.2rem minmax(0,1fr) 1.35rem;gap:.35rem;margin-inline:0;padding:.08rem 0}.loro-product-section__icon{width:1.2rem;height:1.2rem}.loro-product-section__icon loro-icon,.loro-product-section__toggle loro-icon{transform:scale(.72)}h2{font-size:.72rem;line-height:1.05}.loro-product-section__toggle{display:grid;width:1.35rem;height:1.35rem;place-items:center;border:1px solid color-mix(in srgb,var(--loro-primary-500) 18%,transparent);background:color-mix(in srgb,var(--loro-primary-500) 6%,transparent)}.loro-product-section__body{border-radius:.58rem}}\n"], dependencies: [{ kind: "component", type: LoroIcon$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroProductSection, decorators: [{
+            type: Component,
+            args: [{ selector: 'loro-product-section', standalone: true, imports: [LoroIcon$1], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <section class="loro-product-section">
+      <header
+        class="loro-product-section__header"
+        [class.loro-product-section__header--collapsible]="collapsible()"
+        [attr.role]="collapsible() ? 'button' : null"
+        [attr.tabindex]="collapsible() ? 0 : null"
+        [attr.aria-expanded]="collapsible() ? expanded() : null"
+        (click)="toggle()"
+        (keydown.enter)="toggle()"
+        (keydown.space)="toggle()">
+        <span class="loro-product-section__icon">
+          <loro-icon [name]="icon()" [size]="18" [alt]="title()" color="inverse" />
+        </span>
+        <h2>{{ title() }}</h2>
+        @if (collapsible()) {
+          <span class="loro-product-section__toggle" aria-hidden="true">
+            <loro-icon
+              [name]="expanded() ? 'chevron-up' : 'chevron-down'"
+              [size]="18"
+              [alt]="expanded() ? 'Contraer' : 'Expandir'"
+              color="primary-strong" />
+          </span>
+        }
+      </header>
+      @if (!collapsible() || expanded()) {
+        <div class="loro-product-section__body">
+          <ng-content />
+        </div>
+      }
+    </section>
+  `, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-product-section{display:grid;gap:.7rem}.loro-product-section__header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.8rem;margin-inline:-.35rem;padding:.25rem .35rem;border-radius:.75rem;color:var(--loro-text-strong);transition:background .15s ease,transform .15s ease}.loro-product-section__header--collapsible{cursor:pointer;-webkit-tap-highlight-color:transparent}.loro-product-section__header--collapsible:hover{background:#6c3cff0e}.loro-product-section__header--collapsible:focus-visible{outline:2px solid rgba(108,60,255,.32);outline-offset:2px}.loro-product-section__header--collapsible:active{transform:scale(.995);background:#6c3cff14}.loro-product-section__icon{display:grid;width:2.1rem;height:2.1rem;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--loro-primary-500),var(--loro-primary-700))}h2{margin:0;font-size:1.12rem;font-weight:950;line-height:1.2}.loro-product-section__toggle{display:grid;width:2.25rem;height:2.25rem;place-items:center;border-radius:50%}.loro-product-section__body{overflow:hidden;border:1px solid var(--loro-border-subtle);border-radius:.8rem;background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft)}@media(max-width:640px){.loro-product-section{gap:.25rem}.loro-product-section__header{grid-template-columns:1.2rem minmax(0,1fr) 1.35rem;gap:.35rem;margin-inline:0;padding:.08rem 0}.loro-product-section__icon{width:1.2rem;height:1.2rem}.loro-product-section__icon loro-icon,.loro-product-section__toggle loro-icon{transform:scale(.72)}h2{font-size:.72rem;line-height:1.05}.loro-product-section__toggle{display:grid;width:1.35rem;height:1.35rem;place-items:center;border:1px solid color-mix(in srgb,var(--loro-primary-500) 18%,transparent);background:color-mix(in srgb,var(--loro-primary-500) 6%,transparent)}.loro-product-section__body{border-radius:.58rem}}\n"] }]
+        }], 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 */ []));
+    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 } }, outputs: { changePhotoClick: "changePhotoClick" }, ngImport: i0, template: `
+    <section class="loro-profile-card">
+      <div class="loro-profile-card__avatar">
+        @if (resolvedImageSrc()) {
+          <img [src]="resolvedImageSrc()!" [alt]="name()" (error)="onImageError()" />
+        } @else {
+          <loro-icon name="user" [size]="72" [alt]="name()" color="primary" />
+        }
+      </div>
+      <div class="loro-profile-card__copy">
+        <h2>{{ name() }}</h2>
+        <p>{{ email() }}</p>
+        <loro-button
+          label="Cambiar foto"
+          icon="camera"
+          variant="outline"
+          (buttonClick)="changePhotoClick.emit()" />
+      </div>
+    </section>
+  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-profile-card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:1.5rem;padding:clamp(1.25rem,3vw,2rem);border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-card);background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft)}.loro-profile-card__avatar{display:grid;width:clamp(7rem,16vw,9.5rem);aspect-ratio:1;place-items:center;overflow:hidden;border-radius:50%;background:linear-gradient(180deg,#6c3cff24,#6c3cff0a)}img{width:100%;height:100%;object-fit:cover}h2,p{margin:0}h2{color:var(--loro-text-strong);font-size:clamp(2rem,4vw,2.7rem);font-weight:900;line-height:1}p{margin:.4rem 0 1rem;color:var(--loro-muted);font-size:1.05rem;font-weight:650}@media(max-width:520px){.loro-profile-card{grid-template-columns:max-content minmax(0,1fr);gap:1rem}}\n"], dependencies: [{ kind: "component", type: LoroButton$1, selector: "loro-button", inputs: ["label", "text", "icon", "iconContent", "iconMode", "iconSize", "iconButtonSize", "iconColor", "socialMobileCompact", "selected", "variant", "typeButton", "color", "size", "fullWidth", "buttonWidth", "disabled", "loading", "type", "formId", "ariaLabel", "ariaDescription"], outputs: ["buttonClick", "change", "sanChange"] }, { kind: "component", type: LoroIcon$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroProfileCard, decorators: [{
+            type: Component,
+            args: [{ selector: 'loro-profile-card', standalone: true, imports: [LoroButton$1, LoroIcon$1], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <section class="loro-profile-card">
+      <div class="loro-profile-card__avatar">
+        @if (resolvedImageSrc()) {
+          <img [src]="resolvedImageSrc()!" [alt]="name()" (error)="onImageError()" />
+        } @else {
+          <loro-icon name="user" [size]="72" [alt]="name()" color="primary" />
+        }
+      </div>
+      <div class="loro-profile-card__copy">
+        <h2>{{ name() }}</h2>
+        <p>{{ email() }}</p>
+        <loro-button
+          label="Cambiar foto"
+          icon="camera"
+          variant="outline"
+          (buttonClick)="changePhotoClick.emit()" />
+      </div>
+    </section>
+  `, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-profile-card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:1.5rem;padding:clamp(1.25rem,3vw,2rem);border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-card);background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft)}.loro-profile-card__avatar{display:grid;width:clamp(7rem,16vw,9.5rem);aspect-ratio:1;place-items:center;overflow:hidden;border-radius:50%;background:linear-gradient(180deg,#6c3cff24,#6c3cff0a)}img{width:100%;height:100%;object-fit:cover}h2,p{margin:0}h2{color:var(--loro-text-strong);font-size:clamp(2rem,4vw,2.7rem);font-weight:900;line-height:1}p{margin:.4rem 0 1rem;color:var(--loro-muted);font-size:1.05rem;font-weight:650}@media(max-width:520px){.loro-profile-card{grid-template-columns:max-content minmax(0,1fr);gap:1rem}}\n"] }]
+        }], 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 }] }], 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$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }, { kind: "component", type: LoroImage$1, 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$1, LoroImage$1], 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') {
+      <loro-image class="loro-stat-card__top-image" [name]="topImage() || 'loro-despensa'" [alt]="title()" width="6rem" />
+    }
+    <article class="loro-stat-card" [class]="'loro-stat-card loro-stat-card--' + variant()">
+      @if (icon()) {
+        <span class="loro-stat-card__icon">
+          <loro-icon [name]="icon()!" [size]="iconSize()" [alt]="title()" [color]="variant() === 'danger' ? 'danger' : 'primary'" />
+        </span>
+      }
+      <div class="loro-stat-card__copy">
+        @if (eyebrow() || variant() === 'image-corner') {
+          <p class="loro-stat-card__eyebrow">{{ eyebrow() || title() }}</p>
+          <h2>{{ value() || title() }}</h2>
+        }
+
+        @if (value() && variant() !== 'image-corner') {
+          <p class="loro-stat-card__title">{{ title() }}</p>
+        }
+        @if (description()) {
+          <p class="loro-stat-card__description">{{ description() }}</p>
+        }
+      </div>
+      @if (variant() === 'card-basket') {
+        <div class="shopping-summary-card__total">
+          <small>Total estimado</small>
+          <strong>{{ total().toLocaleString('es-ES', { minimumFractionDigits: 2 }) }} €</strong>
+        </div>
+      }
+      @if (image()) {
+        <loro-image class="loro-stat-card__image" [name]="image()!" [alt]="title()" width="5.8rem" />
+      }
+    </article>
+
+  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-stat-card__top-image{display:flex;justify-content:center;pointer-events:none}.loro-stat-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;min-height:6.8rem;padding:1.1rem 1.25rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-card);background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft);color:var(--loro-text);isolation:isolate}.loro-stat-card--tinted{background:var(--loro-surface-tinted)}.loro-stat-card--danger{background:#dc26260f}.loro-stat-card--compare-summary{grid-template-columns:3.85rem minmax(0,1fr);gap:.95rem;min-height:6rem;padding:.95rem 1.1rem;border-radius:1.35rem;background:var(--loro-surface)}.loro-stat-card--compare-inline{grid-template-columns:2.5rem minmax(0,1fr);gap:.65rem;min-height:3.7rem;padding:.7rem .9rem;border-radius:1rem;background:var(--loro-surface);box-shadow:none}.loro-stat-card--image-corner{grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.85rem;min-height:11.5rem;padding:1.2rem 6.9rem 1.2rem 1.2rem;border-radius:1.35rem;background:color-mix(in srgb,var(--loro-primary-500) 4%,var(--loro-surface))}.loro-stat-card__icon{position:relative;z-index:1;display:grid;width:3.7rem;height:3.7rem;place-items:center;border-radius:1rem;background:var(--loro-brand-tint-surface)}.loro-stat-card--danger .loro-stat-card__icon{background:#dc262617}.loro-stat-card--compare-summary .loro-stat-card__icon{width:3.55rem;height:3.55rem;border-radius:1rem}.loro-stat-card--compare-inline .loro-stat-card__icon{width:2.5rem;height:2.5rem;border-radius:.85rem}.loro-stat-card--image-corner .loro-stat-card__icon{width:3rem;height:3rem;border-radius:50%}.loro-stat-card__copy{position:relative;z-index:1;display:grid;align-content:center;min-width:0}h2,p{margin:0}h2{color:var(--loro-text-strong);font-size:clamp(1.45rem,4vw,2.15rem);font-weight:950;line-height:1.05;overflow-wrap:anywhere}.loro-stat-card__title{color:var(--loro-text-strong);font-size:1rem;font-weight:900}.loro-stat-card--compare-summary h2{font-size:clamp(1.25rem,4.8vw,1.75rem);line-height:.98}.loro-stat-card--compare-summary .loro-stat-card__title{font-size:clamp(.95rem,3.6vw,1.1rem);line-height:1.05}.loro-stat-card--compare-inline h2{font-size:clamp(.95rem,1.7vw,1.15rem);line-height:1}.loro-stat-card--compare-inline .loro-stat-card__title{color:var(--loro-muted-strong);font-size:.78rem;font-weight:850;line-height:1.05}.loro-stat-card--image-corner h2{font-size:clamp(1.45rem,3vw,2.1rem);line-height:1.02}.loro-stat-card--image-corner .loro-stat-card__title,.loro-stat-card--image-corner .loro-stat-card__eyebrow{color:var(--loro-text-strong);font-size:1.05rem;font-weight:900;line-height:1.12}.loro-stat-card__description,.loro-stat-card__eyebrow{margin-top:.35rem;color:var(--loro-muted);font-weight:700;line-height:1.35}.loro-stat-card__image{align-self:end}.loro-stat-card--image-corner .loro-stat-card__copy{align-content:start;gap:.5rem}.loro-stat-card--image-corner .loro-stat-card__eyebrow{margin-top:.15rem}.loro-stat-card--image-corner .loro-stat-card__description{margin-top:0;white-space:pre-line;max-width:18ch}.loro-stat-card--image-corner .loro-stat-card__image{position:absolute;top:1.55rem;right:1.2rem;align-self:start;width:4.95rem;pointer-events:none}.shopping-summary-card__total{display:grid;justify-items:end;color:var(--loro-muted);font-weight:750}.shopping-summary-card__total strong{color:var(--loro-primary-700);font-size:2rem;font-weight:950}@media(max-width:640px){.loro-stat-card{gap:.8rem;min-height:5.5rem;padding:.9rem 1rem}.loro-stat-card__icon{width:3rem;height:3rem;border-radius:.85rem}h2{font-size:clamp(1.2rem,5vw,1.55rem);line-height:1}.loro-stat-card__title{font-size:clamp(.84rem,3vw,.95rem);line-height:1.15}.loro-stat-card--compare-summary{grid-template-columns:3.1rem minmax(0,1fr);gap:.75rem;min-height:5.35rem;padding:.8rem .9rem;border-radius:1.2rem}.loro-stat-card--compare-summary .loro-stat-card__icon{width:3rem;height:3rem}.loro-stat-card--compare-summary h2{font-size:clamp(1.1rem,5vw,1.45rem)}.loro-stat-card--compare-summary .loro-stat-card__title{font-size:clamp(.88rem,3.4vw,1rem)}.loro-stat-card--compare-inline{grid-template-columns:2.2rem minmax(0,1fr);gap:.55rem;min-height:3.3rem;padding:.55rem .75rem}.loro-stat-card--compare-inline .loro-stat-card__icon{width:2.2rem;height:2.2rem;border-radius:.75rem}.loro-stat-card--compare-inline h2{font-size:1rem}.loro-stat-card--compare-inline .loro-stat-card__title{font-size:.74rem}.loro-stat-card--image-corner{min-height:8.25rem;gap:.65rem;padding:.95rem 4.6rem .95rem .95rem;border-radius:1.15rem}.loro-stat-card--image-corner .loro-stat-card__icon{width:2.45rem;height:2.45rem}.loro-stat-card--image-corner h2{font-size:clamp(1.05rem,4.8vw,1.65rem);line-height:1}.loro-stat-card--image-corner .loro-stat-card__title,.loro-stat-card--image-corner .loro-stat-card__eyebrow{font-size:.88rem;line-height:1.05}.loro-stat-card--image-corner .loro-stat-card__description{font-size:.78rem;line-height:1.16;max-width:16ch}.loro-stat-card--image-corner .loro-stat-card__image{top:1.15rem;right:.9rem;width:3.55rem}}\n"], dependencies: [{ kind: "component", type: LoroIcon$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }, { kind: "component", type: LoroImage$1, 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$1, LoroImage$1], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+  @if (variant() === 'image-corner' || variant() === 'card-basket') {
+      <loro-image class="loro-stat-card__top-image" [name]="topImage() || 'loro-despensa'" [alt]="title()" width="6rem" />
+    }
+    <article class="loro-stat-card" [class]="'loro-stat-card loro-stat-card--' + variant()">
+      @if (icon()) {
+        <span class="loro-stat-card__icon">
+          <loro-icon [name]="icon()!" [size]="iconSize()" [alt]="title()" [color]="variant() === 'danger' ? 'danger' : 'primary'" />
+        </span>
+      }
+      <div class="loro-stat-card__copy">
+        @if (eyebrow() || variant() === 'image-corner') {
+          <p class="loro-stat-card__eyebrow">{{ eyebrow() || title() }}</p>
+          <h2>{{ value() || title() }}</h2>
+        }
+
+        @if (value() && variant() !== 'image-corner') {
+          <p class="loro-stat-card__title">{{ title() }}</p>
+        }
+        @if (description()) {
+          <p class="loro-stat-card__description">{{ description() }}</p>
+        }
+      </div>
+      @if (variant() === 'card-basket') {
+        <div class="shopping-summary-card__total">
+          <small>Total estimado</small>
+          <strong>{{ total().toLocaleString('es-ES', { minimumFractionDigits: 2 }) }} €</strong>
+        </div>
+      }
+      @if (image()) {
+        <loro-image class="loro-stat-card__image" [name]="image()!" [alt]="title()" width="5.8rem" />
+      }
+    </article>
+
+  `, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-stat-card__top-image{display:flex;justify-content:center;pointer-events:none}.loro-stat-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;min-height:6.8rem;padding:1.1rem 1.25rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-card);background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft);color:var(--loro-text);isolation:isolate}.loro-stat-card--tinted{background:var(--loro-surface-tinted)}.loro-stat-card--danger{background:#dc26260f}.loro-stat-card--compare-summary{grid-template-columns:3.85rem minmax(0,1fr);gap:.95rem;min-height:6rem;padding:.95rem 1.1rem;border-radius:1.35rem;background:var(--loro-surface)}.loro-stat-card--compare-inline{grid-template-columns:2.5rem minmax(0,1fr);gap:.65rem;min-height:3.7rem;padding:.7rem .9rem;border-radius:1rem;background:var(--loro-surface);box-shadow:none}.loro-stat-card--image-corner{grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.85rem;min-height:11.5rem;padding:1.2rem 6.9rem 1.2rem 1.2rem;border-radius:1.35rem;background:color-mix(in srgb,var(--loro-primary-500) 4%,var(--loro-surface))}.loro-stat-card__icon{position:relative;z-index:1;display:grid;width:3.7rem;height:3.7rem;place-items:center;border-radius:1rem;background:var(--loro-brand-tint-surface)}.loro-stat-card--danger .loro-stat-card__icon{background:#dc262617}.loro-stat-card--compare-summary .loro-stat-card__icon{width:3.55rem;height:3.55rem;border-radius:1rem}.loro-stat-card--compare-inline .loro-stat-card__icon{width:2.5rem;height:2.5rem;border-radius:.85rem}.loro-stat-card--image-corner .loro-stat-card__icon{width:3rem;height:3rem;border-radius:50%}.loro-stat-card__copy{position:relative;z-index:1;display:grid;align-content:center;min-width:0}h2,p{margin:0}h2{color:var(--loro-text-strong);font-size:clamp(1.45rem,4vw,2.15rem);font-weight:950;line-height:1.05;overflow-wrap:anywhere}.loro-stat-card__title{color:var(--loro-text-strong);font-size:1rem;font-weight:900}.loro-stat-card--compare-summary h2{font-size:clamp(1.25rem,4.8vw,1.75rem);line-height:.98}.loro-stat-card--compare-summary .loro-stat-card__title{font-size:clamp(.95rem,3.6vw,1.1rem);line-height:1.05}.loro-stat-card--compare-inline h2{font-size:clamp(.95rem,1.7vw,1.15rem);line-height:1}.loro-stat-card--compare-inline .loro-stat-card__title{color:var(--loro-muted-strong);font-size:.78rem;font-weight:850;line-height:1.05}.loro-stat-card--image-corner h2{font-size:clamp(1.45rem,3vw,2.1rem);line-height:1.02}.loro-stat-card--image-corner .loro-stat-card__title,.loro-stat-card--image-corner .loro-stat-card__eyebrow{color:var(--loro-text-strong);font-size:1.05rem;font-weight:900;line-height:1.12}.loro-stat-card__description,.loro-stat-card__eyebrow{margin-top:.35rem;color:var(--loro-muted);font-weight:700;line-height:1.35}.loro-stat-card__image{align-self:end}.loro-stat-card--image-corner .loro-stat-card__copy{align-content:start;gap:.5rem}.loro-stat-card--image-corner .loro-stat-card__eyebrow{margin-top:.15rem}.loro-stat-card--image-corner .loro-stat-card__description{margin-top:0;white-space:pre-line;max-width:18ch}.loro-stat-card--image-corner .loro-stat-card__image{position:absolute;top:1.55rem;right:1.2rem;align-self:start;width:4.95rem;pointer-events:none}.shopping-summary-card__total{display:grid;justify-items:end;color:var(--loro-muted);font-weight:750}.shopping-summary-card__total strong{color:var(--loro-primary-700);font-size:2rem;font-weight:950}@media(max-width:640px){.loro-stat-card{gap:.8rem;min-height:5.5rem;padding:.9rem 1rem}.loro-stat-card__icon{width:3rem;height:3rem;border-radius:.85rem}h2{font-size:clamp(1.2rem,5vw,1.55rem);line-height:1}.loro-stat-card__title{font-size:clamp(.84rem,3vw,.95rem);line-height:1.15}.loro-stat-card--compare-summary{grid-template-columns:3.1rem minmax(0,1fr);gap:.75rem;min-height:5.35rem;padding:.8rem .9rem;border-radius:1.2rem}.loro-stat-card--compare-summary .loro-stat-card__icon{width:3rem;height:3rem}.loro-stat-card--compare-summary h2{font-size:clamp(1.1rem,5vw,1.45rem)}.loro-stat-card--compare-summary .loro-stat-card__title{font-size:clamp(.88rem,3.4vw,1rem)}.loro-stat-card--compare-inline{grid-template-columns:2.2rem minmax(0,1fr);gap:.55rem;min-height:3.3rem;padding:.55rem .75rem}.loro-stat-card--compare-inline .loro-stat-card__icon{width:2.2rem;height:2.2rem;border-radius:.75rem}.loro-stat-card--compare-inline h2{font-size:1rem}.loro-stat-card--compare-inline .loro-stat-card__title{font-size:.74rem}.loro-stat-card--image-corner{min-height:8.25rem;gap:.65rem;padding:.95rem 4.6rem .95rem .95rem;border-radius:1.15rem}.loro-stat-card--image-corner .loro-stat-card__icon{width:2.45rem;height:2.45rem}.loro-stat-card--image-corner h2{font-size:clamp(1.05rem,4.8vw,1.65rem);line-height:1}.loro-stat-card--image-corner .loro-stat-card__title,.loro-stat-card--image-corner .loro-stat-card__eyebrow{font-size:.88rem;line-height:1.05}.loro-stat-card--image-corner .loro-stat-card__description{font-size:.78rem;line-height:1.16;max-width:16ch}.loro-stat-card--image-corner .loro-stat-card__image{top:1.15rem;right:.9rem;width:3.55rem}}\n"] }]
+        }], 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
+      class="loro-store-rank-card"
+      [class.loro-store-rank-card--best]="best()"
+      [class.loro-store-rank-card--compact]="variant() === 'compact'">
+      @if (variant() !== 'compact') {
+        <span class="loro-store-rank-card__rank">{{ rank() }}</span>
+      }
+      @if (logoName()) {
+        <loro-image class="loro-store-rank-card__logo" [name]="logoName()!" [alt]="name()" width="100%" height="100%" fit="contain" />
+      } @else {
+        <span class="loro-store-rank-card__mark">{{ name().slice(0, 3) }}</span>
+      }
+      @if (variant() !== 'compact') {
+        <h3>{{ name() }}</h3>
+      }
+      <strong>{{ price() | number: '1.2-2' }} €</strong>
+      @if (variant() !== 'compact') {
+        <loro-badge [label]="best() ? 'Mejor precio' : '+' + (delta() | number: '1.2-2') + ' €'" [variant]="best() ? 'success' : 'info'" />
+      }
+    </article>
+  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-store-rank-card{position:relative;display:grid;justify-items:center;align-content:center;gap:.45rem;min-height:10.8rem;padding:1.4rem 1rem 1rem;border:1px solid var(--loro-border-subtle);border-radius:1rem;background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft);text-align:center}.loro-store-rank-card--compact{gap:.25rem;min-height:4.9rem;padding:.7rem .8rem;border-radius:.95rem;box-shadow:none}.loro-store-rank-card__rank{position:absolute;top:.85rem;left:.85rem;display:grid;width:2rem;height:2rem;place-items:center;border-radius:50%;background:var(--loro-surface-muted);color:var(--loro-primary-700);font-weight:950}.loro-store-rank-card--best .loro-store-rank-card__rank{background:linear-gradient(135deg,var(--loro-primary-500),var(--loro-primary-700));color:#fff}.loro-store-rank-card__logo{display:block;width:4.5rem;height:2.6rem}.loro-store-rank-card--compact .loro-store-rank-card__logo{width:3rem;height:1.8rem}.loro-store-rank-card__logo ::ng-deep img{width:100%;height:100%;object-fit:contain}.loro-store-rank-card__mark{color:var(--loro-primary-700);font-size:1.5rem;font-weight:950}h3,strong{margin:0;color:var(--loro-text-strong)}h3{font-size:1.05rem;font-weight:900;line-height:1.12;overflow-wrap:anywhere}strong{color:var(--loro-primary-700);font-size:clamp(1.35rem,3vw,1.8rem);font-weight:950;line-height:1;white-space:nowrap}.loro-store-rank-card--compact strong{font-size:clamp(1rem,2.1vw,1.2rem);line-height:1}@media(max-width:640px){.loro-store-rank-card{gap:.35rem;min-height:8.9rem;padding:1rem .65rem .85rem;border-radius:.9rem}.loro-store-rank-card__rank{top:.6rem;left:.6rem;width:1.75rem;height:1.75rem;font-size:.95rem}.loro-store-rank-card__logo{width:3.25rem;height:2rem}.loro-store-rank-card--compact{min-height:4.55rem;padding:.55rem .65rem}.loro-store-rank-card--compact .loro-store-rank-card__logo{width:2.7rem;height:1.6rem}.loro-store-rank-card--compact strong{font-size:clamp(.92rem,3.8vw,1.08rem)}h3{font-size:clamp(.9rem,3.6vw,1rem)}strong{font-size:clamp(1.15rem,5vw,1.55rem)}}\n"], dependencies: [{ kind: "component", type: LoroBadge$1, selector: "loro-badge", inputs: ["label", "variant"] }, { kind: "component", type: LoroImage$1, 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$1, LoroImage$1], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <article
+      class="loro-store-rank-card"
+      [class.loro-store-rank-card--best]="best()"
+      [class.loro-store-rank-card--compact]="variant() === 'compact'">
+      @if (variant() !== 'compact') {
+        <span class="loro-store-rank-card__rank">{{ rank() }}</span>
+      }
+      @if (logoName()) {
+        <loro-image class="loro-store-rank-card__logo" [name]="logoName()!" [alt]="name()" width="100%" height="100%" fit="contain" />
+      } @else {
+        <span class="loro-store-rank-card__mark">{{ name().slice(0, 3) }}</span>
+      }
+      @if (variant() !== 'compact') {
+        <h3>{{ name() }}</h3>
+      }
+      <strong>{{ price() | number: '1.2-2' }} €</strong>
+      @if (variant() !== 'compact') {
+        <loro-badge [label]="best() ? 'Mejor precio' : '+' + (delta() | number: '1.2-2') + ' €'" [variant]="best() ? 'success' : 'info'" />
+      }
+    </article>
+  `, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-store-rank-card{position:relative;display:grid;justify-items:center;align-content:center;gap:.45rem;min-height:10.8rem;padding:1.4rem 1rem 1rem;border:1px solid var(--loro-border-subtle);border-radius:1rem;background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft);text-align:center}.loro-store-rank-card--compact{gap:.25rem;min-height:4.9rem;padding:.7rem .8rem;border-radius:.95rem;box-shadow:none}.loro-store-rank-card__rank{position:absolute;top:.85rem;left:.85rem;display:grid;width:2rem;height:2rem;place-items:center;border-radius:50%;background:var(--loro-surface-muted);color:var(--loro-primary-700);font-weight:950}.loro-store-rank-card--best .loro-store-rank-card__rank{background:linear-gradient(135deg,var(--loro-primary-500),var(--loro-primary-700));color:#fff}.loro-store-rank-card__logo{display:block;width:4.5rem;height:2.6rem}.loro-store-rank-card--compact .loro-store-rank-card__logo{width:3rem;height:1.8rem}.loro-store-rank-card__logo ::ng-deep img{width:100%;height:100%;object-fit:contain}.loro-store-rank-card__mark{color:var(--loro-primary-700);font-size:1.5rem;font-weight:950}h3,strong{margin:0;color:var(--loro-text-strong)}h3{font-size:1.05rem;font-weight:900;line-height:1.12;overflow-wrap:anywhere}strong{color:var(--loro-primary-700);font-size:clamp(1.35rem,3vw,1.8rem);font-weight:950;line-height:1;white-space:nowrap}.loro-store-rank-card--compact strong{font-size:clamp(1rem,2.1vw,1.2rem);line-height:1}@media(max-width:640px){.loro-store-rank-card{gap:.35rem;min-height:8.9rem;padding:1rem .65rem .85rem;border-radius:.9rem}.loro-store-rank-card__rank{top:.6rem;left:.6rem;width:1.75rem;height:1.75rem;font-size:.95rem}.loro-store-rank-card__logo{width:3.25rem;height:2rem}.loro-store-rank-card--compact{min-height:4.55rem;padding:.55rem .65rem}.loro-store-rank-card--compact .loro-store-rank-card__logo{width:2.7rem;height:1.6rem}.loro-store-rank-card--compact strong{font-size:clamp(.92rem,3.8vw,1.08rem)}h3{font-size:clamp(.9rem,3.6vw,1rem)}strong{font-size:clamp(1.15rem,5vw,1.55rem)}}\n"] }]
+        }], 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">
+      <div class="loro-summary-bar__total">
+        <small>{{ totalLabel() }}</small>
+        <strong>{{ total().toLocaleString('es-ES', { minimumFractionDigits: 2 }) }} €</strong>
+        @if (secondaryLabel()) {
+          <loro-button
+            [label]="secondaryLabel()"
+            icon="tag"
+            [iconSize]="20"
+            variant="outline"
+            [disabled]="secondaryDisabled()"
+            (buttonClick)="secondaryAction.emit()" />
+        }
+      </div>
+      <div class="loro-summary-bar__flow" aria-hidden="true">
+        <loro-image [name]="leftImage()" alt="" width="5.9rem" />
+        <loro-icon name="arrow-right" [size]="34" alt="" color="primary" />
+        <loro-image [name]="rightImage()" alt="" width="5.25rem" />
+      </div>
+      <div class="loro-summary-bar__action">
+        <loro-button
+          [label]="primaryLabel()"
+          icon="check"
+          [iconSize]="21"
+          [fullWidth]="true"
+          [disabled]="primaryDisabled()"
+          (buttonClick)="primaryAction.emit()" />
+        @if (helper()) {
+          <small>{{ helper() }}</small>
+        }
+      </div>
+    </aside>
+  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-summary-bar{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:1.45rem;width:100%;min-width:0;min-height:6.75rem;padding:.75rem 1.9rem;box-sizing:border-box;border:1px solid var(--loro-border-subtle);border-radius:1rem;background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-panel)}.loro-summary-bar__total{display:grid;grid-template-columns:minmax(7rem,auto) minmax(9.5rem,auto);align-items:end;justify-content:start;gap:.25rem 1.6rem;min-width:0}.loro-summary-bar__total loro-button{grid-row:1 / span 2;grid-column:2;align-self:center;--loro-summary-button-min-height: 2.9rem;--loro-summary-button-padding: .65rem 1rem;--loro-summary-button-font-size: 1rem}.loro-summary-bar__action{display:grid;justify-items:stretch;gap:.45rem;min-width:0;max-width:100%;overflow:hidden}small{color:var(--loro-muted);font-size:.92rem;font-weight:750;line-height:1.3}strong{color:var(--loro-primary-700);font-size:2.15rem;font-weight:950;line-height:1;white-space:nowrap}.loro-summary-bar__flow{display:inline-grid;grid-template-columns:auto auto auto;align-items:center;justify-content:center;gap:clamp(.55rem,1vw,1rem);min-width:0;padding-inline:clamp(.75rem,1.8vw,2.1rem);border-left:1px solid var(--loro-border-subtle);color:var(--loro-primary-700);font-size:2rem;font-weight:900}.loro-summary-bar__action loro-button{min-width:0;--loro-summary-button-min-height: 2.65rem;--loro-summary-button-padding: .62rem 1rem;--loro-summary-button-font-size: 1rem}.loro-summary-bar loro-button{--loro-button-min-height: var(--loro-summary-button-min-height);--loro-button-padding: var(--loro-summary-button-padding);--loro-button-radius: .55rem;--loro-button-font-size: var(--loro-summary-button-font-size)}:host ::ng-deep .loro-summary-bar loro-button .loro-button{max-width:100%;min-width:0}:host ::ng-deep .loro-summary-bar loro-button .loro-button span{min-width:0;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .loro-summary-bar__action loro-button,:host ::ng-deep .loro-summary-bar__action loro-button .loro-button{width:100%}.loro-summary-bar__action small{min-width:0;max-width:100%;overflow-wrap:anywhere;text-align:center}@media(max-width:1023.88px){.loro-summary-bar{grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);grid-template-areas:\"total flow\" \"total action\";align-items:center;gap:.55rem .8rem;min-height:0;padding:.85rem .95rem;border-radius:1.15rem}.loro-summary-bar__total{grid-area:total;grid-template-columns:1fr;align-content:center;justify-items:start;gap:.36rem;min-width:0;height:100%;padding-right:.65rem;border-right:1px solid var(--loro-border-subtle)}.loro-summary-bar__total loro-button{grid-row:auto;grid-column:auto;width:100%;max-width:9.6rem;--loro-summary-button-min-height: 2.2rem;--loro-summary-button-padding: .48rem .6rem;--loro-summary-button-font-size: .82rem}.loro-summary-bar__flow{grid-area:flow;display:inline-grid;justify-self:center;width:100%;max-width:10.75rem;gap:.32rem;padding-inline:0;border-left:0}.loro-summary-bar__flow loro-image:first-child{width:4.35rem}.loro-summary-bar__flow loro-image:last-child{width:3.85rem}.loro-summary-bar__action{grid-area:action;justify-items:stretch;gap:.28rem;min-width:0;width:100%}.loro-summary-bar__action loro-button{display:block;width:100%;min-width:0;--loro-summary-button-min-height: 2.35rem;--loro-summary-button-padding: .5rem .55rem;--loro-summary-button-font-size: .82rem}small{font-size:.82rem}strong{font-size:clamp(1.45rem,5.6vw,1.9rem)}}@media(max-width:640px){.loro-summary-bar{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:.48rem .62rem;padding:.78rem .82rem}.loro-summary-bar__total loro-button{max-width:8.9rem;--loro-summary-button-min-height: 2.1rem;--loro-summary-button-padding: .44rem .52rem;--loro-summary-button-font-size: .74rem}.loro-summary-bar__flow loro-image:first-child{width:3.45rem}.loro-summary-bar__flow loro-image:last-child{width:3.2rem}.loro-summary-bar__flow{max-width:8.45rem;gap:.2rem}.loro-summary-bar__flow loro-icon{transform:scale(.78)}.loro-summary-bar__action loro-button{--loro-summary-button-min-height: 2.2rem;--loro-summary-button-padding: .48rem .44rem;--loro-summary-button-font-size: .74rem}small{font-size:.72rem}strong{font-size:clamp(1.28rem,7vw,1.6rem)}}@media(max-width:430px){.loro-summary-bar{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);padding:.72rem}.loro-summary-bar__total{padding-right:.5rem}.loro-summary-bar__total loro-button{max-width:7.8rem;--loro-summary-button-font-size: .68rem}.loro-summary-bar__action loro-button{--loro-summary-button-font-size: .68rem}.loro-summary-bar__flow{max-width:7.6rem}.loro-summary-bar__flow loro-image:first-child{width:3rem}.loro-summary-bar__flow loro-image:last-child{width:2.85rem}}\n"], dependencies: [{ kind: "component", type: LoroButton$1, selector: "loro-button", inputs: ["label", "text", "icon", "iconContent", "iconMode", "iconSize", "iconButtonSize", "iconColor", "socialMobileCompact", "selected", "variant", "typeButton", "color", "size", "fullWidth", "buttonWidth", "disabled", "loading", "type", "formId", "ariaLabel", "ariaDescription"], outputs: ["buttonClick", "change", "sanChange"] }, { kind: "component", type: LoroIcon$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }, { kind: "component", type: LoroImage$1, 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$1, LoroIcon$1, LoroImage$1], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <aside class="loro-summary-bar">
+      <div class="loro-summary-bar__total">
+        <small>{{ totalLabel() }}</small>
+        <strong>{{ total().toLocaleString('es-ES', { minimumFractionDigits: 2 }) }} €</strong>
+        @if (secondaryLabel()) {
+          <loro-button
+            [label]="secondaryLabel()"
+            icon="tag"
+            [iconSize]="20"
+            variant="outline"
+            [disabled]="secondaryDisabled()"
+            (buttonClick)="secondaryAction.emit()" />
+        }
+      </div>
+      <div class="loro-summary-bar__flow" aria-hidden="true">
+        <loro-image [name]="leftImage()" alt="" width="5.9rem" />
+        <loro-icon name="arrow-right" [size]="34" alt="" color="primary" />
+        <loro-image [name]="rightImage()" alt="" width="5.25rem" />
+      </div>
+      <div class="loro-summary-bar__action">
+        <loro-button
+          [label]="primaryLabel()"
+          icon="check"
+          [iconSize]="21"
+          [fullWidth]="true"
+          [disabled]="primaryDisabled()"
+          (buttonClick)="primaryAction.emit()" />
+        @if (helper()) {
+          <small>{{ helper() }}</small>
+        }
+      </div>
+    </aside>
+  `, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-summary-bar{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:1.45rem;width:100%;min-width:0;min-height:6.75rem;padding:.75rem 1.9rem;box-sizing:border-box;border:1px solid var(--loro-border-subtle);border-radius:1rem;background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-panel)}.loro-summary-bar__total{display:grid;grid-template-columns:minmax(7rem,auto) minmax(9.5rem,auto);align-items:end;justify-content:start;gap:.25rem 1.6rem;min-width:0}.loro-summary-bar__total loro-button{grid-row:1 / span 2;grid-column:2;align-self:center;--loro-summary-button-min-height: 2.9rem;--loro-summary-button-padding: .65rem 1rem;--loro-summary-button-font-size: 1rem}.loro-summary-bar__action{display:grid;justify-items:stretch;gap:.45rem;min-width:0;max-width:100%;overflow:hidden}small{color:var(--loro-muted);font-size:.92rem;font-weight:750;line-height:1.3}strong{color:var(--loro-primary-700);font-size:2.15rem;font-weight:950;line-height:1;white-space:nowrap}.loro-summary-bar__flow{display:inline-grid;grid-template-columns:auto auto auto;align-items:center;justify-content:center;gap:clamp(.55rem,1vw,1rem);min-width:0;padding-inline:clamp(.75rem,1.8vw,2.1rem);border-left:1px solid var(--loro-border-subtle);color:var(--loro-primary-700);font-size:2rem;font-weight:900}.loro-summary-bar__action loro-button{min-width:0;--loro-summary-button-min-height: 2.65rem;--loro-summary-button-padding: .62rem 1rem;--loro-summary-button-font-size: 1rem}.loro-summary-bar loro-button{--loro-button-min-height: var(--loro-summary-button-min-height);--loro-button-padding: var(--loro-summary-button-padding);--loro-button-radius: .55rem;--loro-button-font-size: var(--loro-summary-button-font-size)}:host ::ng-deep .loro-summary-bar loro-button .loro-button{max-width:100%;min-width:0}:host ::ng-deep .loro-summary-bar loro-button .loro-button span{min-width:0;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .loro-summary-bar__action loro-button,:host ::ng-deep .loro-summary-bar__action loro-button .loro-button{width:100%}.loro-summary-bar__action small{min-width:0;max-width:100%;overflow-wrap:anywhere;text-align:center}@media(max-width:1023.88px){.loro-summary-bar{grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);grid-template-areas:\"total flow\" \"total action\";align-items:center;gap:.55rem .8rem;min-height:0;padding:.85rem .95rem;border-radius:1.15rem}.loro-summary-bar__total{grid-area:total;grid-template-columns:1fr;align-content:center;justify-items:start;gap:.36rem;min-width:0;height:100%;padding-right:.65rem;border-right:1px solid var(--loro-border-subtle)}.loro-summary-bar__total loro-button{grid-row:auto;grid-column:auto;width:100%;max-width:9.6rem;--loro-summary-button-min-height: 2.2rem;--loro-summary-button-padding: .48rem .6rem;--loro-summary-button-font-size: .82rem}.loro-summary-bar__flow{grid-area:flow;display:inline-grid;justify-self:center;width:100%;max-width:10.75rem;gap:.32rem;padding-inline:0;border-left:0}.loro-summary-bar__flow loro-image:first-child{width:4.35rem}.loro-summary-bar__flow loro-image:last-child{width:3.85rem}.loro-summary-bar__action{grid-area:action;justify-items:stretch;gap:.28rem;min-width:0;width:100%}.loro-summary-bar__action loro-button{display:block;width:100%;min-width:0;--loro-summary-button-min-height: 2.35rem;--loro-summary-button-padding: .5rem .55rem;--loro-summary-button-font-size: .82rem}small{font-size:.82rem}strong{font-size:clamp(1.45rem,5.6vw,1.9rem)}}@media(max-width:640px){.loro-summary-bar{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:.48rem .62rem;padding:.78rem .82rem}.loro-summary-bar__total loro-button{max-width:8.9rem;--loro-summary-button-min-height: 2.1rem;--loro-summary-button-padding: .44rem .52rem;--loro-summary-button-font-size: .74rem}.loro-summary-bar__flow loro-image:first-child{width:3.45rem}.loro-summary-bar__flow loro-image:last-child{width:3.2rem}.loro-summary-bar__flow{max-width:8.45rem;gap:.2rem}.loro-summary-bar__flow loro-icon{transform:scale(.78)}.loro-summary-bar__action loro-button{--loro-summary-button-min-height: 2.2rem;--loro-summary-button-padding: .48rem .44rem;--loro-summary-button-font-size: .74rem}small{font-size:.72rem}strong{font-size:clamp(1.28rem,7vw,1.6rem)}}@media(max-width:430px){.loro-summary-bar{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);padding:.72rem}.loro-summary-bar__total{padding-right:.5rem}.loro-summary-bar__total loro-button{max-width:7.8rem;--loro-summary-button-font-size: .68rem}.loro-summary-bar__action loro-button{--loro-summary-button-font-size: .68rem}.loro-summary-bar__flow{max-width:7.6rem}.loro-summary-bar__flow loro-image:first-child{width:3rem}.loro-summary-bar__flow loro-image:last-child{width:2.85rem}}\n"] }]
+        }], 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
+      class="loro-tab"
+      role="tablist"
+      [attr.aria-label]="ariaLabel() || null"
+      [class.loro-tab--block]="align() === 'block'"
+    >
+      @for (option of options(); track option.value) {
+        <button
+          type="button"
+          role="tab"
+          class="loro-tab__button"
+          [class.loro-tab__button--active]="value() === option.value"
+          [attr.aria-selected]="value() === option.value"
+          [attr.aria-label]="option.ariaLabel || option.label"
+          (click)="change.emit(option.value)"
+        >
+          @if (option.icon) {
+            <loro-icon
+              [name]="option.icon"
+              [size]="iconSize()"
+              [alt]="option.label"
+              [decorative]="true"
+              [color]="value() === option.value ? 'primary' : 'muted'"
+            />
+          }
+          <span>{{ option.label }}</span>
+        </button>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-tab{display:grid;grid-template-columns:repeat(var(--loro-tab-count, 2),minmax(0,1fr));min-height:var(--loro-tab-min-height, 2.8rem);overflow:hidden;border-bottom:1px solid var(--loro-border-subtle);background:transparent}.loro-tab__button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-width:0;min-height:100%;padding:var(--loro-tab-button-padding, .58rem .95rem .72rem);border:0;border-bottom:2px solid transparent;color:var(--loro-muted-strong);font:inherit;font-size:var(--loro-tab-font-size, .95rem);font-weight:900;line-height:var(--loro-tab-line-height, 1.15);background:transparent;cursor:pointer;transition:color .14s ease,border-color .14s ease,background .14s ease}.loro-tab--block .loro-tab__button{flex-direction:column;gap:.35rem}.loro-tab__button--active{border-bottom-color:var(--loro-primary-500);color:var(--loro-primary-500)}.loro-tab__button:hover{background:color-mix(in srgb,var(--loro-primary-500) 4%,transparent)}.loro-tab__button:focus-visible{outline:3px solid color-mix(in srgb,var(--loro-primary-500) 28%,transparent);outline-offset:-2px;border-radius:.35rem}\n"], dependencies: [{ kind: "component", type: LoroIcon$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroTab, decorators: [{
+            type: Component,
+            args: [{ selector: 'loro-tab', standalone: true, imports: [LoroIcon$1], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div
+      class="loro-tab"
+      role="tablist"
+      [attr.aria-label]="ariaLabel() || null"
+      [class.loro-tab--block]="align() === 'block'"
+    >
+      @for (option of options(); track option.value) {
+        <button
+          type="button"
+          role="tab"
+          class="loro-tab__button"
+          [class.loro-tab__button--active]="value() === option.value"
+          [attr.aria-selected]="value() === option.value"
+          [attr.aria-label]="option.ariaLabel || option.label"
+          (click)="change.emit(option.value)"
+        >
+          @if (option.icon) {
+            <loro-icon
+              [name]="option.icon"
+              [size]="iconSize()"
+              [alt]="option.label"
+              [decorative]="true"
+              [color]="value() === option.value ? 'primary' : 'muted'"
+            />
+          }
+          <span>{{ option.label }}</span>
+        </button>
+      }
+    </div>
+  `, host: {
+                        '[style.--loro-tab-count]': 'options().length',
+                    }, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-tab{display:grid;grid-template-columns:repeat(var(--loro-tab-count, 2),minmax(0,1fr));min-height:var(--loro-tab-min-height, 2.8rem);overflow:hidden;border-bottom:1px solid var(--loro-border-subtle);background:transparent}.loro-tab__button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-width:0;min-height:100%;padding:var(--loro-tab-button-padding, .58rem .95rem .72rem);border:0;border-bottom:2px solid transparent;color:var(--loro-muted-strong);font:inherit;font-size:var(--loro-tab-font-size, .95rem);font-weight:900;line-height:var(--loro-tab-line-height, 1.15);background:transparent;cursor:pointer;transition:color .14s ease,border-color .14s ease,background .14s ease}.loro-tab--block .loro-tab__button{flex-direction:column;gap:.35rem}.loro-tab__button--active{border-bottom-color:var(--loro-primary-500);color:var(--loro-primary-500)}.loro-tab__button:hover{background:color-mix(in srgb,var(--loro-primary-500) 4%,transparent)}.loro-tab__button:focus-visible{outline:3px solid color-mix(in srgb,var(--loro-primary-500) 28%,transparent);outline-offset:-2px;border-radius:.35rem}\n"] }]
+        }], 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$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroAlert, decorators: [{
+            type: Component,
+            args: [{ selector: 'loro-alert', standalone: true, imports: [LoroIcon$1], 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
+      type="button"
+      class="loro-notification"
+      [class.loro-notification--active]="active()"
+      [class.loro-notification--disabled]="disabled()"
+      [disabled]="disabled()"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-expanded]="expanded()"
+      (click)="notificationClick.emit()">
+      <loro-icon name="bell" [size]="iconSize()" alt="" [decorative]="true" color="primary" />
+      @if (showBadge()) {
+        <span class="loro-notification__badge" [attr.aria-label]="badgeAriaLabel()">
+          {{ badgeLabel() }}
+        </span>
+      }
+    </button>
+  `, isInline: true, styles: [":host{display:inline-flex;font-family:var(--loro-font-brand)}.loro-notification{position:relative;display:grid;width:var(--loro-notification-size, 2.75rem);height:var(--loro-notification-size, 2.75rem);place-items:center;border:0;border-radius:50%;background:transparent;color:var(--loro-primary-700);cursor:pointer;transition:background .15s ease,transform .15s ease;-webkit-tap-highlight-color:transparent}.loro-notification:hover,.loro-notification--active{background:transparent}.loro-notification:focus-visible{outline:2px solid rgba(108,60,255,.35);outline-offset:2px}.loro-notification:active{transform:scale(.97)}.loro-notification--disabled{cursor:not-allowed;opacity:.55;transform:none}.loro-notification__badge{position:absolute;top:.18rem;right:.1rem;display:grid;min-width:1.15rem;height:1.15rem;place-items:center;padding-inline:.25rem;border:2px solid var(--loro-surface);border-radius:999px;background:var(--loro-primary-500);color:#fff;font-size:.68rem;font-weight:950;line-height:1;box-sizing:border-box}\n"], dependencies: [{ kind: "component", type: LoroIcon$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroNotification, decorators: [{
+            type: Component,
+            args: [{ selector: 'loro-notification', standalone: true, imports: [LoroIcon$1], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <button
+      type="button"
+      class="loro-notification"
+      [class.loro-notification--active]="active()"
+      [class.loro-notification--disabled]="disabled()"
+      [disabled]="disabled()"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-expanded]="expanded()"
+      (click)="notificationClick.emit()">
+      <loro-icon name="bell" [size]="iconSize()" alt="" [decorative]="true" color="primary" />
+      @if (showBadge()) {
+        <span class="loro-notification__badge" [attr.aria-label]="badgeAriaLabel()">
+          {{ badgeLabel() }}
+        </span>
+      }
+    </button>
+  `, styles: [":host{display:inline-flex;font-family:var(--loro-font-brand)}.loro-notification{position:relative;display:grid;width:var(--loro-notification-size, 2.75rem);height:var(--loro-notification-size, 2.75rem);place-items:center;border:0;border-radius:50%;background:transparent;color:var(--loro-primary-700);cursor:pointer;transition:background .15s ease,transform .15s ease;-webkit-tap-highlight-color:transparent}.loro-notification:hover,.loro-notification--active{background:transparent}.loro-notification:focus-visible{outline:2px solid rgba(108,60,255,.35);outline-offset:2px}.loro-notification:active{transform:scale(.97)}.loro-notification--disabled{cursor:not-allowed;opacity:.55;transform:none}.loro-notification__badge{position:absolute;top:.18rem;right:.1rem;display:grid;min-width:1.15rem;height:1.15rem;place-items:center;padding-inline:.25rem;border:2px solid var(--loro-surface);border-radius:999px;background:var(--loro-primary-500);color:#fff;font-size:.68rem;font-weight:950;line-height:1;box-sizing:border-box}\n"] }]
+        }], 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 LoroNotificationPanel {
+    title = input('Notifications', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    presentation = input('dropdown', ...(ngDevMode ? [{ debugName: "presentation" }] : /* istanbul ignore next */ []));
+    showMarkAll = input(true, ...(ngDevMode ? [{ debugName: "showMarkAll" }] : /* istanbul ignore next */ []));
+    markAllLabel = input('Mark all as read', ...(ngDevMode ? [{ debugName: "markAllLabel" }] : /* istanbul ignore next */ []));
+    showClearAll = input(true, ...(ngDevMode ? [{ debugName: "showClearAll" }] : /* istanbul ignore next */ []));
+    clearAllLabel = input('Delete notifications', ...(ngDevMode ? [{ debugName: "clearAllLabel" }] : /* istanbul ignore next */ []));
+    emptyIcon = input('bell', ...(ngDevMode ? [{ debugName: "emptyIcon" }] : /* istanbul ignore next */ []));
+    emptyTitle = input('No new notifications', ...(ngDevMode ? [{ debugName: "emptyTitle" }] : /* istanbul ignore next */ []));
+    emptyMessage = input('When there is something new, it will appear here.', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+    itemClick = output();
+    itemRemove = output();
+    markAllRead = output();
+    clearAll = output();
+    hasUnread = computed(() => this.items().some((item) => !!item.unread), ...(ngDevMode ? [{ debugName: "hasUnread" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroNotificationPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroNotificationPanel, isStandalone: true, selector: "loro-notification-panel", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, presentation: { classPropertyName: "presentation", publicName: "presentation", isSignal: true, isRequired: false, transformFunction: null }, showMarkAll: { classPropertyName: "showMarkAll", publicName: "showMarkAll", isSignal: true, isRequired: false, transformFunction: null }, markAllLabel: { classPropertyName: "markAllLabel", publicName: "markAllLabel", isSignal: true, isRequired: false, transformFunction: null }, showClearAll: { classPropertyName: "showClearAll", publicName: "showClearAll", isSignal: true, isRequired: false, transformFunction: null }, clearAllLabel: { classPropertyName: "clearAllLabel", publicName: "clearAllLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyIcon: { classPropertyName: "emptyIcon", publicName: "emptyIcon", isSignal: true, isRequired: false, transformFunction: null }, emptyTitle: { classPropertyName: "emptyTitle", publicName: "emptyTitle", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", itemRemove: "itemRemove", markAllRead: "markAllRead", clearAll: "clearAll" }, ngImport: i0, template: `
+    <section
+      class="loro-notification-panel"
+      [class.loro-notification-panel--sheet]="presentation() === 'sheet'"
+      [class.loro-notification-panel--empty]="items().length === 0">
+      @if (presentation() === 'sheet') {
+        <span class="loro-notification-panel__handle" aria-hidden="true"></span>
+      }
+      <header class="loro-notification-panel__header">
+        <h2>{{ title() }}</h2>
+        @if (items().length > 0) {
+          <div class="loro-notification-panel__actions">
+            @if (showMarkAll() && hasUnread()) {
+              <button type="button" (click)="markAllRead.emit()">{{ markAllLabel() }}</button>
+            } @else if (showClearAll()) {
+              <button type="button" (click)="clearAll.emit()">{{ clearAllLabel() }}</button>
+            }
+          </div>
+        }
+      </header>
+
+      @if (items().length > 0) {
+        <div class="loro-notification-panel__list">
+          @for (item of items(); track item.id) {
+            <loro-notification-row
+              [title]="item.title"
+              [message]="item.message"
+              [time]="item.time || ''"
+              [icon]="item.icon || 'info'"
+              [unread]="!!item.unread"
+              (rowClick)="itemClick.emit(item)"
+              (rowRemove)="itemRemove.emit(item)" />
+          }
+        </div>
+      } @else {
+        <div class="loro-notification-panel__empty">
+          <span class="loro-notification-panel__empty-icon">
+            <loro-icon [name]="emptyIcon()" [size]="64" [alt]="emptyTitle()" color="primary" />
+          </span>
+          <strong>{{ emptyTitle() }}</strong>
+          <p>{{ emptyMessage() }}</p>
+        </div>
+      }
+    </section>
+  `, isInline: true, styles: [":host{display:block;width:min(100%,24rem);min-height:0;font-family:var(--loro-font-brand)}.loro-notification-panel{overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;height:100%;min-height:0;isolation:isolate;border:1px solid var(--loro-border-subtle);border-radius:1rem;background:var(--loro-surface);box-shadow:var(--loro-shadow-panel);color:var(--loro-text)}.loro-notification-panel__handle{display:none}.loro-notification-panel__header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem;padding:.9rem 1rem;border-bottom:1px solid var(--loro-border-subtle)}.loro-notification-panel__actions{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:.75rem}h2{margin:0;color:var(--loro-text-strong);font-size:1rem;font-weight:950}button{border:0;background:transparent;color:var(--loro-primary-700);font:inherit;font-size:.82rem;font-weight:850;cursor:pointer}.loro-notification-panel__list{display:grid;align-content:start;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;background:var(--loro-surface)}.loro-notification-panel__empty{display:grid;min-height:18rem;place-items:center;align-content:center;gap:.75rem;padding:2rem;text-align:center;background:var(--loro-surface)}.loro-notification-panel__empty-icon{display:grid;width:6rem;height:6rem;place-items:center;border-radius:50%;background:#6c3cff0f}.loro-notification-panel__empty strong{color:var(--loro-text-strong);font-weight:950}.loro-notification-panel__empty p{max-width:16rem;margin:0;color:var(--loro-muted);font-weight:700;line-height:1.45}@media(min-width:1024px){.loro-notification-panel__list{max-height:min(28rem,60vh)}}@media(max-width:1023.88px){:host{display:grid;width:100%;height:100%;min-height:0}.loro-notification-panel,.loro-notification-panel--sheet{width:100%;height:100%;min-height:0;border-radius:1.15rem 1.15rem 0 0;background:var(--loro-surface)}.loro-notification-panel--sheet{display:grid;min-height:0;grid-template-rows:auto auto minmax(0,1fr)}.loro-notification-panel--sheet .loro-notification-panel__list{min-height:0;height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;background:var(--loro-surface);touch-action:pan-y}.loro-notification-panel--sheet .loro-notification-panel__header{position:sticky;top:0;z-index:2;background:var(--loro-surface);align-items:start;grid-template-columns:minmax(0,1fr);gap:.65rem}.loro-notification-panel--sheet.loro-notification-panel--empty .loro-notification-panel__header{border-bottom:0}.loro-notification-panel--sheet .loro-notification-panel__empty{min-height:0;height:100%;padding:1rem 1.15rem 1.4rem;background:var(--loro-surface)}.loro-notification-panel--sheet .loro-notification-panel__handle{display:block;width:3rem;height:.25rem;margin:.5rem auto .2rem;border-radius:999px;background:#62588259}.loro-notification-panel--sheet .loro-notification-panel__header{padding:.7rem .95rem}.loro-notification-panel__actions{display:flex;width:100%;justify-content:space-between;gap:.5rem}.loro-notification-panel__actions button{white-space:nowrap}}\n"], dependencies: [{ kind: "component", type: LoroIcon$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }, { kind: "component", type: LoroNotificationRow$1, selector: "loro-notification-row", inputs: ["title", "message", "time", "icon", "unread"], outputs: ["rowClick", "rowRemove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroNotificationPanel, decorators: [{
+            type: Component,
+            args: [{ selector: 'loro-notification-panel', standalone: true, imports: [LoroIcon$1, LoroNotificationRow$1], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <section
+      class="loro-notification-panel"
+      [class.loro-notification-panel--sheet]="presentation() === 'sheet'"
+      [class.loro-notification-panel--empty]="items().length === 0">
+      @if (presentation() === 'sheet') {
+        <span class="loro-notification-panel__handle" aria-hidden="true"></span>
+      }
+      <header class="loro-notification-panel__header">
+        <h2>{{ title() }}</h2>
+        @if (items().length > 0) {
+          <div class="loro-notification-panel__actions">
+            @if (showMarkAll() && hasUnread()) {
+              <button type="button" (click)="markAllRead.emit()">{{ markAllLabel() }}</button>
+            } @else if (showClearAll()) {
+              <button type="button" (click)="clearAll.emit()">{{ clearAllLabel() }}</button>
+            }
+          </div>
+        }
+      </header>
+
+      @if (items().length > 0) {
+        <div class="loro-notification-panel__list">
+          @for (item of items(); track item.id) {
+            <loro-notification-row
+              [title]="item.title"
+              [message]="item.message"
+              [time]="item.time || ''"
+              [icon]="item.icon || 'info'"
+              [unread]="!!item.unread"
+              (rowClick)="itemClick.emit(item)"
+              (rowRemove)="itemRemove.emit(item)" />
+          }
+        </div>
+      } @else {
+        <div class="loro-notification-panel__empty">
+          <span class="loro-notification-panel__empty-icon">
+            <loro-icon [name]="emptyIcon()" [size]="64" [alt]="emptyTitle()" color="primary" />
+          </span>
+          <strong>{{ emptyTitle() }}</strong>
+          <p>{{ emptyMessage() }}</p>
+        </div>
+      }
+    </section>
+  `, styles: [":host{display:block;width:min(100%,24rem);min-height:0;font-family:var(--loro-font-brand)}.loro-notification-panel{overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;height:100%;min-height:0;isolation:isolate;border:1px solid var(--loro-border-subtle);border-radius:1rem;background:var(--loro-surface);box-shadow:var(--loro-shadow-panel);color:var(--loro-text)}.loro-notification-panel__handle{display:none}.loro-notification-panel__header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem;padding:.9rem 1rem;border-bottom:1px solid var(--loro-border-subtle)}.loro-notification-panel__actions{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:.75rem}h2{margin:0;color:var(--loro-text-strong);font-size:1rem;font-weight:950}button{border:0;background:transparent;color:var(--loro-primary-700);font:inherit;font-size:.82rem;font-weight:850;cursor:pointer}.loro-notification-panel__list{display:grid;align-content:start;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;background:var(--loro-surface)}.loro-notification-panel__empty{display:grid;min-height:18rem;place-items:center;align-content:center;gap:.75rem;padding:2rem;text-align:center;background:var(--loro-surface)}.loro-notification-panel__empty-icon{display:grid;width:6rem;height:6rem;place-items:center;border-radius:50%;background:#6c3cff0f}.loro-notification-panel__empty strong{color:var(--loro-text-strong);font-weight:950}.loro-notification-panel__empty p{max-width:16rem;margin:0;color:var(--loro-muted);font-weight:700;line-height:1.45}@media(min-width:1024px){.loro-notification-panel__list{max-height:min(28rem,60vh)}}@media(max-width:1023.88px){:host{display:grid;width:100%;height:100%;min-height:0}.loro-notification-panel,.loro-notification-panel--sheet{width:100%;height:100%;min-height:0;border-radius:1.15rem 1.15rem 0 0;background:var(--loro-surface)}.loro-notification-panel--sheet{display:grid;min-height:0;grid-template-rows:auto auto minmax(0,1fr)}.loro-notification-panel--sheet .loro-notification-panel__list{min-height:0;height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;background:var(--loro-surface);touch-action:pan-y}.loro-notification-panel--sheet .loro-notification-panel__header{position:sticky;top:0;z-index:2;background:var(--loro-surface);align-items:start;grid-template-columns:minmax(0,1fr);gap:.65rem}.loro-notification-panel--sheet.loro-notification-panel--empty .loro-notification-panel__header{border-bottom:0}.loro-notification-panel--sheet .loro-notification-panel__empty{min-height:0;height:100%;padding:1rem 1.15rem 1.4rem;background:var(--loro-surface)}.loro-notification-panel--sheet .loro-notification-panel__handle{display:block;width:3rem;height:.25rem;margin:.5rem auto .2rem;border-radius:999px;background:#62588259}.loro-notification-panel--sheet .loro-notification-panel__header{padding:.7rem .95rem}.loro-notification-panel__actions{display:flex;width:100%;justify-content:space-between;gap:.5rem}.loro-notification-panel__actions button{white-space:nowrap}}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], presentation: [{ type: i0.Input, args: [{ isSignal: true, alias: "presentation", required: false }] }], showMarkAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMarkAll", required: false }] }], markAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "markAllLabel", required: false }] }], showClearAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearAll", required: false }] }], clearAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAllLabel", required: false }] }], emptyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyIcon", required: false }] }], emptyTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTitle", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], itemRemove: [{ type: i0.Output, args: ["itemRemove"] }], markAllRead: [{ type: i0.Output, args: ["markAllRead"] }], clearAll: [{ type: i0.Output, args: ["clearAll"] }] } });
+
+class LoroNotificationRow {
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    message = input.required(...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    time = input('', ...(ngDevMode ? [{ debugName: "time" }] : /* istanbul ignore next */ []));
+    icon = input('info', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    unread = input(false, ...(ngDevMode ? [{ debugName: "unread" }] : /* istanbul ignore next */ []));
+    rowClick = output();
+    rowRemove = output();
+    dragX = signal(0, ...(ngDevMode ? [{ debugName: "dragX" }] : /* istanbul ignore next */ []));
+    dragging = signal(false, ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
+    armed = signal(false, ...(ngDevMode ? [{ debugName: "armed" }] : /* istanbul ignore next */ []));
+    removing = signal(false, ...(ngDevMode ? [{ debugName: "removing" }] : /* istanbul ignore next */ []));
+    touchStartX = 0;
+    touchStartY = 0;
+    clickSuppressed = false;
+    static REVEAL_PX = 96;
+    static MAX_PX = 164;
+    static DELETE_EXTRA_PX = 44;
+    onTouchStart(event) {
+        const touch = event.touches[0];
+        if (!touch || this.removing()) {
+            return;
+        }
+        this.touchStartX = touch.clientX;
+        this.touchStartY = touch.clientY;
+        this.clickSuppressed = false;
+        this.dragging.set(true);
+    }
+    onTouchMove(event) {
+        const touch = event.touches[0];
+        if (!touch || this.removing()) {
+            return;
+        }
+        const deltaX = touch.clientX - this.touchStartX;
+        const deltaY = touch.clientY - this.touchStartY;
+        if (Math.abs(deltaY) > Math.abs(deltaX) && Math.abs(deltaY) > 8) {
+            this.resetDrag();
+            return;
+        }
+        const nextX = this.armed()
+            ? Math.max(-LoroNotificationRow.MAX_PX, Math.min(-LoroNotificationRow.REVEAL_PX, -LoroNotificationRow.REVEAL_PX + deltaX))
+            : Math.min(0, Math.max(deltaX, -LoroNotificationRow.MAX_PX));
+        this.dragX.set(nextX);
+        this.clickSuppressed = nextX < -8;
+    }
+    onTouchEnd() {
+        if (this.removing()) {
+            return;
+        }
+        const offset = this.dragX();
+        this.dragging.set(false);
+        if (this.armed()) {
+            if (offset <= -(LoroNotificationRow.REVEAL_PX + LoroNotificationRow.DELETE_EXTRA_PX)) {
+                this.startRemove();
+                return;
+            }
+            if (offset > -(LoroNotificationRow.REVEAL_PX - 18)) {
+                this.armed.set(false);
+                this.dragX.set(0);
+                return;
+            }
+            this.dragX.set(-LoroNotificationRow.REVEAL_PX);
+            this.clickSuppressed = true;
+            return;
+        }
+        if (offset <= -LoroNotificationRow.REVEAL_PX) {
+            this.armed.set(true);
+            this.dragX.set(-LoroNotificationRow.REVEAL_PX);
+            this.clickSuppressed = true;
+            return;
+        }
+        this.dragX.set(0);
+    }
+    resetDrag() {
+        if (this.removing()) {
+            return;
+        }
+        this.dragging.set(false);
+        this.dragX.set(this.armed() ? -LoroNotificationRow.REVEAL_PX : 0);
+    }
+    onRowClick() {
+        if (this.clickSuppressed || this.removing() || this.armed()) {
+            this.clickSuppressed = false;
+            return;
+        }
+        this.rowClick.emit();
+    }
+    onRowKeydown(event) {
+        event.preventDefault();
+        this.onRowClick();
+    }
+    onDeleteClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.startRemove();
+    }
+    startRemove() {
+        this.armed.set(false);
+        this.removing.set(true);
+        this.dragX.set(-LoroNotificationRow.MAX_PX);
+        window.setTimeout(() => this.rowRemove.emit(), 180);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroNotificationRow, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroNotificationRow, isStandalone: true, selector: "loro-notification-row", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, time: { classPropertyName: "time", publicName: "time", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, unread: { classPropertyName: "unread", publicName: "unread", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowClick: "rowClick", rowRemove: "rowRemove" }, ngImport: i0, template: `
+    <div
+      class="loro-notification-row-shell"
+      data-horizontal-gesture
+      [class.loro-notification-row-shell--dragging]="dragging()"
+      [class.loro-notification-row-shell--armed]="armed()"
+      [class.loro-notification-row-shell--removing]="removing()"
+      (touchstart)="onTouchStart($event)"
+      (touchmove)="onTouchMove($event)"
+      (touchend)="onTouchEnd()"
+      (touchcancel)="resetDrag()">
+      <span class="loro-notification-row-shell__delete" aria-hidden="true">
+        <loro-icon name="trash-white" [size]="22" alt="" [decorative]="true" color="inverse" />
+        <span>Eliminar</span>
+      </span>
+      <article
+        role="button"
+        tabindex="0"
+        class="loro-notification-row"
+        [class.loro-notification-row--unread]="unread()"
+        [style.transform]="'translate3d(' + dragX() + 'px, 0, 0)'"
+        (click)="onRowClick()"
+        (keydown.enter)="onRowKeydown($event)"
+        (keydown.space)="onRowKeydown($event)">
+        <span class="loro-notification-row__icon">
+          <loro-icon [name]="icon()" [size]="26" [alt]="title()" color="primary" />
+        </span>
+        <span class="loro-notification-row__content">
+          <span class="loro-notification-row__meta">
+            <strong>{{ title() }}</strong>
+            @if (time()) {
+              <small>{{ time() }}</small>
+            }
+          </span>
+          <span class="loro-notification-row__message">{{ message() }}</span>
+        </span>
+        @if (unread()) {
+          <span class="loro-notification-row__dot" aria-label="Unread"></span>
+        }
+        <button
+          type="button"
+          class="loro-notification-row__delete-button"
+          aria-label="Eliminar notificacion"
+          (click)="onDeleteClick($event)">
+          <loro-icon name="trash" [size]="18" alt="" [decorative]="true" color="danger" />
+        </button>
+      </article>
+    </div>
+  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-notification-row-shell{position:relative;overflow:hidden;background:transparent;touch-action:pan-y}.loro-notification-row-shell__delete{position:absolute;inset:0 0 0 auto;display:grid;width:8.75rem;align-content:center;justify-items:center;gap:.45rem;background:#ef4444;color:var(--loro-text-inverse);opacity:0;transition:opacity .18s ease,transform .18s ease}.loro-notification-row-shell--dragging .loro-notification-row-shell__delete,.loro-notification-row-shell--armed .loro-notification-row-shell__delete,.loro-notification-row-shell--removing .loro-notification-row-shell__delete{opacity:1}.loro-notification-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:.85rem;width:100%;padding:.82rem .95rem;border:0;border-bottom:1px solid var(--loro-border-subtle);background:var(--loro-surface);color:var(--loro-text);text-align:left;cursor:pointer;will-change:transform;transition:background .15s ease,transform .22s cubic-bezier(.2,.8,.2,1),opacity .18s ease}.loro-notification-row-shell--dragging .loro-notification-row{transition:background .15s ease}.loro-notification-row-shell--removing .loro-notification-row{opacity:.18;transform:translate3d(-100%,0,0)!important}:host:last-child .loro-notification-row{border-bottom-color:transparent}.loro-notification-row:hover{background:var(--loro-surface)}.loro-notification-row:focus-visible{position:relative;z-index:1;outline:2px solid rgba(108,60,255,.32);outline-offset:-2px}.loro-notification-row__icon{display:grid;width:2.5rem;height:2.5rem;place-items:center;border-radius:.8rem;background:transparent}.loro-notification-row__content{display:grid;gap:.2rem;min-width:0}.loro-notification-row__meta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:.75rem}strong{overflow:hidden;color:var(--loro-text-strong);font-size:.92rem;font-weight:950;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}small,.loro-notification-row__message{color:var(--loro-muted);font-size:.82rem;font-weight:700;line-height:1.35}.loro-notification-row__dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--loro-primary-500)}.loro-notification-row__delete-button{display:grid;width:2.25rem;height:2.25rem;place-items:center;border:0;border-radius:.7rem;background:color-mix(in srgb,var(--loro-danger-text) 8%,transparent);cursor:pointer;opacity:0;transition:background .15s ease,opacity .15s ease,transform .15s ease}.loro-notification-row:hover .loro-notification-row__delete-button,.loro-notification-row:focus-visible .loro-notification-row__delete-button,.loro-notification-row__delete-button:focus-visible{opacity:1}.loro-notification-row__delete-button:hover,.loro-notification-row__delete-button:focus-visible{background:color-mix(in srgb,var(--loro-danger-text) 14%,transparent);outline:0;transform:translateY(-1px)}@media(max-width:1023.88px){.loro-notification-row{grid-template-columns:auto minmax(0,1fr) auto;padding:.82rem .8rem}.loro-notification-row__delete-button{display:none}}\n"], dependencies: [{ kind: "component", type: LoroIcon$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroNotificationRow, decorators: [{
+            type: Component,
+            args: [{ selector: 'loro-notification-row', standalone: true, imports: [LoroIcon$1], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div
+      class="loro-notification-row-shell"
+      data-horizontal-gesture
+      [class.loro-notification-row-shell--dragging]="dragging()"
+      [class.loro-notification-row-shell--armed]="armed()"
+      [class.loro-notification-row-shell--removing]="removing()"
+      (touchstart)="onTouchStart($event)"
+      (touchmove)="onTouchMove($event)"
+      (touchend)="onTouchEnd()"
+      (touchcancel)="resetDrag()">
+      <span class="loro-notification-row-shell__delete" aria-hidden="true">
+        <loro-icon name="trash-white" [size]="22" alt="" [decorative]="true" color="inverse" />
+        <span>Eliminar</span>
+      </span>
+      <article
+        role="button"
+        tabindex="0"
+        class="loro-notification-row"
+        [class.loro-notification-row--unread]="unread()"
+        [style.transform]="'translate3d(' + dragX() + 'px, 0, 0)'"
+        (click)="onRowClick()"
+        (keydown.enter)="onRowKeydown($event)"
+        (keydown.space)="onRowKeydown($event)">
+        <span class="loro-notification-row__icon">
+          <loro-icon [name]="icon()" [size]="26" [alt]="title()" color="primary" />
+        </span>
+        <span class="loro-notification-row__content">
+          <span class="loro-notification-row__meta">
+            <strong>{{ title() }}</strong>
+            @if (time()) {
+              <small>{{ time() }}</small>
+            }
+          </span>
+          <span class="loro-notification-row__message">{{ message() }}</span>
+        </span>
+        @if (unread()) {
+          <span class="loro-notification-row__dot" aria-label="Unread"></span>
+        }
+        <button
+          type="button"
+          class="loro-notification-row__delete-button"
+          aria-label="Eliminar notificacion"
+          (click)="onDeleteClick($event)">
+          <loro-icon name="trash" [size]="18" alt="" [decorative]="true" color="danger" />
+        </button>
+      </article>
+    </div>
+  `, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-notification-row-shell{position:relative;overflow:hidden;background:transparent;touch-action:pan-y}.loro-notification-row-shell__delete{position:absolute;inset:0 0 0 auto;display:grid;width:8.75rem;align-content:center;justify-items:center;gap:.45rem;background:#ef4444;color:var(--loro-text-inverse);opacity:0;transition:opacity .18s ease,transform .18s ease}.loro-notification-row-shell--dragging .loro-notification-row-shell__delete,.loro-notification-row-shell--armed .loro-notification-row-shell__delete,.loro-notification-row-shell--removing .loro-notification-row-shell__delete{opacity:1}.loro-notification-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:.85rem;width:100%;padding:.82rem .95rem;border:0;border-bottom:1px solid var(--loro-border-subtle);background:var(--loro-surface);color:var(--loro-text);text-align:left;cursor:pointer;will-change:transform;transition:background .15s ease,transform .22s cubic-bezier(.2,.8,.2,1),opacity .18s ease}.loro-notification-row-shell--dragging .loro-notification-row{transition:background .15s ease}.loro-notification-row-shell--removing .loro-notification-row{opacity:.18;transform:translate3d(-100%,0,0)!important}:host:last-child .loro-notification-row{border-bottom-color:transparent}.loro-notification-row:hover{background:var(--loro-surface)}.loro-notification-row:focus-visible{position:relative;z-index:1;outline:2px solid rgba(108,60,255,.32);outline-offset:-2px}.loro-notification-row__icon{display:grid;width:2.5rem;height:2.5rem;place-items:center;border-radius:.8rem;background:transparent}.loro-notification-row__content{display:grid;gap:.2rem;min-width:0}.loro-notification-row__meta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:.75rem}strong{overflow:hidden;color:var(--loro-text-strong);font-size:.92rem;font-weight:950;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}small,.loro-notification-row__message{color:var(--loro-muted);font-size:.82rem;font-weight:700;line-height:1.35}.loro-notification-row__dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--loro-primary-500)}.loro-notification-row__delete-button{display:grid;width:2.25rem;height:2.25rem;place-items:center;border:0;border-radius:.7rem;background:color-mix(in srgb,var(--loro-danger-text) 8%,transparent);cursor:pointer;opacity:0;transition:background .15s ease,opacity .15s ease,transform .15s ease}.loro-notification-row:hover .loro-notification-row__delete-button,.loro-notification-row:focus-visible .loro-notification-row__delete-button,.loro-notification-row__delete-button:focus-visible{opacity:1}.loro-notification-row__delete-button:hover,.loro-notification-row__delete-button:focus-visible{background:color-mix(in srgb,var(--loro-danger-text) 14%,transparent);outline:0;transform:translateY(-1px)}@media(max-width:1023.88px){.loro-notification-row{grid-template-columns:auto minmax(0,1fr) auto;padding:.82rem .8rem}.loro-notification-row__delete-button{display:none}}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], time: [{ type: i0.Input, args: [{ isSignal: true, alias: "time", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], unread: [{ type: i0.Input, args: [{ isSignal: true, alias: "unread", required: false }] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowRemove: [{ type: i0.Output, args: ["rowRemove"] }] } });
+
+class LoroSpinner {
+    iconName = 'image-loro-icon-default';
+    message = input('Cargando...', ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Cargando contenido', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    showBrand = input(true, ...(ngDevMode ? [{ debugName: "showBrand" }] : /* istanbul ignore next */ []));
+    brandText = input('AlLoro', ...(ngDevMode ? [{ debugName: "brandText" }] : /* istanbul ignore next */ []));
+    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$1, 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: LoroSpinner, decorators: [{
+            type: Component,
+            args: [{ selector: 'loro-spinner', standalone: true, imports: [LoroImage$1], 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"] }]
+        }], 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 {
+    message = input.required(...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    variant = input('info', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    position = input('bottom-right', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    visible = input(true, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    dismissible = input(true, ...(ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []));
+    dismiss = output();
+    resolvedIcon() {
+        switch (this.variant()) {
+            case 'success':
+                return 'check';
+            case 'warning':
+                return 'warning';
+            case 'error':
+                return 'shield-alert';
+            default:
+                return 'info';
+        }
+    }
+    iconColor() {
+        switch (this.variant()) {
+            case 'success':
+                return 'success';
+            case 'warning':
+                return 'warning';
+            case 'error':
+                return 'danger';
+            default:
+                return 'primary';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroToast, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroToast, isStandalone: true, selector: "loro-toast", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss" }, host: { properties: { "class.loro-toast-host--inline": "position() === 'inline'" } }, ngImport: i0, template: `
+    @if (visible()) {
+      <aside
+        class="loro-toast"
+        [class]="'loro-toast loro-toast--' + variant() + ' loro-toast--' + position()"
+        [attr.role]="variant() === 'error' ? 'alert' : 'status'">
+        <span class="loro-toast__icon">
+          @if (variant() === 'loading') {
+            <span class="loro-toast__spinner" aria-hidden="true"></span>
+          } @else {
+            <loro-icon [name]="resolvedIcon()" [size]="24" [alt]="message()" [color]="iconColor()" />
+          }
+        </span>
+        <span>{{ message() }}</span>
+        @if (dismissible()) {
+          <button type="button" (click)="dismiss.emit()" aria-label="Dismiss notification">x</button>
+        }
+      </aside>
+    }
+  `, isInline: true, styles: [":host{z-index:1000;display:block;font-family:var(--loro-font-brand);pointer-events:none}:host(.loro-toast-host--inline){width:100%}.loro-toast{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.75rem;width:min(24rem,calc(100vw - 2rem));min-height:3.6rem;padding:.85rem 1rem;border:1px solid var(--loro-border-subtle);border-radius:.8rem;background:var(--loro-surface);color:var(--loro-text-strong);box-shadow:var(--loro-shadow-panel);font-weight:800;pointer-events:auto}.loro-toast--top-right{position:fixed;top:1rem;right:1rem}.loro-toast--bottom-right{position:fixed;right:1rem;bottom:1rem}.loro-toast--bottom-center{position:fixed;bottom:1rem;left:50%;transform:translate(-50%)}.loro-toast--inline{position:static;width:100%;transform:none}.loro-toast__icon{display:grid;width:1.8rem;height:1.8rem;place-items:center}.loro-toast__spinner{width:1.35rem;height:1.35rem;border:2px solid rgba(108,60,255,.18);border-top-color:var(--loro-primary-500);border-radius:50%;animation:loro-toast-spin .85s linear infinite}button{border:0;background:transparent;color:var(--loro-muted);font:inherit;cursor:pointer}@keyframes loro-toast-spin{to{transform:rotate(360deg)}}@media(max-width:1023.88px){.loro-toast:not(.loro-toast--inline){right:1rem;bottom:calc(env(safe-area-inset-bottom,0px) + 1rem);left:1rem;width:auto;transform:none}}\n"], dependencies: [{ kind: "component", type: LoroIcon$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroToast, decorators: [{
+            type: Component,
+            args: [{ selector: 'loro-toast', standalone: true, imports: [LoroIcon$1], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.loro-toast-host--inline]': "position() === 'inline'",
+                    }, template: `
+    @if (visible()) {
+      <aside
+        class="loro-toast"
+        [class]="'loro-toast loro-toast--' + variant() + ' loro-toast--' + position()"
+        [attr.role]="variant() === 'error' ? 'alert' : 'status'">
+        <span class="loro-toast__icon">
+          @if (variant() === 'loading') {
+            <span class="loro-toast__spinner" aria-hidden="true"></span>
+          } @else {
+            <loro-icon [name]="resolvedIcon()" [size]="24" [alt]="message()" [color]="iconColor()" />
+          }
+        </span>
+        <span>{{ message() }}</span>
+        @if (dismissible()) {
+          <button type="button" (click)="dismiss.emit()" aria-label="Dismiss notification">x</button>
+        }
+      </aside>
+    }
+  `, styles: [":host{z-index:1000;display:block;font-family:var(--loro-font-brand);pointer-events:none}:host(.loro-toast-host--inline){width:100%}.loro-toast{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.75rem;width:min(24rem,calc(100vw - 2rem));min-height:3.6rem;padding:.85rem 1rem;border:1px solid var(--loro-border-subtle);border-radius:.8rem;background:var(--loro-surface);color:var(--loro-text-strong);box-shadow:var(--loro-shadow-panel);font-weight:800;pointer-events:auto}.loro-toast--top-right{position:fixed;top:1rem;right:1rem}.loro-toast--bottom-right{position:fixed;right:1rem;bottom:1rem}.loro-toast--bottom-center{position:fixed;bottom:1rem;left:50%;transform:translate(-50%)}.loro-toast--inline{position:static;width:100%;transform:none}.loro-toast__icon{display:grid;width:1.8rem;height:1.8rem;place-items:center}.loro-toast__spinner{width:1.35rem;height:1.35rem;border:2px solid rgba(108,60,255,.18);border-top-color:var(--loro-primary-500);border-radius:50%;animation:loro-toast-spin .85s linear infinite}button{border:0;background:transparent;color:var(--loro-muted);font:inherit;cursor:pointer}@keyframes loro-toast-spin{to{transform:rotate(360deg)}}@media(max-width:1023.88px){.loro-toast:not(.loro-toast--inline){right:1rem;bottom:calc(env(safe-area-inset-bottom,0px) + 1rem);left:1rem;width:auto;transform:none}}\n"] }]
+        }], 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 */ []));
+    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 */ []));
+    type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    autocomplete = input('off', ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
+    selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    state = input('default', ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    errorId = `loro-auth-field-error-${++nextLoroAuthFieldId}`;
+    errorText = computed(() => this.errorMessage().trim(), ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
+    hasError = computed(() => this.state() === 'error' || this.errorText().length > 0, ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    passwordVisible = signal(false, ...(ngDevMode ? [{ debugName: "passwordVisible" }] : /* istanbul ignore next */ []));
+    showToggle() {
+        return this.type() === 'password';
+    }
+    resolvedType() {
+        return this.type() === 'password' && this.passwordVisible() ? 'text' : this.type();
+    }
+    toggleVisibility() {
+        this.passwordVisible.update((value) => !value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroAuthField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroAuthField, isStandalone: true, selector: "loro-auth-field", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
+    <label
+      class="loro-auth-field"
+      [class.loro-auth-field--selected]="selected()"
+      [class.loro-auth-field--error]="hasError()"
+    >
+      <span class="sr-only">{{ label() }}</span>
+      <span class="loro-auth-field__icon">
+        <loro-icon [name]="icon()" [size]="28" [alt]="label()" />
+      </span>
+      <input
+        class="loro-auth-field__input"
+        [type]="resolvedType()"
+        [attr.autocomplete]="autocomplete()"
+        [placeholder]="placeholder()"
+        [value]="value()"
+        [attr.aria-invalid]="hasError() ? 'true' : null"
+        [attr.aria-describedby]="hasError() && errorText() ? errorId : null"
+        (input)="valueChange.emit(($any($event.target).value ?? '').toString())"
+      />
+      @if (showToggle()) {
+        <button
+          type="button"
+          class="loro-auth-field__toggle"
+          (click)="toggleVisibility()"
+          [attr.aria-label]="passwordVisible() ? 'Ocultar contenido' : 'Mostrar contenido'"
+        >
+          <loro-icon name="eye" [size]="26" alt="Mostrar contenido" />
+        </button>
+      }
+    </label>
+    @if (hasError() && errorText()) {
+      <span class="loro-auth-field__error" [id]="errorId">
+        <loro-icon name="shield-alert" [size]="15" color="danger" [decorative]="true" />
+        <span>{{ errorText() }}</span>
+      </span>
+    }
+  `, isInline: true, styles: [":host{display:grid;gap:.35rem}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;padding:0}.loro-auth-field{display:grid;grid-template-columns:2rem minmax(0,1fr) auto;align-items:center;border:1px solid var(--loro-border-strong);border-radius:.72rem;background:var(--loro-surface);padding:.48rem .65rem;box-shadow:var(--loro-shadow-soft);color:var(--loro-text);font-family:var(--loro-font-brand);transition:border-color .18s ease,box-shadow .18s ease}.loro-auth-field:hover,.loro-auth-field:focus-within,.loro-auth-field--selected{border-color:var(--loro-auth-field-active-border, var(--loro-primary-500));box-shadow:var(--loro-shadow-soft),0 0 0 3px color-mix(in srgb,var(--loro-primary-500) 14%,transparent)}.loro-auth-field--error{border-color:color-mix(in srgb,var(--loro-danger-text) 30%,var(--loro-border-strong));background:color-mix(in srgb,var(--loro-danger-surface) 34%,var(--loro-surface));box-shadow:var(--loro-shadow-soft),0 0 0 3px color-mix(in srgb,var(--loro-danger-text) 7%,transparent)}.loro-auth-field--error:hover,.loro-auth-field--error:focus-within{border-color:color-mix(in srgb,var(--loro-danger-text) 44%,var(--loro-border-strong));box-shadow:var(--loro-shadow-soft),0 0 0 3px color-mix(in srgb,var(--loro-danger-text) 10%,transparent)}.loro-auth-field__icon{display:grid;place-items:center;width:24px}.loro-auth-field__icon loro-icon{transform:scale(.62)}.loro-auth-field__input{width:100%;border:0;outline:none;background:transparent;color:var(--loro-text);font:inherit;font-size:.72rem;line-height:1.3}.loro-auth-field__input::placeholder{color:var(--loro-muted)}.loro-auth-field__toggle{border:0;background:transparent;padding:0;color:inherit;line-height:0;cursor:pointer}.loro-auth-field__toggle loro-icon{transform:scale(.62)}.loro-auth-field__error{display:inline-grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.35rem;color:var(--loro-danger-text);font-size:.72rem;font-weight:750;line-height:1.3}\n"], dependencies: [{ kind: "component", type: LoroIcon$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroAuthField, decorators: [{
+            type: Component,
+            args: [{ selector: 'loro-auth-field', standalone: true, imports: [LoroIcon$1], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <label
+      class="loro-auth-field"
+      [class.loro-auth-field--selected]="selected()"
+      [class.loro-auth-field--error]="hasError()"
+    >
+      <span class="sr-only">{{ label() }}</span>
+      <span class="loro-auth-field__icon">
+        <loro-icon [name]="icon()" [size]="28" [alt]="label()" />
+      </span>
+      <input
+        class="loro-auth-field__input"
+        [type]="resolvedType()"
+        [attr.autocomplete]="autocomplete()"
+        [placeholder]="placeholder()"
+        [value]="value()"
+        [attr.aria-invalid]="hasError() ? 'true' : null"
+        [attr.aria-describedby]="hasError() && errorText() ? errorId : null"
+        (input)="valueChange.emit(($any($event.target).value ?? '').toString())"
+      />
+      @if (showToggle()) {
+        <button
+          type="button"
+          class="loro-auth-field__toggle"
+          (click)="toggleVisibility()"
+          [attr.aria-label]="passwordVisible() ? 'Ocultar contenido' : 'Mostrar contenido'"
+        >
+          <loro-icon name="eye" [size]="26" alt="Mostrar contenido" />
+        </button>
+      }
+    </label>
+    @if (hasError() && errorText()) {
+      <span class="loro-auth-field__error" [id]="errorId">
+        <loro-icon name="shield-alert" [size]="15" color="danger" [decorative]="true" />
+        <span>{{ errorText() }}</span>
+      </span>
+    }
+  `, styles: [":host{display:grid;gap:.35rem}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;padding:0}.loro-auth-field{display:grid;grid-template-columns:2rem minmax(0,1fr) auto;align-items:center;border:1px solid var(--loro-border-strong);border-radius:.72rem;background:var(--loro-surface);padding:.48rem .65rem;box-shadow:var(--loro-shadow-soft);color:var(--loro-text);font-family:var(--loro-font-brand);transition:border-color .18s ease,box-shadow .18s ease}.loro-auth-field:hover,.loro-auth-field:focus-within,.loro-auth-field--selected{border-color:var(--loro-auth-field-active-border, var(--loro-primary-500));box-shadow:var(--loro-shadow-soft),0 0 0 3px color-mix(in srgb,var(--loro-primary-500) 14%,transparent)}.loro-auth-field--error{border-color:color-mix(in srgb,var(--loro-danger-text) 30%,var(--loro-border-strong));background:color-mix(in srgb,var(--loro-danger-surface) 34%,var(--loro-surface));box-shadow:var(--loro-shadow-soft),0 0 0 3px color-mix(in srgb,var(--loro-danger-text) 7%,transparent)}.loro-auth-field--error:hover,.loro-auth-field--error:focus-within{border-color:color-mix(in srgb,var(--loro-danger-text) 44%,var(--loro-border-strong));box-shadow:var(--loro-shadow-soft),0 0 0 3px color-mix(in srgb,var(--loro-danger-text) 10%,transparent)}.loro-auth-field__icon{display:grid;place-items:center;width:24px}.loro-auth-field__icon loro-icon{transform:scale(.62)}.loro-auth-field__input{width:100%;border:0;outline:none;background:transparent;color:var(--loro-text);font:inherit;font-size:.72rem;line-height:1.3}.loro-auth-field__input::placeholder{color:var(--loro-muted)}.loro-auth-field__toggle{border:0;background:transparent;padding:0;color:inherit;line-height:0;cursor:pointer}.loro-auth-field__toggle loro-icon{transform:scale(.62)}.loro-auth-field__error{display:inline-grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.35rem;color:var(--loro-danger-text);font-size:.72rem;font-weight:750;line-height:1.3}\n"] }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+
+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
+      class="loro-checkbox"
+      [class.loro-checkbox--checked]="checked()"
+      [class.loro-checkbox--invalid]="showError()"
+      [class.loro-checkbox--disabled]="disabled()"
+    >
+      <input
+        type="checkbox"
+        class="loro-checkbox__native"
+        [checked]="checked()"
+        [disabled]="disabled()"
+        [required]="required()"
+        [readonly]="readonly()"
+        (change)="toggle(($any($event.target).checked))"
+        (blur)="touched.set(true)"
+      />
+      <span class="loro-checkbox__box" aria-hidden="true"></span>
+      <span class="loro-checkbox__content">
+        <span class="loro-checkbox__label">
+          @if (text()) {
+            {{ text() }}
+          } @else {
+            <ng-content></ng-content>
+          }
+        </span>
+        @if (errorText()) {
+          <span class="loro-checkbox__error">{{ errorText() }}</span>
+        } @else if (helperText()) {
+          <span class="loro-checkbox__helper">{{ helperText() }}</span>
+        }
+      </span>
+    </label>
+  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-checkbox{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.65rem;color:var(--loro-muted);cursor:pointer}.loro-checkbox--disabled{opacity:.62;cursor:not-allowed}.loro-checkbox__native{position:absolute;opacity:0;pointer-events:none}.loro-checkbox__box{position:relative;width:1.15rem;height:1.15rem;margin-top:.08rem;border:1.5px solid color-mix(in srgb,var(--loro-primary-500) 78%,#ffffff 22%);border-radius:.35rem;background:var(--loro-surface);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--loro-surface) 70%,transparent);transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}.loro-checkbox--checked .loro-checkbox__box{background:linear-gradient(180deg,#8f6bff,#6d3dff);border-color:var(--loro-primary-500);box-shadow:inset 0 0 0 1px color-mix(in srgb,#ffffff 18%,transparent),0 0 0 3px color-mix(in srgb,var(--loro-primary-500) 12%,transparent)}.loro-checkbox--checked .loro-checkbox__box:after{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:.8rem;font-weight:900;line-height:1;content:\"\\2713\"}.loro-checkbox--invalid .loro-checkbox__box{border-color:color-mix(in srgb,var(--loro-danger-text) 44%,var(--loro-primary-500));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-danger-text) 10%,transparent)}.loro-checkbox__content{display:grid;gap:.22rem;min-width:0}.loro-checkbox__label{color:inherit;font-size:var(--loro-checkbox-label-font-size, .9rem);font-weight:var(--loro-checkbox-label-font-weight, 750);line-height:var(--loro-checkbox-label-line-height, 1.35)}.loro-checkbox__helper,.loro-checkbox__error{font-size:.78rem;font-weight:700;line-height:1.3}.loro-checkbox__helper{color:var(--loro-muted)}.loro-checkbox__error{color:var(--loro-danger-text)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroCheckbox, decorators: [{
+            type: Component,
+            args: [{ selector: 'loro-checkbox', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <label
+      class="loro-checkbox"
+      [class.loro-checkbox--checked]="checked()"
+      [class.loro-checkbox--invalid]="showError()"
+      [class.loro-checkbox--disabled]="disabled()"
+    >
+      <input
+        type="checkbox"
+        class="loro-checkbox__native"
+        [checked]="checked()"
+        [disabled]="disabled()"
+        [required]="required()"
+        [readonly]="readonly()"
+        (change)="toggle(($any($event.target).checked))"
+        (blur)="touched.set(true)"
+      />
+      <span class="loro-checkbox__box" aria-hidden="true"></span>
+      <span class="loro-checkbox__content">
+        <span class="loro-checkbox__label">
+          @if (text()) {
+            {{ text() }}
+          } @else {
+            <ng-content></ng-content>
+          }
+        </span>
+        @if (errorText()) {
+          <span class="loro-checkbox__error">{{ errorText() }}</span>
+        } @else if (helperText()) {
+          <span class="loro-checkbox__helper">{{ helperText() }}</span>
+        }
+      </span>
+    </label>
+  `, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-checkbox{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.65rem;color:var(--loro-muted);cursor:pointer}.loro-checkbox--disabled{opacity:.62;cursor:not-allowed}.loro-checkbox__native{position:absolute;opacity:0;pointer-events:none}.loro-checkbox__box{position:relative;width:1.15rem;height:1.15rem;margin-top:.08rem;border:1.5px solid color-mix(in srgb,var(--loro-primary-500) 78%,#ffffff 22%);border-radius:.35rem;background:var(--loro-surface);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--loro-surface) 70%,transparent);transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}.loro-checkbox--checked .loro-checkbox__box{background:linear-gradient(180deg,#8f6bff,#6d3dff);border-color:var(--loro-primary-500);box-shadow:inset 0 0 0 1px color-mix(in srgb,#ffffff 18%,transparent),0 0 0 3px color-mix(in srgb,var(--loro-primary-500) 12%,transparent)}.loro-checkbox--checked .loro-checkbox__box:after{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:.8rem;font-weight:900;line-height:1;content:\"\\2713\"}.loro-checkbox--invalid .loro-checkbox__box{border-color:color-mix(in srgb,var(--loro-danger-text) 44%,var(--loro-primary-500));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-danger-text) 10%,transparent)}.loro-checkbox__content{display:grid;gap:.22rem;min-width:0}.loro-checkbox__label{color:inherit;font-size:var(--loro-checkbox-label-font-size, .9rem);font-weight:var(--loro-checkbox-label-font-weight, 750);line-height:var(--loro-checkbox-label-line-height, 1.35)}.loro-checkbox__helper,.loro-checkbox__error{font-size:.78rem;font-weight:700;line-height:1.3}.loro-checkbox__helper{color:var(--loro-muted)}.loro-checkbox__error{color:var(--loro-danger-text)}\n"] }]
+        }], 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 = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroDropdown, isStandalone: true, selector: "loro-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
+    <label class="loro-dropdown">
+      @if (label()) {
+        <span class="loro-dropdown__label">{{ label() }}</span>
+      }
+      <span class="loro-dropdown__control">
+        <select [value]="value()" (change)="valueChange.emit(($any($event.target).value ?? '').toString())">
+          @if (placeholder()) {
+            <option value="" disabled>{{ placeholder() }}</option>
+          }
+          @for (option of options(); track option.value) {
+            <option [value]="option.value">{{ option.label }}</option>
+          }
+        </select>
+        <loro-icon name="chevron-down" [size]="22" alt="Abrir opciones" color="primary" />
+      </span>
+    </label>
+  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-dropdown{display:grid;gap:.55rem}.loro-dropdown__label{color:var(--loro-muted-strong);font-size:.95rem;font-weight:800}.loro-dropdown__control{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;min-height:3.4rem;padding:0 1rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-input);background:var(--loro-surface)}select{width:100%;border:0;outline:0;appearance:none;background:transparent;color:var(--loro-text-strong);font:inherit;font-weight:700}\n"], dependencies: [{ kind: "component", type: LoroIcon$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroDropdown, decorators: [{
+            type: Component,
+            args: [{ selector: 'loro-dropdown', standalone: true, imports: [LoroIcon$1], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <label class="loro-dropdown">
+      @if (label()) {
+        <span class="loro-dropdown__label">{{ label() }}</span>
+      }
+      <span class="loro-dropdown__control">
+        <select [value]="value()" (change)="valueChange.emit(($any($event.target).value ?? '').toString())">
+          @if (placeholder()) {
+            <option value="" disabled>{{ placeholder() }}</option>
+          }
+          @for (option of options(); track option.value) {
+            <option [value]="option.value">{{ option.label }}</option>
+          }
+        </select>
+        <loro-icon name="chevron-down" [size]="22" alt="Abrir opciones" color="primary" />
+      </span>
+    </label>
+  `, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-dropdown{display:grid;gap:.55rem}.loro-dropdown__label{color:var(--loro-muted-strong);font-size:.95rem;font-weight:800}.loro-dropdown__control{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;min-height:3.4rem;padding:0 1rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-input);background:var(--loro-surface)}select{width:100%;border:0;outline:0;appearance:none;background:transparent;color:var(--loro-text-strong);font:inherit;font-weight:700}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+
+class LoroFilterChip {
+    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 */ []));
+    selected = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroFilterChip, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroFilterChip, isStandalone: true, selector: "loro-filter-chip", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, ngImport: i0, template: `
+    <button type="button" class="loro-filter-chip" [class.loro-filter-chip--active]="active()" (click)="selected.emit(value())">
+      @if (icon()) {
+        <loro-icon [name]="icon()!" [size]="20" [alt]="label()" [color]="active() ? 'inverse' : 'primary'" />
+      }
+      <span>{{ label() }}</span>
+    </button>
+  `, isInline: true, styles: [":host{display:inline-flex;font-family:var(--loro-font-brand)}.loro-filter-chip{display:inline-flex;align-items:center;gap:.45rem;min-height:2.55rem;padding:.55rem 1rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-pill);background:var(--loro-surface);color:var(--loro-muted-strong);font:inherit;font-size:.9rem;font-weight:850;cursor:pointer;white-space:nowrap}.loro-filter-chip--active{border-color:transparent;background:linear-gradient(135deg,var(--loro-primary-500),var(--loro-primary-700));color:#fff;box-shadow:var(--loro-shadow-button)}@media(max-width:640px){.loro-filter-chip{gap:.4rem;min-height:2.3rem;padding:.48rem .78rem;font-size:clamp(.78rem,2.9vw,.9rem)}}@media(max-width:430px){.loro-filter-chip{gap:.34rem;min-height:2.2rem;padding:.42rem .7rem;font-size:clamp(.74rem,2.8vw,.84rem)}}\n"], dependencies: [{ kind: "component", type: LoroIcon$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroFilterChip, decorators: [{
+            type: Component,
+            args: [{ selector: 'loro-filter-chip', standalone: true, imports: [LoroIcon$1], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <button type="button" class="loro-filter-chip" [class.loro-filter-chip--active]="active()" (click)="selected.emit(value())">
+      @if (icon()) {
+        <loro-icon [name]="icon()!" [size]="20" [alt]="label()" [color]="active() ? 'inverse' : 'primary'" />
+      }
+      <span>{{ label() }}</span>
+    </button>
+  `, styles: [":host{display:inline-flex;font-family:var(--loro-font-brand)}.loro-filter-chip{display:inline-flex;align-items:center;gap:.45rem;min-height:2.55rem;padding:.55rem 1rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-pill);background:var(--loro-surface);color:var(--loro-muted-strong);font:inherit;font-size:.9rem;font-weight:850;cursor:pointer;white-space:nowrap}.loro-filter-chip--active{border-color:transparent;background:linear-gradient(135deg,var(--loro-primary-500),var(--loro-primary-700));color:#fff;box-shadow:var(--loro-shadow-button)}@media(max-width:640px){.loro-filter-chip{gap:.4rem;min-height:2.3rem;padding:.48rem .78rem;font-size:clamp(.78rem,2.9vw,.9rem)}}@media(max-width:430px){.loro-filter-chip{gap:.34rem;min-height:2.2rem;padding:.42rem .7rem;font-size:clamp(.74rem,2.8vw,.84rem)}}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
+
+let nextLoroInputId = 0;
+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(0, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    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') {
+      <span
+        class="loro-input loro-input--stepper-field"
+        [class.loro-input--error]="hasError()"
+        [class.loro-input--success]="hasSuccess()">
+        @if (label()) {
+          <span class="loro-input__label">{{ label() }}</span>
+        }
+        <span
+          class="loro-input--stepper"
+          [class.loro-input--stepper-kg]="normalizedUnit() === 'kg'"
+          [class.loro-input--stepper-ud]="normalizedUnit() === 'ud'"
+          role="group"
+          [attr.aria-label]="label() || 'Cantidad'"
+        >
+          <button type="button" aria-label="Restar" [disabled]="disabled()" (click)="adjust(-step())">-</button>
+          <span class="loro-input__stepper-value">
+            <input
+              #control
+              [attr.inputmode]="normalizedUnit() === 'kg' ? 'decimal' : 'numeric'"
+              [attr.size]="stepperInputSize()"
+              [attr.maxlength]="stepperInputMaxLength()"
+              [attr.max]="max()"
+              [attr.min]="min()"
+              [value]="value()"
+              [disabled]="disabled()"
+              [readonly]="readonly()"
+              [required]="required()"
+              [attr.aria-label]="label() || 'Cantidad'"
+              [attr.aria-invalid]="hasError() ? 'true' : null"
+              [attr.aria-describedby]="hasError() && errorText() ? errorId : null"
+              (keydown.enter)="$any($event.target).blur()"
+              (input)="sanitizeStepperInput($event)"
+              (blur)="markAsTouched(); normalizeValue(($any($event.target).value ?? '').toString())"
+            />
+            <span>{{ normalizedUnit() }}</span>
+          </span>
+          <button type="button" aria-label="Sumar" [disabled]="disabled()" (click)="adjust(step())">+</button>
+        </span>
+        @if (hasError() && errorText()) {
+          <span class="loro-input__error" [id]="errorId">
+            <loro-icon name="shield-alert" [size]="16" color="danger" [decorative]="true" />
+            <span>{{ errorText() }}</span>
+          </span>
+        } @else if (hasLoading() && helperText()) {
+          <span class="loro-input__loading" aria-live="polite">
+            <span>{{ helperText() }}</span>
+          </span>
+        } @else if (hasSuccess() && helperText()) {
+          <span class="loro-input__success">
+            <loro-icon name="check" [size]="16" color="success" [decorative]="true" />
+            <span>{{ helperText() }}</span>
+          </span>
+        } @else if (helperText()) {
+          <span class="loro-input__helper">{{ helperText() }}</span>
+        }
+      </span>
+    } @else {
+      <label
+        class="loro-input"
+        [class.loro-input--has-icon]="icon() || variant() === 'search'"
+        [class.loro-input--error]="hasError()"
+        [class.loro-input--success]="hasSuccess()"
+        [class.loro-input--loading]="hasLoading()"
+      >
+        @if (label()) {
+          <span class="loro-input__label">{{ label() }}</span>
+        }
+        <span class="loro-input__control">
+          @if (icon() || variant() === 'search') {
+            <loro-icon
+              [name]="icon() || 'search'"
+              [size]="iconSize()"
+              [alt]="label() || placeholder()"
+              [color]="resolvedLeadingIconColor()"
+            />
+          }
+          <input
+            #control
+            [type]="type()"
+            [attr.name]="name() || null"
+            [placeholder]="placeholder()"
+            [value]="value()"
+            [disabled]="disabled()"
+            [readonly]="readonly()"
+            [required]="required()"
+            [attr.autocomplete]="autocomplete() || null"
+            [attr.inputmode]="inputmode() || null"
+            [attr.aria-invalid]="hasError() ? 'true' : null"
+            [attr.aria-describedby]="hasError() && errorText() ? errorId : null"
+            (input)="updateValue(($any($event.target).value ?? '').toString())"
+            (blur)="markAsTouched()"
+          />
+          @if (trailingIcon()) {
+            <button
+              type="button"
+              class="loro-input__trailing-button"
+              [attr.aria-label]="trailingAriaLabel() || null"
+              (click)="trailingClick.emit()"
+            >
+              <loro-icon
+                [name]="trailingIcon()!"
+                [size]="trailingIconSize()"
+                alt=""
+                [decorative]="true"
+                [color]="resolvedTrailingIconColor()"
+              />
+            </button>
+          }
+        </span>
+        @if (hasError() && errorText()) {
+          <span class="loro-input__error" [id]="errorId">
+            <loro-icon name="shield-alert" [size]="16" color="danger" [decorative]="true" />
+            <span>{{ errorText() }}</span>
+          </span>
+        } @else if (hasLoading() && helperText()) {
+          <span class="loro-input__loading" aria-live="polite">
+            <span class="loro-input__loader" aria-hidden="true"></span>
+            <span>{{ helperText() }}</span>
+          </span>
+        } @else if (hasSuccess() && helperText()) {
+          <span class="loro-input__success">
+            <loro-icon name="check" [size]="16" color="success" [decorative]="true" />
+            <span>{{ helperText() }}</span>
+          </span>
+        } @else if (helperText()) {
+          <span class="loro-input__helper">{{ helperText() }}</span>
+        }
+      </label>
+    }
+  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-input{display:grid;gap:.55rem;color:var(--loro-text)}.loro-input__label{color:var(--loro-muted-strong);font-size:var(--loro-input-label-font-size, .95rem);font-weight:var(--loro-input-label-font-weight, 800);line-height:var(--loro-input-label-line-height, 1.2)}.loro-input__control{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;min-height:var(--loro-input-control-min-height, 3.4rem);padding:var(--loro-input-control-padding, 0 1rem);border:1px solid var(--loro-input-control-border-color, var(--loro-border-subtle));border-radius:var(--loro-input-control-radius, var(--loro-radius-input));background:var(--loro-input-control-background, var(--loro-surface));box-shadow:var(--loro-input-control-shadow, none);transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}.loro-input--has-icon .loro-input__control{grid-template-columns:auto minmax(0,1fr);gap:var(--loro-input-control-gap, .8rem)}.loro-input--has-icon:has(.loro-input__trailing-button) .loro-input__control{grid-template-columns:auto minmax(0,1fr) auto}.loro-input__control input{font-size:var(--loro-input-field-font-size, 1rem);line-height:var(--loro-input-field-line-height, 1.2)}input{width:100%;border:0;outline:0;background:transparent;color:var(--loro-text-strong);font:inherit;font-weight:var(--loro-input-field-font-weight, 700)}input::placeholder{color:var(--loro-muted);font-weight:var(--loro-input-placeholder-font-weight, 600);opacity:var(--loro-input-placeholder-opacity, 1)}.loro-input__trailing-button{display:grid;width:2.5rem;height:2.5rem;place-items:center;margin-right:-.55rem;border:0;border-radius:50%;color:var(--loro-muted);background:transparent;cursor:pointer;transition:background .15s ease,color .15s ease}.loro-input__trailing-button:hover,.loro-input__trailing-button:focus-visible{color:var(--loro-primary-700);background:color-mix(in srgb,var(--loro-primary-500) 10%,transparent);outline:none}.loro-input--error .loro-input__control{border-color:color-mix(in srgb,var(--loro-danger-text) 28%,var(--loro-border-subtle));background:var(--loro-input-control-background, var(--loro-surface));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-danger-text) 7%,transparent)}.loro-input--error .loro-input--stepper{border-color:color-mix(in srgb,var(--loro-danger-text) 28%,var(--loro-border-subtle));background:var(--loro-surface);box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-danger-text) 7%,transparent)}.loro-input--error .loro-input__label{color:color-mix(in srgb,var(--loro-danger-text) 68%,var(--loro-muted-strong))}.loro-input--success .loro-input__control{border-color:color-mix(in srgb,var(--loro-success, #1f9d55) 34%,var(--loro-border-subtle));background:var(--loro-input-control-background, var(--loro-surface));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-success, #1f9d55) 10%,transparent)}.loro-input--success .loro-input--stepper{border-color:color-mix(in srgb,var(--loro-success, #1f9d55) 34%,var(--loro-border-subtle));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-success, #1f9d55) 10%,transparent)}.loro-input--success .loro-input__label{color:color-mix(in srgb,var(--loro-success, #1f9d55) 72%,var(--loro-muted-strong))}.loro-input--loading .loro-input__control{border-color:color-mix(in srgb,var(--loro-primary-500) 22%,var(--loro-border-subtle));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-primary-500) 8%,transparent)}.loro-input__control:focus-within{border-color:var(--loro-input-control-focus-border-color, var(--loro-primary-500));box-shadow:var(--loro-input-control-focus-shadow, 0 0 0 3px color-mix(in srgb, var(--loro-primary-500) 16%, transparent))}.loro-input__error{display:inline-grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.4rem;color:var(--loro-danger-text);font-size:var(--loro-input-support-font-size, .82rem);font-weight:var(--loro-input-support-font-weight, 750);line-height:var(--loro-input-support-line-height, 1.35)}.loro-input__helper{display:inline-block;color:var(--loro-muted);font-size:var(--loro-input-support-font-size, .82rem);font-weight:var(--loro-input-support-font-weight, 750);line-height:var(--loro-input-support-line-height, 1.35)}.loro-input__success{display:inline-grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.4rem;color:var(--loro-success, #1f9d55);font-size:var(--loro-input-support-font-size, .82rem);font-weight:var(--loro-input-support-font-weight, 750);line-height:var(--loro-input-support-line-height, 1.35)}.loro-input__loading{display:flex;align-items:center;gap:.35rem;color:var(--loro-primary-700);font-size:var(--loro-input-support-font-size, .82rem);font-weight:var(--loro-input-support-font-weight, 750);line-height:var(--loro-input-support-line-height, 1.35)}.loro-input__loader{width:1rem;height:1rem;border:2px solid color-mix(in srgb,var(--loro-primary-500) 18%,transparent);border-top-color:var(--loro-primary-500);border-radius:50%;animation:loro-input-spin .75s linear infinite}.loro-input--stepper{display:grid;grid-template-columns:1.85rem minmax(3.9rem,1fr) 1.85rem;align-items:center;min-width:0;min-height:2.25rem;overflow:hidden;border:1px solid color-mix(in srgb,var(--loro-primary-500) 12%,var(--loro-border-subtle) 88%);border-radius:.65rem;background:var(--loro-surface);color:var(--loro-text-strong);font-weight:900;text-align:center;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--loro-surface) 70%,transparent)}.loro-input--stepper button{height:100%;min-width:0;border:0;background:transparent;color:var(--loro-primary-700);font:inherit;font-weight:950;line-height:1;cursor:pointer;transition:background .15s ease,color .15s ease}.loro-input--stepper button:active{background:color-mix(in srgb,var(--loro-primary-500) 10%,var(--loro-surface) 90%)}.loro-input__stepper-value{display:inline-grid;grid-template-columns:minmax(1.55rem,max-content) auto;align-items:center;justify-content:center;gap:.18rem;min-width:0;overflow:hidden;padding-inline:.1rem;white-space:nowrap}.loro-input--stepper input{width:auto;min-width:1.55rem;max-width:2.75rem;overflow:hidden;padding:0;text-align:right;text-overflow:clip;white-space:nowrap;font-weight:900;font-size:clamp(.85rem,2.4vw,.98rem);letter-spacing:-.02em}.loro-input__stepper-value span{min-width:1.05rem;color:var(--loro-text-strong);font-size:clamp(.8rem,2.2vw,.92rem);font-weight:950;line-height:1}.loro-input--stepper-kg input{min-width:2.1rem;max-width:2.35rem}@media(max-width:1023.88px){.loro-input__control input{font-size:16px}.loro-input--stepper{grid-template-columns:1.65rem minmax(3.65rem,1fr) 1.65rem;min-height:2.2rem}.loro-input__stepper-value{gap:.16rem}}@keyframes loro-input-spin{to{transform:rotate(360deg)}}@keyframes loro-input-dot-blink{0%,20%{opacity:.25}50%{opacity:1}to{opacity:.25}}\n"], dependencies: [{ kind: "component", type: LoroIcon$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'loro-input', standalone: true, imports: [LoroIcon$1], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (variant() === 'stepper') {
+      <span
+        class="loro-input loro-input--stepper-field"
+        [class.loro-input--error]="hasError()"
+        [class.loro-input--success]="hasSuccess()">
+        @if (label()) {
+          <span class="loro-input__label">{{ label() }}</span>
+        }
+        <span
+          class="loro-input--stepper"
+          [class.loro-input--stepper-kg]="normalizedUnit() === 'kg'"
+          [class.loro-input--stepper-ud]="normalizedUnit() === 'ud'"
+          role="group"
+          [attr.aria-label]="label() || 'Cantidad'"
+        >
+          <button type="button" aria-label="Restar" [disabled]="disabled()" (click)="adjust(-step())">-</button>
+          <span class="loro-input__stepper-value">
+            <input
+              #control
+              [attr.inputmode]="normalizedUnit() === 'kg' ? 'decimal' : 'numeric'"
+              [attr.size]="stepperInputSize()"
+              [attr.maxlength]="stepperInputMaxLength()"
+              [attr.max]="max()"
+              [attr.min]="min()"
+              [value]="value()"
+              [disabled]="disabled()"
+              [readonly]="readonly()"
+              [required]="required()"
+              [attr.aria-label]="label() || 'Cantidad'"
+              [attr.aria-invalid]="hasError() ? 'true' : null"
+              [attr.aria-describedby]="hasError() && errorText() ? errorId : null"
+              (keydown.enter)="$any($event.target).blur()"
+              (input)="sanitizeStepperInput($event)"
+              (blur)="markAsTouched(); normalizeValue(($any($event.target).value ?? '').toString())"
+            />
+            <span>{{ normalizedUnit() }}</span>
+          </span>
+          <button type="button" aria-label="Sumar" [disabled]="disabled()" (click)="adjust(step())">+</button>
+        </span>
+        @if (hasError() && errorText()) {
+          <span class="loro-input__error" [id]="errorId">
+            <loro-icon name="shield-alert" [size]="16" color="danger" [decorative]="true" />
+            <span>{{ errorText() }}</span>
+          </span>
+        } @else if (hasLoading() && helperText()) {
+          <span class="loro-input__loading" aria-live="polite">
+            <span>{{ helperText() }}</span>
+          </span>
+        } @else if (hasSuccess() && helperText()) {
+          <span class="loro-input__success">
+            <loro-icon name="check" [size]="16" color="success" [decorative]="true" />
+            <span>{{ helperText() }}</span>
+          </span>
+        } @else if (helperText()) {
+          <span class="loro-input__helper">{{ helperText() }}</span>
+        }
+      </span>
+    } @else {
+      <label
+        class="loro-input"
+        [class.loro-input--has-icon]="icon() || variant() === 'search'"
+        [class.loro-input--error]="hasError()"
+        [class.loro-input--success]="hasSuccess()"
+        [class.loro-input--loading]="hasLoading()"
+      >
+        @if (label()) {
+          <span class="loro-input__label">{{ label() }}</span>
+        }
+        <span class="loro-input__control">
+          @if (icon() || variant() === 'search') {
+            <loro-icon
+              [name]="icon() || 'search'"
+              [size]="iconSize()"
+              [alt]="label() || placeholder()"
+              [color]="resolvedLeadingIconColor()"
+            />
+          }
+          <input
+            #control
+            [type]="type()"
+            [attr.name]="name() || null"
+            [placeholder]="placeholder()"
+            [value]="value()"
+            [disabled]="disabled()"
+            [readonly]="readonly()"
+            [required]="required()"
+            [attr.autocomplete]="autocomplete() || null"
+            [attr.inputmode]="inputmode() || null"
+            [attr.aria-invalid]="hasError() ? 'true' : null"
+            [attr.aria-describedby]="hasError() && errorText() ? errorId : null"
+            (input)="updateValue(($any($event.target).value ?? '').toString())"
+            (blur)="markAsTouched()"
+          />
+          @if (trailingIcon()) {
+            <button
+              type="button"
+              class="loro-input__trailing-button"
+              [attr.aria-label]="trailingAriaLabel() || null"
+              (click)="trailingClick.emit()"
+            >
+              <loro-icon
+                [name]="trailingIcon()!"
+                [size]="trailingIconSize()"
+                alt=""
+                [decorative]="true"
+                [color]="resolvedTrailingIconColor()"
+              />
+            </button>
+          }
+        </span>
+        @if (hasError() && errorText()) {
+          <span class="loro-input__error" [id]="errorId">
+            <loro-icon name="shield-alert" [size]="16" color="danger" [decorative]="true" />
+            <span>{{ errorText() }}</span>
+          </span>
+        } @else if (hasLoading() && helperText()) {
+          <span class="loro-input__loading" aria-live="polite">
+            <span class="loro-input__loader" aria-hidden="true"></span>
+            <span>{{ helperText() }}</span>
+          </span>
+        } @else if (hasSuccess() && helperText()) {
+          <span class="loro-input__success">
+            <loro-icon name="check" [size]="16" color="success" [decorative]="true" />
+            <span>{{ helperText() }}</span>
+          </span>
+        } @else if (helperText()) {
+          <span class="loro-input__helper">{{ helperText() }}</span>
+        }
+      </label>
+    }
+  `, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-input{display:grid;gap:.55rem;color:var(--loro-text)}.loro-input__label{color:var(--loro-muted-strong);font-size:var(--loro-input-label-font-size, .95rem);font-weight:var(--loro-input-label-font-weight, 800);line-height:var(--loro-input-label-line-height, 1.2)}.loro-input__control{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;min-height:var(--loro-input-control-min-height, 3.4rem);padding:var(--loro-input-control-padding, 0 1rem);border:1px solid var(--loro-input-control-border-color, var(--loro-border-subtle));border-radius:var(--loro-input-control-radius, var(--loro-radius-input));background:var(--loro-input-control-background, var(--loro-surface));box-shadow:var(--loro-input-control-shadow, none);transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}.loro-input--has-icon .loro-input__control{grid-template-columns:auto minmax(0,1fr);gap:var(--loro-input-control-gap, .8rem)}.loro-input--has-icon:has(.loro-input__trailing-button) .loro-input__control{grid-template-columns:auto minmax(0,1fr) auto}.loro-input__control input{font-size:var(--loro-input-field-font-size, 1rem);line-height:var(--loro-input-field-line-height, 1.2)}input{width:100%;border:0;outline:0;background:transparent;color:var(--loro-text-strong);font:inherit;font-weight:var(--loro-input-field-font-weight, 700)}input::placeholder{color:var(--loro-muted);font-weight:var(--loro-input-placeholder-font-weight, 600);opacity:var(--loro-input-placeholder-opacity, 1)}.loro-input__trailing-button{display:grid;width:2.5rem;height:2.5rem;place-items:center;margin-right:-.55rem;border:0;border-radius:50%;color:var(--loro-muted);background:transparent;cursor:pointer;transition:background .15s ease,color .15s ease}.loro-input__trailing-button:hover,.loro-input__trailing-button:focus-visible{color:var(--loro-primary-700);background:color-mix(in srgb,var(--loro-primary-500) 10%,transparent);outline:none}.loro-input--error .loro-input__control{border-color:color-mix(in srgb,var(--loro-danger-text) 28%,var(--loro-border-subtle));background:var(--loro-input-control-background, var(--loro-surface));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-danger-text) 7%,transparent)}.loro-input--error .loro-input--stepper{border-color:color-mix(in srgb,var(--loro-danger-text) 28%,var(--loro-border-subtle));background:var(--loro-surface);box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-danger-text) 7%,transparent)}.loro-input--error .loro-input__label{color:color-mix(in srgb,var(--loro-danger-text) 68%,var(--loro-muted-strong))}.loro-input--success .loro-input__control{border-color:color-mix(in srgb,var(--loro-success, #1f9d55) 34%,var(--loro-border-subtle));background:var(--loro-input-control-background, var(--loro-surface));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-success, #1f9d55) 10%,transparent)}.loro-input--success .loro-input--stepper{border-color:color-mix(in srgb,var(--loro-success, #1f9d55) 34%,var(--loro-border-subtle));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-success, #1f9d55) 10%,transparent)}.loro-input--success .loro-input__label{color:color-mix(in srgb,var(--loro-success, #1f9d55) 72%,var(--loro-muted-strong))}.loro-input--loading .loro-input__control{border-color:color-mix(in srgb,var(--loro-primary-500) 22%,var(--loro-border-subtle));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-primary-500) 8%,transparent)}.loro-input__control:focus-within{border-color:var(--loro-input-control-focus-border-color, var(--loro-primary-500));box-shadow:var(--loro-input-control-focus-shadow, 0 0 0 3px color-mix(in srgb, var(--loro-primary-500) 16%, transparent))}.loro-input__error{display:inline-grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.4rem;color:var(--loro-danger-text);font-size:var(--loro-input-support-font-size, .82rem);font-weight:var(--loro-input-support-font-weight, 750);line-height:var(--loro-input-support-line-height, 1.35)}.loro-input__helper{display:inline-block;color:var(--loro-muted);font-size:var(--loro-input-support-font-size, .82rem);font-weight:var(--loro-input-support-font-weight, 750);line-height:var(--loro-input-support-line-height, 1.35)}.loro-input__success{display:inline-grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.4rem;color:var(--loro-success, #1f9d55);font-size:var(--loro-input-support-font-size, .82rem);font-weight:var(--loro-input-support-font-weight, 750);line-height:var(--loro-input-support-line-height, 1.35)}.loro-input__loading{display:flex;align-items:center;gap:.35rem;color:var(--loro-primary-700);font-size:var(--loro-input-support-font-size, .82rem);font-weight:var(--loro-input-support-font-weight, 750);line-height:var(--loro-input-support-line-height, 1.35)}.loro-input__loader{width:1rem;height:1rem;border:2px solid color-mix(in srgb,var(--loro-primary-500) 18%,transparent);border-top-color:var(--loro-primary-500);border-radius:50%;animation:loro-input-spin .75s linear infinite}.loro-input--stepper{display:grid;grid-template-columns:1.85rem minmax(3.9rem,1fr) 1.85rem;align-items:center;min-width:0;min-height:2.25rem;overflow:hidden;border:1px solid color-mix(in srgb,var(--loro-primary-500) 12%,var(--loro-border-subtle) 88%);border-radius:.65rem;background:var(--loro-surface);color:var(--loro-text-strong);font-weight:900;text-align:center;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--loro-surface) 70%,transparent)}.loro-input--stepper button{height:100%;min-width:0;border:0;background:transparent;color:var(--loro-primary-700);font:inherit;font-weight:950;line-height:1;cursor:pointer;transition:background .15s ease,color .15s ease}.loro-input--stepper button:active{background:color-mix(in srgb,var(--loro-primary-500) 10%,var(--loro-surface) 90%)}.loro-input__stepper-value{display:inline-grid;grid-template-columns:minmax(1.55rem,max-content) auto;align-items:center;justify-content:center;gap:.18rem;min-width:0;overflow:hidden;padding-inline:.1rem;white-space:nowrap}.loro-input--stepper input{width:auto;min-width:1.55rem;max-width:2.75rem;overflow:hidden;padding:0;text-align:right;text-overflow:clip;white-space:nowrap;font-weight:900;font-size:clamp(.85rem,2.4vw,.98rem);letter-spacing:-.02em}.loro-input__stepper-value span{min-width:1.05rem;color:var(--loro-text-strong);font-size:clamp(.8rem,2.2vw,.92rem);font-weight:950;line-height:1}.loro-input--stepper-kg input{min-width:2.1rem;max-width:2.35rem}@media(max-width:1023.88px){.loro-input__control input{font-size:16px}.loro-input--stepper{grid-template-columns:1.65rem minmax(3.65rem,1fr) 1.65rem;min-height:2.2rem}.loro-input__stepper-value{gap:.16rem}}@keyframes loro-input-spin{to{transform:rotate(360deg)}}@keyframes loro-input-dot-blink{0%,20%{opacity:.25}50%{opacity:1}to{opacity:.25}}\n"] }]
+        }], 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 }] }] } });
+
+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
+      type="button"
+      class="loro-radio"
+      [class.loro-radio--row]="variant() === 'row'"
+      [class.loro-radio--checked]="checked()"
+      [attr.aria-pressed]="checked()"
+      (click)="selected.emit(value())">
+      @if (variant() !== 'row') {
+        <span class="loro-radio__mark"></span>
+      }
+      <span class="loro-radio__copy">
+        <span class="loro-radio__label">{{ label() }}</span>
+        @if (description()) {
+          <span class="loro-radio__description">{{ description() }}</span>
+        }
+      </span>
+      @if (variant() === 'row') {
+        <span class="loro-radio__mark"></span>
+      }
+    </button>
+  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-radio{display:inline-grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.85rem;width:100%;min-height:3rem;border:0;background:transparent;color:var(--loro-text-strong);font:inherit;text-align:left;cursor:pointer}.loro-radio--row{grid-template-columns:minmax(0,1fr) auto;min-height:4.35rem;padding:0 1rem;border:1px solid var(--loro-border-subtle);background:var(--loro-surface)}.loro-radio__mark{position:relative;width:1.35rem;height:1.35rem;border:2px solid var(--loro-muted);border-radius:50%}.loro-radio__mark:after{position:absolute;inset:.24rem;border-radius:50%;background:var(--loro-primary-500);opacity:0;content:\"\"}.loro-radio--checked .loro-radio__mark{border-color:var(--loro-primary-500)}.loro-radio--checked .loro-radio__mark:after{opacity:1}.loro-radio__copy{display:grid;gap:.18rem;min-width:0}.loro-radio__label{font-size:1rem;font-weight:900;line-height:1.2}.loro-radio__description{color:var(--loro-muted);font-size:.88rem;font-weight:600;line-height:1.35}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroRadio, decorators: [{
+            type: Component,
+            args: [{ selector: 'loro-radio', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <button
+      type="button"
+      class="loro-radio"
+      [class.loro-radio--row]="variant() === 'row'"
+      [class.loro-radio--checked]="checked()"
+      [attr.aria-pressed]="checked()"
+      (click)="selected.emit(value())">
+      @if (variant() !== 'row') {
+        <span class="loro-radio__mark"></span>
+      }
+      <span class="loro-radio__copy">
+        <span class="loro-radio__label">{{ label() }}</span>
+        @if (description()) {
+          <span class="loro-radio__description">{{ description() }}</span>
+        }
+      </span>
+      @if (variant() === 'row') {
+        <span class="loro-radio__mark"></span>
+      }
+    </button>
+  `, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-radio{display:inline-grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.85rem;width:100%;min-height:3rem;border:0;background:transparent;color:var(--loro-text-strong);font:inherit;text-align:left;cursor:pointer}.loro-radio--row{grid-template-columns:minmax(0,1fr) auto;min-height:4.35rem;padding:0 1rem;border:1px solid var(--loro-border-subtle);background:var(--loro-surface)}.loro-radio__mark{position:relative;width:1.35rem;height:1.35rem;border:2px solid var(--loro-muted);border-radius:50%}.loro-radio__mark:after{position:absolute;inset:.24rem;border-radius:50%;background:var(--loro-primary-500);opacity:0;content:\"\"}.loro-radio--checked .loro-radio__mark{border-color:var(--loro-primary-500)}.loro-radio--checked .loro-radio__mark:after{opacity:1}.loro-radio__copy{display:grid;gap:.18rem;min-width:0}.loro-radio__label{font-size:1rem;font-weight:900;line-height:1.2}.loro-radio__description{color:var(--loro-muted);font-size:.88rem;font-weight:600;line-height:1.35}\n"] }]
+        }], 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 */ []));
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroSegmentedControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroSegmentedControl, isStandalone: true, selector: "loro-segmented-control", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { properties: { "style.--loro-segmented-count": "options().length" } }, ngImport: i0, template: `
+    <div class="loro-segmented-control" role="tablist">
+      @for (option of options(); track option.value) {
+        <button
+          type="button"
+          role="tab"
+          [attr.aria-selected]="value() === option.value"
+          [class.loro-segmented-control__button--active]="value() === option.value"
+          class="loro-segmented-control__button"
+          (click)="valueChange.emit(option.value)">
+          {{ option.label }}
+        </button>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-segmented-control{display:grid;grid-template-columns:repeat(var(--loro-segmented-count, 2),minmax(0,1fr));min-height:3.15rem;padding:.18rem;border:1px solid var(--loro-border-subtle);border-radius:.75rem;background:var(--loro-surface-muted);box-shadow:var(--loro-shadow-soft)}.loro-segmented-control__button{border:0;border-radius:.58rem;background:transparent;color:var(--loro-muted-strong);font:inherit;font-size:clamp(.95rem,3vw,1rem);font-weight:850;line-height:1.15;text-wrap:balance;cursor:pointer}.loro-segmented-control__button--active{background:var(--loro-surface);color:var(--loro-primary-700);box-shadow:0 6px 18px #22194914}@media(max-width:640px){.loro-segmented-control{min-height:3rem}.loro-segmented-control__button{padding-inline:.6rem}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroSegmentedControl, decorators: [{
+            type: Component,
+            args: [{ selector: 'loro-segmented-control', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="loro-segmented-control" role="tablist">
+      @for (option of options(); track option.value) {
+        <button
+          type="button"
+          role="tab"
+          [attr.aria-selected]="value() === option.value"
+          [class.loro-segmented-control__button--active]="value() === option.value"
+          class="loro-segmented-control__button"
+          (click)="valueChange.emit(option.value)">
+          {{ option.label }}
+        </button>
+      }
+    </div>
+  `, host: {
+                        '[style.--loro-segmented-count]': 'options().length'
+                    }, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-segmented-control{display:grid;grid-template-columns:repeat(var(--loro-segmented-count, 2),minmax(0,1fr));min-height:3.15rem;padding:.18rem;border:1px solid var(--loro-border-subtle);border-radius:.75rem;background:var(--loro-surface-muted);box-shadow:var(--loro-shadow-soft)}.loro-segmented-control__button{border:0;border-radius:.58rem;background:transparent;color:var(--loro-muted-strong);font:inherit;font-size:clamp(.95rem,3vw,1rem);font-weight:850;line-height:1.15;text-wrap:balance;cursor:pointer}.loro-segmented-control__button--active{background:var(--loro-surface);color:var(--loro-primary-700);box-shadow:0 6px 18px #22194914}@media(max-width:640px){.loro-segmented-control{min-height:3rem}.loro-segmented-control__button{padding-inline:.6rem}}\n"] }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+
+class LoroSelect {
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    subtitle = input('', ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
+    meta = input('', ...(ngDevMode ? [{ debugName: "meta" }] : /* istanbul ignore next */ []));
+    icon = input('phone', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    badge = input('', ...(ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []));
+    status = input('', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    actionLabel = input('', ...(ngDevMode ? [{ debugName: "actionLabel" }] : /* istanbul ignore next */ []));
+    action = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroSelect, isStandalone: true, selector: "loro-select", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, ngImport: i0, template: `
+    <article class="loro-select" [class.loro-select--selected]="selected()">
+      <span class="loro-select__icon">
+        <loro-icon [name]="icon()" [size]="44" [alt]="title()" color="primary-deep" />
+      </span>
+      <div class="loro-select__copy">
+        <h3>{{ title() }} @if (badge()) {<loro-badge [label]="badge()" variant="info" />}</h3>
+        <p>{{ subtitle() }}</p>
+        <small>{{ meta() }}</small>
+      </div>
+      <div class="loro-select__side">
+        @if (status()) {
+          <span class="loro-select__status">{{ status() }}</span>
+        }
+        @if (actionLabel()) {
+          <loro-button [label]="actionLabel()" variant="outline" (buttonClick)="action.emit()" />
+        }
+      </div>
+    </article>
+  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-select{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1.25rem;padding:1rem;border-top:1px solid var(--loro-border-subtle);background:transparent}.loro-select--selected{border:1px solid rgba(108,60,255,.28);border-radius:1rem;background:#6c3cff0a}.loro-select__icon{display:grid;width:5.2rem;height:5.2rem;place-items:center;border:1px solid var(--loro-border-subtle);border-radius:1rem;background:var(--loro-surface-muted)}h3,p,small{margin:0}h3{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;color:var(--loro-text-strong);font-size:1.15rem;font-weight:900}p{margin-top:.35rem;color:var(--loro-muted-strong);font-weight:700}small,.loro-select__status{color:var(--loro-muted);font-weight:700}.loro-select__side{display:flex;align-items:center;justify-content:flex-end;gap:1rem}@media(max-width:680px){.loro-select{grid-template-columns:5rem minmax(0,1fr);border:1px solid var(--loro-border-subtle);border-radius:1rem}.loro-select__side{grid-column:2;justify-content:flex-start}}\n"], dependencies: [{ kind: "component", type: LoroBadge$1, selector: "loro-badge", inputs: ["label", "variant"] }, { kind: "component", type: LoroButton$1, selector: "loro-button", inputs: ["label", "text", "icon", "iconContent", "iconMode", "iconSize", "iconButtonSize", "iconColor", "socialMobileCompact", "selected", "variant", "typeButton", "color", "size", "fullWidth", "buttonWidth", "disabled", "loading", "type", "formId", "ariaLabel", "ariaDescription"], outputs: ["buttonClick", "change", "sanChange"] }, { kind: "component", type: LoroIcon$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroSelect, decorators: [{
+            type: Component,
+            args: [{ selector: 'loro-select', standalone: true, imports: [LoroBadge$1, LoroButton$1, LoroIcon$1], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <article class="loro-select" [class.loro-select--selected]="selected()">
+      <span class="loro-select__icon">
+        <loro-icon [name]="icon()" [size]="44" [alt]="title()" color="primary-deep" />
+      </span>
+      <div class="loro-select__copy">
+        <h3>{{ title() }} @if (badge()) {<loro-badge [label]="badge()" variant="info" />}</h3>
+        <p>{{ subtitle() }}</p>
+        <small>{{ meta() }}</small>
+      </div>
+      <div class="loro-select__side">
+        @if (status()) {
+          <span class="loro-select__status">{{ status() }}</span>
+        }
+        @if (actionLabel()) {
+          <loro-button [label]="actionLabel()" variant="outline" (buttonClick)="action.emit()" />
+        }
+      </div>
+    </article>
+  `, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-select{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1.25rem;padding:1rem;border-top:1px solid var(--loro-border-subtle);background:transparent}.loro-select--selected{border:1px solid rgba(108,60,255,.28);border-radius:1rem;background:#6c3cff0a}.loro-select__icon{display:grid;width:5.2rem;height:5.2rem;place-items:center;border:1px solid var(--loro-border-subtle);border-radius:1rem;background:var(--loro-surface-muted)}h3,p,small{margin:0}h3{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;color:var(--loro-text-strong);font-size:1.15rem;font-weight:900}p{margin-top:.35rem;color:var(--loro-muted-strong);font-weight:700}small,.loro-select__status{color:var(--loro-muted);font-weight:700}.loro-select__side{display:flex;align-items:center;justify-content:flex-end;gap:1rem}@media(max-width:680px){.loro-select{grid-template-columns:5rem minmax(0,1fr);border:1px solid var(--loro-border-subtle);border-radius:1rem}.loro-select__side{grid-column:2;justify-content:flex-start}}\n"] }]
+        }], 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"] }] } });
+
+class LoroTextArea {
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    maxLength = input(null, ...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroTextArea, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroTextArea, isStandalone: true, selector: "loro-text-area", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
+    <label class="loro-text-area">
+      @if (label()) {
+        <span class="loro-text-area__label">{{ label() }}</span>
+      }
+      <span class="loro-text-area__control">
+        <textarea
+          [placeholder]="placeholder()"
+          [value]="value()"
+          [attr.maxlength]="maxLength()"
+          (input)="valueChange.emit(($any($event.target).value ?? '').toString())"></textarea>
+        @if (maxLength()) {
+          <span class="loro-text-area__counter">{{ value().length }}/{{ maxLength() }}</span>
+        }
+      </span>
+    </label>
+  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-text-area{display:grid;gap:.55rem}.loro-text-area__label{color:var(--loro-muted-strong);font-size:.95rem;font-weight:800}.loro-text-area__control{display:grid;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-input);background:var(--loro-surface);overflow:hidden}textarea{width:100%;min-height:8rem;resize:vertical;border:0;outline:0;padding:1rem;background:transparent;color:var(--loro-text-strong);font:inherit;font-weight:650}textarea::placeholder{color:var(--loro-muted)}.loro-text-area__counter{justify-self:end;padding:0 1rem .75rem;color:var(--loro-muted);font-size:.85rem;font-weight:700}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroTextArea, decorators: [{
+            type: Component,
+            args: [{ selector: 'loro-text-area', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <label class="loro-text-area">
+      @if (label()) {
+        <span class="loro-text-area__label">{{ label() }}</span>
+      }
+      <span class="loro-text-area__control">
+        <textarea
+          [placeholder]="placeholder()"
+          [value]="value()"
+          [attr.maxlength]="maxLength()"
+          (input)="valueChange.emit(($any($event.target).value ?? '').toString())"></textarea>
+        @if (maxLength()) {
+          <span class="loro-text-area__counter">{{ value().length }}/{{ maxLength() }}</span>
+        }
+      </span>
+    </label>
+  `, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-text-area{display:grid;gap:.55rem}.loro-text-area__label{color:var(--loro-muted-strong);font-size:.95rem;font-weight:800}.loro-text-area__control{display:grid;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-input);background:var(--loro-surface);overflow:hidden}textarea{width:100%;min-height:8rem;resize:vertical;border:0;outline:0;padding:1rem;background:transparent;color:var(--loro-text-strong);font:inherit;font-weight:650}textarea::placeholder{color:var(--loro-muted)}.loro-text-area__counter{justify-self:end;padding:0 1rem .75rem;color:var(--loro-muted);font-size:.85rem;font-weight:700}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+
+class LoroToggle {
+    checked = input(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Cambiar estado', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    checkedChange = output();
+    toggle() {
+        if (this.disabled()) {
+            return;
+        }
+        this.checkedChange.emit(!this.checked());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: LoroToggle, isStandalone: true, selector: "loro-toggle", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: `
+    <button
+      type="button"
+      class="loro-toggle"
+      [class.loro-toggle--checked]="checked()"
+      [disabled]="disabled()"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-pressed]="checked()"
+      (click)="toggle()">
+      <span class="loro-toggle__thumb"></span>
+    </button>
+  `, isInline: true, styles: [":host{display:inline-flex;flex:0 0 auto}.loro-toggle{position:relative;display:inline-flex;align-items:center;width:4rem;height:2.25rem;padding:.2rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-pill);background:var(--loro-surface-muted);cursor:pointer;transition:background .16s ease,border-color .16s ease,opacity .16s ease}.loro-toggle__thumb{display:block;width:1.85rem;height:1.85rem;border-radius:50%;background:var(--loro-surface);box-shadow:0 3px 10px #2219492e;transition:transform .16s ease}.loro-toggle--checked{border-color:color-mix(in srgb,var(--loro-primary-500) 54%,transparent);background:linear-gradient(135deg,var(--loro-primary-700),var(--loro-primary-500))}.loro-toggle--checked .loro-toggle__thumb{transform:translate(1.75rem)}.loro-toggle:disabled{cursor:not-allowed;opacity:.7}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroToggle, decorators: [{
+            type: Component,
+            args: [{ selector: 'loro-toggle', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <button
+      type="button"
+      class="loro-toggle"
+      [class.loro-toggle--checked]="checked()"
+      [disabled]="disabled()"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-pressed]="checked()"
+      (click)="toggle()">
+      <span class="loro-toggle__thumb"></span>
+    </button>
+  `, styles: [":host{display:inline-flex;flex:0 0 auto}.loro-toggle{position:relative;display:inline-flex;align-items:center;width:4rem;height:2.25rem;padding:.2rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-pill);background:var(--loro-surface-muted);cursor:pointer;transition:background .16s ease,border-color .16s ease,opacity .16s ease}.loro-toggle__thumb{display:block;width:1.85rem;height:1.85rem;border-radius:50%;background:var(--loro-surface);box-shadow:0 3px 10px #2219492e;transition:transform .16s ease}.loro-toggle--checked{border-color:color-mix(in srgb,var(--loro-primary-500) 54%,transparent);background:linear-gradient(135deg,var(--loro-primary-700),var(--loro-primary-500))}.loro-toggle--checked .loro-toggle__thumb{transform:translate(1.75rem)}.loro-toggle:disabled{cursor:not-allowed;opacity:.7}\n"] }]
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }] } });
+
+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()">
+      @if (label()) {
+        <span class="loro-upload__label">{{ label() }} @if (optional()) {<small>Opcional</small>}</span>
+      }
+      <span class="loro-upload__drop">
+        <loro-icon name="paperclip" [size]="28" alt="Adjuntar archivo" color="primary" />
+        <span class="loro-upload__copy">
+          <span>{{ title() }}</span>
+          @if (description()) {
+            <small>{{ description() }}</small>
+          }
+        </span>
+        @if (compact()) {
+          <loro-icon name="chevron-right" [size]="22" alt="Seleccionar" color="primary" />
+        }
+        <input type="file" [accept]="accept()" (change)="fileSelected.emit($any($event.target).files?.[0] ?? null)" />
+      </span>
+    </label>
+  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-upload{display:grid;gap:.7rem}.loro-upload__label{display:flex;gap:.75rem;color:var(--loro-text-strong);font-weight:900}.loro-upload__label small{color:var(--loro-muted);font-weight:700}.loro-upload__drop{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.85rem;min-height:4.4rem;padding:1rem;border:1px dashed var(--loro-border-strong);border-radius:var(--loro-radius-input);background:var(--loro-surface);color:var(--loro-muted-strong);cursor:pointer}.loro-upload--compact .loro-upload__drop{grid-template-columns:auto minmax(0,1fr) auto;border-style:solid}.loro-upload__copy{display:grid;gap:.15rem;font-weight:800;line-height:1.25}.loro-upload__copy small{color:var(--loro-muted);font-weight:650}input{position:absolute;inset:0;opacity:0;cursor:pointer}\n"], dependencies: [{ kind: "component", type: LoroIcon$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroUpload, decorators: [{
+            type: Component,
+            args: [{ selector: 'loro-upload', standalone: true, imports: [LoroIcon$1], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <label class="loro-upload" [class.loro-upload--compact]="compact()">
+      @if (label()) {
+        <span class="loro-upload__label">{{ label() }} @if (optional()) {<small>Opcional</small>}</span>
+      }
+      <span class="loro-upload__drop">
+        <loro-icon name="paperclip" [size]="28" alt="Adjuntar archivo" color="primary" />
+        <span class="loro-upload__copy">
+          <span>{{ title() }}</span>
+          @if (description()) {
+            <small>{{ description() }}</small>
+          }
+        </span>
+        @if (compact()) {
+          <loro-icon name="chevron-right" [size]="22" alt="Seleccionar" color="primary" />
+        }
+        <input type="file" [accept]="accept()" (change)="fileSelected.emit($any($event.target).files?.[0] ?? null)" />
+      </span>
+    </label>
+  `, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-upload{display:grid;gap:.7rem}.loro-upload__label{display:flex;gap:.75rem;color:var(--loro-text-strong);font-weight:900}.loro-upload__label small{color:var(--loro-muted);font-weight:700}.loro-upload__drop{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.85rem;min-height:4.4rem;padding:1rem;border:1px dashed var(--loro-border-strong);border-radius:var(--loro-radius-input);background:var(--loro-surface);color:var(--loro-muted-strong);cursor:pointer}.loro-upload--compact .loro-upload__drop{grid-template-columns:auto minmax(0,1fr) auto;border-style:solid}.loro-upload__copy{display:grid;gap:.15rem;font-weight:800;line-height:1.25}.loro-upload__copy small{color:var(--loro-muted);font-weight:650}input{position:absolute;inset:0;opacity:0;cursor:pointer}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], fileSelected: [{ type: i0.Output, args: ["fileSelected"] }] } });
+
+class LoroModal {
+    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;
+        }
+        return `${Math.max(0, this.currentSheetTop() - this.collapsedSheetTop())}px`;
+    }, ...(ngDevMode ? [{ debugName: "sheetDragOffsetCss" }] : /* istanbul ignore next */ []));
+    backdropOpacity = computed(() => {
+        if (!this.isSheetInteractionEnabled()) {
+            return '1';
+        }
+        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);
+            }
+        });
+    }
+    requestClose() {
+        this.resetSheetState();
+        this.modalClose.emit();
+    }
+    onSheetTouchStart(event, dialog) {
+        if (!this.isSheetInteractionEnabled() || event.touches.length !== 1 || !this.isDragZone(event, dialog)) {
+            return;
+        }
+        this.sheetDragging.set(true);
+        this.dragStartY = event.touches[0].clientY;
+        this.dragStartTop = this.currentSheetTop();
+        event.preventDefault();
+    }
+    onSheetTouchMove(event) {
+        if (!this.sheetDragging() || !this.isSheetInteractionEnabled() || event.touches.length !== 1) {
+            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();
+    }
+    onSheetTouchEnd() {
+        if (!this.sheetDragging()) {
+            return;
+        }
+        this.sheetDragging.set(false);
+        const currentTop = this.currentSheetTop();
+        const collapsedTop = this.collapsedSheetTop();
+        if (currentTop >= collapsedTop + 64) {
+            this.requestClose();
+            return;
+        }
+        this.sheetTop.set(collapsedTop);
+    }
+    resetSheetState() {
+        this.sheetDragging.set(false);
+        this.sheetTop.set(this.isSheetInteractionEnabled() ? this.collapsedSheetTop() : null);
+    }
+    currentSheetTop() {
+        return this.sheetTop() ?? this.collapsedSheetTop();
+    }
+    clampSheetTop(value) {
+        return Math.min(Math.max(value, this.collapsedSheetTop()), this.maxSheetTop());
+    }
+    collapsedSheetTop() {
+        const safeTop = this.safeAreaInsetTop();
+        return Math.max(safeTop + 12, Math.min(88, Math.round(this.viewportHeight() * 0.1)));
+    }
+    maxSheetTop() {
+        return this.viewportHeight() - 56;
+    }
+    viewportHeight() {
+        const win = this.document.defaultView;
+        if (!win) {
+            return 844;
+        }
+        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;
+        }
+        return Math.max(visualHeight, layoutHeight);
+    }
+    safeAreaInsetTop() {
+        const win = this.document.defaultView;
+        if (!win) {
+            return 0;
+        }
+        return Number.parseFloat(win.getComputedStyle(this.document.documentElement).getPropertyValue('env(safe-area-inset-top)')) || 0;
+    }
+    lockDocumentScroll(onCleanup) {
+        const body = this.document.body;
+        const documentElement = this.document.documentElement;
+        const previousBodyOverflow = body.style.overflow;
+        const previousDocumentOverflow = documentElement.style.overflow;
+        body.style.overflow = 'hidden';
+        documentElement.style.overflow = 'hidden';
+        body.classList.add('loro-modal-open');
+        documentElement.classList.add('loro-modal-open');
+        onCleanup(() => {
+            body.style.overflow = previousBodyOverflow;
+            documentElement.style.overflow = previousDocumentOverflow;
+            body.classList.remove('loro-modal-open');
+            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('.loro-notification-panel__handle, .loro-modal__header')) {
+            return true;
+        }
+        const dialogTop = dialog.getBoundingClientRect().top;
+        return touch.clientY - dialogTop <= 52;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroModal, isStandalone: true, selector: "loro-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, sheetDragToClose: { classPropertyName: "sheetDragToClose", publicName: "sheetDragToClose", isSignal: true, isRequired: false, transformFunction: null }, sheetRestTop: { classPropertyName: "sheetRestTop", publicName: "sheetRestTop", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { modalClose: "modalClose" }, ngImport: i0, template: `
+    @if (open()) {
+      <div class="loro-modal" [class]="'loro-modal loro-modal--' + placement()" role="presentation">
+        @if (showBackdrop()) {
+          <button
+            type="button"
+            class="loro-modal__backdrop"
+            aria-label="Close modal"
+            [style.opacity]="backdropOpacity()"
+            (click)="closeOnBackdrop() && requestClose()"></button>
+        }
+        <section
+          #dialog
+          class="loro-modal__dialog"
+          [class]="'loro-modal__dialog loro-modal__dialog--' + size()"
+          [class.loro-modal__dialog--dragging]="sheetDragging()"
+          [style.--loro-modal-sheet-drag-y]="sheetDragOffsetCss()"
+          [style.--loro-modal-sheet-rest-top]="sheetRestTop() || sheetRestTopCss()"
+          role="dialog"
+          aria-modal="true"
+          [attr.aria-label]="ariaLabel() || title()"
+          (touchstart)="onSheetTouchStart($event, dialog)"
+          (touchmove)="onSheetTouchMove($event)"
+          (touchend)="onSheetTouchEnd()"
+          (touchcancel)="onSheetTouchEnd()">
+          @if (title() || dismissible()) {
+            <header class="loro-modal__header">
+              @if (title()) {
+                <h2>{{ title() }}</h2>
+              }
+              @if (dismissible()) {
+                <button type="button" class="loro-modal__close" aria-label="Cerrar modal" (click)="requestClose()">
+                  X
+                </button>
+              }
+            </header>
+          }
+
+          <div
+            class="loro-modal__content"
+            [class.loro-modal__content--flush]="placement() === 'sheet' && !title()">
+            <ng-content />
+          </div>
+
+          <ng-content select="[loro-modal-actions]" />
+        </section>
+      </div>
+    }
+  `, isInline: true, styles: [":host{display:contents;font-family:var(--loro-font-brand)}.loro-modal{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;width:100vw;height:100vh;height:var(--app-fill-height, var(--app-viewport-height, 100dvh));padding:1.25rem;isolation:isolate}.loro-modal__backdrop{position:absolute;inset:0;border:0;background:#140e276b;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);cursor:pointer}.loro-modal__dialog{position:relative;z-index:1;display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:min(100%,32rem);max-height:min(42rem,calc(var(--app-fill-height, var(--app-viewport-height, 100dvh)) - 2.5rem));overflow:hidden;border:1px solid var(--loro-border-subtle);border-radius:1.25rem;background:var(--loro-surface);box-shadow:var(--loro-shadow-panel);color:var(--loro-text);transition:transform .22s cubic-bezier(.22,1,.36,1)}.loro-modal__dialog--sm{width:min(100%,24rem)}.loro-modal__dialog--lg{width:min(100%,44rem)}.loro-modal__header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem;padding:1rem 1.15rem;border-bottom:1px solid var(--loro-border-subtle)}h2{margin:0;color:var(--loro-text-strong);font-size:1.08rem;font-weight:950;line-height:1.2}.loro-modal__close{display:grid;width:2.25rem;height:2.25rem;place-items:center;border:0;border-radius:50%;background:#6c3cff14;color:var(--loro-text-strong);font:inherit;font-weight:950;cursor:pointer}.loro-modal__content{min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:1.15rem}::ng-deep [loro-modal-actions]{display:flex;justify-content:flex-end;gap:.75rem;padding:.9rem 1.15rem 1.15rem;border-top:1px solid var(--loro-border-subtle)}@media(max-width:1023.88px){.loro-modal{align-items:end;padding:0}.loro-modal--sheet{place-items:end stretch}.loro-modal__dialog,.loro-modal__dialog--sm,.loro-modal__dialog--md,.loro-modal__dialog--lg{width:100%;max-height:calc(var(--app-fill-height, var(--app-viewport-height, 100dvh)) - 1rem);border-radius:1.75rem 1.75rem 0 0}.loro-modal--sheet .loro-modal__dialog,.loro-modal--sheet .loro-modal__dialog--sm,.loro-modal--sheet .loro-modal__dialog--md,.loro-modal--sheet .loro-modal__dialog--lg{--loro-modal-sheet-rest-top: max( calc(var(--app-fill-height, 100dvh) * .3), calc(env(safe-area-inset-top, 0px) + .65rem) );position:fixed;right:0;bottom:0;left:0;top:max(var(--loro-modal-sheet-rest-top),calc(env(safe-area-inset-top,0px) + .65rem));width:100%;max-height:none;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:grid;height:100%;min-height:0;overflow:hidden;overscroll-behavior-y:contain;padding:.85rem;background:var(--loro-surface);touch-action:pan-y}.loro-modal--sheet .loro-modal__content--flush{padding:0}.loro-modal--center{align-items:center;padding:1rem}.loro-modal--center .loro-modal__dialog{border-radius:1.15rem}::ng-deep [loro-modal-actions]{flex-direction:column-reverse;padding:.7rem .9rem max(.85rem,env(safe-area-inset-bottom,0px));background:var(--loro-surface)}}@media(min-width:1024px){.loro-modal{place-items:center;padding:2rem}.loro-modal__backdrop{background:#070a129e;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.loro-modal--center .loro-modal__dialog,.loro-modal--sheet .loro-modal__dialog{position:relative;inset:auto;max-height:min(46rem,calc(var(--app-fill-height, var(--app-viewport-height, 100dvh)) - 4rem));border-radius:1.5rem}.loro-modal__dialog--sm{width:min(100%,28rem)}.loro-modal__dialog--md{width:min(100%,36rem)}.loro-modal__dialog--lg{width:min(100%,60rem)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroModal, decorators: [{
+            type: Component,
+            args: [{ selector: 'loro-modal', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (open()) {
+      <div class="loro-modal" [class]="'loro-modal loro-modal--' + placement()" role="presentation">
+        @if (showBackdrop()) {
+          <button
+            type="button"
+            class="loro-modal__backdrop"
+            aria-label="Close modal"
+            [style.opacity]="backdropOpacity()"
+            (click)="closeOnBackdrop() && requestClose()"></button>
+        }
+        <section
+          #dialog
+          class="loro-modal__dialog"
+          [class]="'loro-modal__dialog loro-modal__dialog--' + size()"
+          [class.loro-modal__dialog--dragging]="sheetDragging()"
+          [style.--loro-modal-sheet-drag-y]="sheetDragOffsetCss()"
+          [style.--loro-modal-sheet-rest-top]="sheetRestTop() || sheetRestTopCss()"
+          role="dialog"
+          aria-modal="true"
+          [attr.aria-label]="ariaLabel() || title()"
+          (touchstart)="onSheetTouchStart($event, dialog)"
+          (touchmove)="onSheetTouchMove($event)"
+          (touchend)="onSheetTouchEnd()"
+          (touchcancel)="onSheetTouchEnd()">
+          @if (title() || dismissible()) {
+            <header class="loro-modal__header">
+              @if (title()) {
+                <h2>{{ title() }}</h2>
+              }
+              @if (dismissible()) {
+                <button type="button" class="loro-modal__close" aria-label="Cerrar modal" (click)="requestClose()">
+                  X
+                </button>
+              }
+            </header>
+          }
+
+          <div
+            class="loro-modal__content"
+            [class.loro-modal__content--flush]="placement() === 'sheet' && !title()">
+            <ng-content />
+          </div>
+
+          <ng-content select="[loro-modal-actions]" />
+        </section>
+      </div>
+    }
+  `, styles: [":host{display:contents;font-family:var(--loro-font-brand)}.loro-modal{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;width:100vw;height:100vh;height:var(--app-fill-height, var(--app-viewport-height, 100dvh));padding:1.25rem;isolation:isolate}.loro-modal__backdrop{position:absolute;inset:0;border:0;background:#140e276b;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);cursor:pointer}.loro-modal__dialog{position:relative;z-index:1;display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:min(100%,32rem);max-height:min(42rem,calc(var(--app-fill-height, var(--app-viewport-height, 100dvh)) - 2.5rem));overflow:hidden;border:1px solid var(--loro-border-subtle);border-radius:1.25rem;background:var(--loro-surface);box-shadow:var(--loro-shadow-panel);color:var(--loro-text);transition:transform .22s cubic-bezier(.22,1,.36,1)}.loro-modal__dialog--sm{width:min(100%,24rem)}.loro-modal__dialog--lg{width:min(100%,44rem)}.loro-modal__header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem;padding:1rem 1.15rem;border-bottom:1px solid var(--loro-border-subtle)}h2{margin:0;color:var(--loro-text-strong);font-size:1.08rem;font-weight:950;line-height:1.2}.loro-modal__close{display:grid;width:2.25rem;height:2.25rem;place-items:center;border:0;border-radius:50%;background:#6c3cff14;color:var(--loro-text-strong);font:inherit;font-weight:950;cursor:pointer}.loro-modal__content{min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:1.15rem}::ng-deep [loro-modal-actions]{display:flex;justify-content:flex-end;gap:.75rem;padding:.9rem 1.15rem 1.15rem;border-top:1px solid var(--loro-border-subtle)}@media(max-width:1023.88px){.loro-modal{align-items:end;padding:0}.loro-modal--sheet{place-items:end stretch}.loro-modal__dialog,.loro-modal__dialog--sm,.loro-modal__dialog--md,.loro-modal__dialog--lg{width:100%;max-height:calc(var(--app-fill-height, var(--app-viewport-height, 100dvh)) - 1rem);border-radius:1.75rem 1.75rem 0 0}.loro-modal--sheet .loro-modal__dialog,.loro-modal--sheet .loro-modal__dialog--sm,.loro-modal--sheet .loro-modal__dialog--md,.loro-modal--sheet .loro-modal__dialog--lg{--loro-modal-sheet-rest-top: max( calc(var(--app-fill-height, 100dvh) * .3), calc(env(safe-area-inset-top, 0px) + .65rem) );position:fixed;right:0;bottom:0;left:0;top:max(var(--loro-modal-sheet-rest-top),calc(env(safe-area-inset-top,0px) + .65rem));width:100%;max-height:none;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:grid;height:100%;min-height:0;overflow:hidden;overscroll-behavior-y:contain;padding:.85rem;background:var(--loro-surface);touch-action:pan-y}.loro-modal--sheet .loro-modal__content--flush{padding:0}.loro-modal--center{align-items:center;padding:1rem}.loro-modal--center .loro-modal__dialog{border-radius:1.15rem}::ng-deep [loro-modal-actions]{flex-direction:column-reverse;padding:.7rem .9rem max(.85rem,env(safe-area-inset-bottom,0px));background:var(--loro-surface)}}@media(min-width:1024px){.loro-modal{place-items:center;padding:2rem}.loro-modal__backdrop{background:#070a129e;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.loro-modal--center .loro-modal__dialog,.loro-modal--sheet .loro-modal__dialog{position:relative;inset:auto;max-height:min(46rem,calc(var(--app-fill-height, var(--app-viewport-height, 100dvh)) - 4rem));border-radius:1.5rem}.loro-modal__dialog--sm{width:min(100%,28rem)}.loro-modal__dialog--md{width:min(100%,36rem)}.loro-modal__dialog--lg{width:min(100%,60rem)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], sheetDragToClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "sheetDragToClose", required: false }] }], sheetRestTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "sheetRestTop", required: false }] }], showBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackdrop", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], modalClose: [{ type: i0.Output, args: ["modalClose"] }] } });
+
+const LORO_ICON_COLOR_TOKENS = {
+    default: 'currentColor',
+    primary: 'var(--loro-primary-500)',
+    'primary-strong': 'var(--loro-primary-700)',
+    'primary-deep': 'var(--loro-primary-900)',
+    text: 'var(--loro-text)',
+    muted: 'var(--loro-muted)',
+    success: '#1f9d55',
+    danger: 'var(--loro-danger-text)',
+    warning: 'var(--loro-warning)',
+    inverse: 'var(--loro-text-inverse)',
+};
+class LoroIcon {
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    size = input(48, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    alt = input('', ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
+    decorative = input(false, ...(ngDevMode ? [{ debugName: "decorative" }] : /* istanbul ignore next */ []));
+    color = input('default', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    renderMode = input('mask', ...(ngDevMode ? [{ debugName: "renderMode" }] : /* istanbul ignore next */ []));
+    assetName = computed(() => {
+        const name = this.name();
+        return (name in LORO_ICON_PATHS$1
+            ? name
+            : LORO_ICON_LEGACY_NAMES$1[name]);
+    }, ...(ngDevMode ? [{ debugName: "assetName" }] : /* istanbul ignore next */ []));
+    src = computed(() => LORO_ICON_PATHS$1[this.assetName()], ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+    altText = computed(() => (this.decorative() ? '' : this.alt() || this.name()), ...(ngDevMode ? [{ debugName: "altText" }] : /* istanbul ignore next */ []));
+    resolvedSize = computed(() => {
+        const size = this.size();
+        return typeof size === 'number' ? `${size}px` : size;
+    }, ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    resolvedColor = computed(() => {
+        const color = this.color();
+        return color in LORO_ICON_COLOR_TOKENS
+            ? LORO_ICON_COLOR_TOKENS[color]
+            : color;
+    }, ...(ngDevMode ? [{ debugName: "resolvedColor" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroIcon, isStandalone: true, selector: "loro-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, renderMode: { classPropertyName: "renderMode", publicName: "renderMode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <span
+      class="loro-icon"
+      role="img"
+      [attr.aria-label]="decorative() ? null : altText()"
+      [attr.aria-hidden]="decorative() ? 'true' : null"
+      [style.width]="resolvedSize()"
+      [style.height]="resolvedSize()"
+    >
+      @if (renderMode() === 'origin') {
+        <img class="loro-icon__origin" [src]="src()" alt="" aria-hidden="true" />
+      } @else {
+        <span
+          class="loro-icon__mask"
+          [style.--loro-icon-mask]="'url(' + src() + ')'"
+          [style.--loro-icon-color]="resolvedColor()"
+        ></span>
+      }
+    </span>
+  `, isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:0;flex:0 0 auto}.loro-icon{display:inline-flex;width:100%;height:100%}.loro-icon__origin,.loro-icon__mask{display:block;width:100%;height:100%}.loro-icon__origin{object-fit:contain}.loro-icon__mask{background-color:var(--loro-icon-color);mask-image:var(--loro-icon-mask);mask-repeat:no-repeat;mask-position:center;mask-size:contain;-webkit-mask-image:var(--loro-icon-mask);-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroIcon, decorators: [{
+            type: Component,
+            args: [{ selector: 'loro-icon', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <span
+      class="loro-icon"
+      role="img"
+      [attr.aria-label]="decorative() ? null : altText()"
+      [attr.aria-hidden]="decorative() ? 'true' : null"
+      [style.width]="resolvedSize()"
+      [style.height]="resolvedSize()"
+    >
+      @if (renderMode() === 'origin') {
+        <img class="loro-icon__origin" [src]="src()" alt="" aria-hidden="true" />
+      } @else {
+        <span
+          class="loro-icon__mask"
+          [style.--loro-icon-mask]="'url(' + src() + ')'"
+          [style.--loro-icon-color]="resolvedColor()"
+        ></span>
+      }
+    </span>
+  `, styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:0;flex:0 0 auto}.loro-icon{display:inline-flex;width:100%;height:100%}.loro-icon__origin,.loro-icon__mask{display:block;width:100%;height:100%}.loro-icon__origin{object-fit:contain}.loro-icon__mask{background-color:var(--loro-icon-color);mask-image:var(--loro-icon-mask);mask-repeat:no-repeat;mask-position:center;mask-size:contain;-webkit-mask-image:var(--loro-icon-mask);-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain}\n"] }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], decorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorative", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], renderMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderMode", required: false }] }] } });
+
+class 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
+      class="loro-image"
+      [src]="src()"
+      [alt]="altText()"
+      [style.width]="resolvedWidth()"
+      [style.height]="resolvedHeight()"
+      [style.object-fit]="fit()"
+      [style.display]="'block'"
+    />
+  `, isInline: true, styles: [":host{display:block}.loro-image{max-width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroImage, decorators: [{
+            type: Component,
+            args: [{ selector: 'loro-image', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <img
+      class="loro-image"
+      [src]="src()"
+      [alt]="altText()"
+      [style.width]="resolvedWidth()"
+      [style.height]="resolvedHeight()"
+      [style.object-fit]="fit()"
+      [style.display]="'block'"
+    />
+  `, styles: [":host{display:block}.loro-image{max-width:100%}\n"] }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], fit: [{ type: i0.Input, args: [{ isSignal: true, alias: "fit", required: false }] }] } });
+
+class LoroHapticsService {
+    document = inject(DOCUMENT);
+    vibration = 'vibrate' in navigator ? navigator.vibrate.bind(navigator) : null;
+    impact(style = 'light') {
+        if (Capacitor.isNativePlatform()) {
+            const nativeStyle = {
+                light: ImpactStyle.Light,
+                medium: ImpactStyle.Medium,
+                heavy: ImpactStyle.Heavy,
+            };
+            void Haptics.impact({ style: nativeStyle[style] });
+            return;
+        }
+        const pattern = {
+            light: 10,
+            medium: [12, 18, 12],
+            heavy: [18, 24, 18],
+        };
+        this.trigger(pattern[style]);
+    }
+    selection() {
+        if (Capacitor.isNativePlatform()) {
+            void Haptics.selectionStart()
+                .then(() => Haptics.selectionChanged())
+                .then(() => Haptics.selectionEnd());
+            return;
+        }
+        this.trigger(8);
+    }
+    notification(type = 'success') {
+        if (Capacitor.isNativePlatform()) {
+            const nativeType = {
+                success: NotificationType.Success,
+                warning: NotificationType.Warning,
+                error: NotificationType.Error,
+            };
+            void Haptics.notification({ type: nativeType[type] });
+            return;
+        }
+        const pattern = {
+            success: [12, 24, 12],
+            warning: [18, 18, 18],
+            error: [30, 24, 30],
+        };
+        this.trigger(pattern[type]);
+    }
+    trigger(pattern) {
+        if (!this.vibration || this.document.visibilityState !== 'visible') {
+            return;
+        }
+        this.vibration(pattern);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroHapticsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroHapticsService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroHapticsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Footer, LoroAccordion, LoroAlert, LoroAppNav, LoroAssistantCard, LoroAuthField, LoroAuthSocialButton, LoroBadge, LoroButton, LoroCard, LoroCardNav, LoroCheckbox, LoroDashboardCard, LoroDivider, LoroDropdown, LoroFilterChip, LoroHapticsService, LoroIcon, LoroImage, LoroInput, LoroModal, LoroNotification, LoroNotificationPanel, LoroNotificationRow, LoroProductRow, LoroProductSection, LoroProfileCard, LoroProfileHero, LoroRadio, LoroSegmentedControl, LoroSelect, LoroSpinner, LoroStatCard, LoroStoreRankCard, LoroSummaryBar, LoroTab, LoroTextArea, LoroToast, LoroToggle, LoroUpload };
+//# sourceMappingURL=juligc99-loro-ui.mjs.map