@juligc99/loro-ui 0.0.13 → 0.0.14

package/fesm2022/juligc99-loro-ui.mjs

@@ -1339,13 +1339,13 @@ class LoroButton {
         return value === 'none' || value === 'with-icon' || value === 'only-icon';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroButton, isStandalone: true, selector: "loro-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconContent: { classPropertyName: "iconContent", publicName: "iconContent", isSignal: true, isRequired: false, transformFunction: null }, iconMode: { classPropertyName: "iconMode", publicName: "iconMode", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, iconButtonSize: { classPropertyName: "iconButtonSize", publicName: "iconButtonSize", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, socialMobileCompact: { classPropertyName: "socialMobileCompact", publicName: "socialMobileCompact", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, typeButton: { classPropertyName: "typeButton", publicName: "typeButton", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, buttonWidth: { classPropertyName: "buttonWidth", publicName: "buttonWidth", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, formId: { classPropertyName: "formId", publicName: "formId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescription: { classPropertyName: "ariaDescription", publicName: "ariaDescription", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick", change: "change", sanChange: "sanChange" }, host: { properties: { "class.loro-button-host--full": "resolvedButtonWidth() === 'full'" } }, ngImport: i0, template: "<button\n  [type]=\"type()\"\n  [attr.form]=\"formId() || null\"\n  class=\"loro-button\"\n  [class]=\"'loro-button loro-button--' + resolvedTypeButton()\"\n  [class.loro-button--outline]=\"variant() === 'outline'\"\n  [class.loro-button--ghost]=\"variant() === 'ghost'\"\n  [class.loro-button--soft]=\"variant() === 'soft'\"\n  [class.loro-button--social]=\"variant() === 'social'\"\n  [class.loro-button--action]=\"variant() === 'action'\"\n  [class.loro-button--navigation]=\"variant() === 'navigation'\"\n  [class.loro-button--danger]=\"variant() === 'danger'\"\n  [class.loro-button--secondary-color]=\"resolvedColor() === 'secondary'\"\n  [class.loro-button--tertiary-color]=\"resolvedColor() === 'tertiary'\"\n  [class.loro-button--danger-color]=\"resolvedColor() === 'danger'\"\n  [class.loro-button--sm]=\"size() === 'sm'\"\n  [class.loro-button--lg]=\"size() === 'lg'\"\n  [class.loro-button--full]=\"resolvedButtonWidth() === 'full'\"\n  [class.loro-button--icon-only]=\"resolvedIconMode() === 'only-icon'\"\n  [class.loro-button--social-mobile-compact]=\"socialMobileCompact()\"\n  [class.loro-button--selected]=\"selected()\"\n  [class.loro-button--loading]=\"loading()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [attr.aria-description]=\"ariaDescription() || null\"\n  [attr.aria-busy]=\"loading()\"\n  [style.--loro-button-icon-size]=\"resolvedIconButtonSize()\"\n  (click)=\"emitChange()\"\n>\n  @if (showIcon()) {\n    <loro-icon\n      [name]=\"resolvedIcon()!\"\n      [size]=\"iconSize()\"\n      [alt]=\"resolvedText()\"\n      [color]=\"resolvedIconColor()\"\n      [renderMode]=\"resolvedIconRenderMode()\"\n    />\n  }\n\n  @if (showSpinner()) {\n    <span class=\"loro-button__spinner\" aria-hidden=\"true\"></span>\n    <span class=\"loro-button__sr-status\" aria-live=\"polite\">{{ loadingAriaLabel() }}</span>\n  }\n\n  @if (resolvedIconMode() !== 'only-icon') {\n    <span class=\"loro-button__label\">{{ resolvedText() }}</span>\n  }\n</button>\n", styles: [":host{display:inline-flex;width:fit-content;font-family:var(--loro-font-brand)}:host(.loro-button-host--full){display:block;width:100%}.loro-button{display:inline-flex;align-items:center;justify-content:center;gap:.65rem;min-width:0;min-height:var(--loro-button-min-height, 3.25rem);padding:var(--loro-button-padding, .85rem 1.25rem);border:1px solid transparent;border-radius:var(--loro-button-radius, .9rem);background:var(--loro-button-background, var(--loro-surface-muted));color:var(--loro-text-strong);box-shadow:var(--loro-button-shadow, none);font:inherit;font-size:var(--loro-button-font-size, 1rem);font-weight:900;line-height:1.1;white-space:normal;overflow-wrap:anywhere;word-break:break-word;text-align:center;cursor:pointer;transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease,color .15s ease}.loro-button__label{min-width:0}.loro-button__spinner{width:1rem;height:1rem;flex:0 0 auto;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:loro-button-spin .7s linear infinite}.loro-button__sr-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.loro-button:hover:not(:disabled){transform:translateY(-1px)}.loro-button--full{width:100%}.loro-button--primary,.loro-button--primary.loro-button--primary-color{background:linear-gradient(135deg,var(--loro-primary-500),var(--loro-primary-700));color:#fff}.loro-button--secondary,.loro-button--outline{border-color:var(--loro-primary-500);background:transparent;color:var(--loro-primary-700)}.loro-button--tertiary,.loro-button--ghost{background:transparent;color:var(--loro-primary-700)}.loro-button--tertiary{min-height:auto;padding:0;border-radius:.55rem;box-shadow:none}.loro-button--tertiary:hover:not(:disabled){transform:none}.loro-button--tertiary:focus-visible{outline:3px solid color-mix(in srgb,var(--loro-primary-500) 28%,transparent);outline-offset:2px}.loro-button--soft{background:color-mix(in srgb,var(--loro-primary-500) 8%,transparent);color:var(--loro-primary-700)}.loro-button--social{border-color:var(--loro-border-subtle);background:var(--loro-surface);color:var(--loro-text)}.loro-button--action{min-height:var(--loro-button-min-height, 2.75rem);padding:var(--loro-button-padding, 0);border:0;border-radius:var(--loro-button-radius, 50%);background:var(--loro-button-background, transparent);color:var(--loro-button-color, var(--loro-primary-700));box-shadow:var(--loro-button-shadow, none)}.loro-button--action:hover:not(:disabled){background:var(--loro-button-hover-background, color-mix(in srgb, var(--loro-primary) 8%, transparent));transform:translateY(-1px)}.loro-button--action:active:not(:disabled){transform:translateY(1px)}.loro-button--action:focus-visible{outline:3px solid var(--loro-button-focus-ring, color-mix(in srgb, var(--loro-primary) 36%, transparent));outline-offset:3px}.loro-button--social:hover:not(:disabled),.loro-button--social:focus-visible{border-color:var(--loro-primary-500);box-shadow:var(--loro-shadow-soft),0 0 0 3px color-mix(in srgb,var(--loro-primary-500) 14%,transparent)}.loro-button--navigation{justify-content:flex-start;gap:1rem;padding:.5rem;border-color:var(--loro-button-border-color, transparent);border-radius:var(--loro-button-radius, 1rem);color:var(--loro-home-avatar-color);text-align:left}.loro-button--navigation .loro-button__label{flex:1;text-align:left}.loro-button--navigation:hover:not(:disabled):not(.loro-button--danger-color):not(.loro-button--selected),.loro-button--navigation:focus-visible:not(:disabled):not(.loro-button--danger-color):not(.loro-button--selected){background:var(--loro-home-avatar-bg);transform:translateY(-.24rem) scale(1.01)}.loro-button--selected{border-color:var(--loro-button-selected-border-color, var(--loro-button-border-color, transparent));background:var(--loro-button-selected-background, var(--loro-button-background, transparent));color:var(--loro-button-selected-color, var(--loro-button-color, var(--loro-nav-button-text, var(--loro-text-strong))))}.loro-button--navigation.loro-button--selected:hover:not(:disabled),.loro-button--navigation.loro-button--selected:focus-visible:not(:disabled){transform:none;border-color:var(--loro-button-selected-border-color, var(--loro-button-border-color, transparent));background:var(--loro-button-selected-background, var(--loro-button-background, transparent));color:var(--loro-button-selected-color, var(--loro-button-color, var(--loro-nav-button-text, var(--loro-text-strong))));outline:none}.loro-button--danger,.loro-button--danger-color{border-color:color-mix(in srgb,var(--loro-danger-text) 24%,transparent);background:var(--loro-danger-surface);color:var(--loro-danger-text)}.loro-button--navigation.loro-button--danger-color{border-color:var(--loro-button-border-color, transparent);background:var(--loro-button-background, var(--loro-danger-surface));color:var(--loro-button-color, var(--loro-danger-text))}.loro-button--secondary-color.loro-button--primary{background:linear-gradient(135deg,var(--loro-primary-700),var(--loro-primary-900));color:#fff}.loro-button--tertiary-color.loro-button--primary{background:linear-gradient(135deg,color-mix(in srgb,var(--loro-primary-500) 82%,white),var(--loro-primary-700));color:#fff}.loro-button--sm{min-height:var(--loro-button-min-height, 2.35rem);border-radius:var(--loro-button-radius, .65rem);font-size:var(--loro-button-font-size, .82rem)}.loro-button--lg{min-height:var(--loro-button-min-height, 3.65rem);padding:var(--loro-button-padding, .95rem 1.35rem);border-radius:var(--loro-button-radius, 1rem);font-size:var(--loro-button-font-size, 1.08rem)}.loro-button--icon-only{width:var(--loro-button-icon-size, 3rem);min-width:var(--loro-button-icon-size, 3rem);padding:0;aspect-ratio:1}.loro-button:disabled{cursor:not-allowed;opacity:.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, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroButton, isStandalone: true, selector: "loro-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconContent: { classPropertyName: "iconContent", publicName: "iconContent", isSignal: true, isRequired: false, transformFunction: null }, iconMode: { classPropertyName: "iconMode", publicName: "iconMode", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, iconButtonSize: { classPropertyName: "iconButtonSize", publicName: "iconButtonSize", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, socialMobileCompact: { classPropertyName: "socialMobileCompact", publicName: "socialMobileCompact", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, typeButton: { classPropertyName: "typeButton", publicName: "typeButton", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, buttonWidth: { classPropertyName: "buttonWidth", publicName: "buttonWidth", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, formId: { classPropertyName: "formId", publicName: "formId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescription: { classPropertyName: "ariaDescription", publicName: "ariaDescription", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick", change: "change", sanChange: "sanChange" }, host: { properties: { "class.loro-button-host--full": "resolvedButtonWidth() === 'full'" } }, ngImport: i0, template: "<button\n  [type]=\"type()\"\n  [attr.form]=\"formId() || null\"\n  class=\"loro-button\"\n  [class]=\"'loro-button loro-button--' + resolvedTypeButton()\"\n  [class.loro-button--outline]=\"variant() === 'outline'\"\n  [class.loro-button--ghost]=\"variant() === 'ghost'\"\n  [class.loro-button--soft]=\"variant() === 'soft'\"\n  [class.loro-button--social]=\"variant() === 'social'\"\n  [class.loro-button--action]=\"variant() === 'action'\"\n  [class.loro-button--navigation]=\"variant() === 'navigation'\"\n  [class.loro-button--danger]=\"variant() === 'danger'\"\n  [class.loro-button--secondary-color]=\"resolvedColor() === 'secondary'\"\n  [class.loro-button--tertiary-color]=\"resolvedColor() === 'tertiary'\"\n  [class.loro-button--danger-color]=\"resolvedColor() === 'danger'\"\n  [class.loro-button--sm]=\"size() === 'sm'\"\n  [class.loro-button--lg]=\"size() === 'lg'\"\n  [class.loro-button--full]=\"resolvedButtonWidth() === 'full'\"\n  [class.loro-button--icon-only]=\"resolvedIconMode() === 'only-icon'\"\n  [class.loro-button--social-mobile-compact]=\"socialMobileCompact()\"\n  [class.loro-button--selected]=\"selected()\"\n  [class.loro-button--loading]=\"loading()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [attr.aria-description]=\"ariaDescription() || null\"\n  [attr.aria-busy]=\"loading()\"\n  [style.--loro-button-icon-size]=\"resolvedIconButtonSize()\"\n  (click)=\"emitChange()\"\n>\n  @if (showIcon()) {\n    <loro-icon\n      [name]=\"resolvedIcon()!\"\n      [size]=\"iconSize()\"\n      [alt]=\"resolvedText()\"\n      [color]=\"resolvedIconColor()\"\n      [renderMode]=\"resolvedIconRenderMode()\"\n    />\n  }\n\n  @if (showSpinner()) {\n    <span class=\"loro-button__spinner\" aria-hidden=\"true\"></span>\n    <span class=\"loro-button__sr-status\" aria-live=\"polite\">{{ loadingAriaLabel() }}</span>\n  }\n\n  @if (resolvedIconMode() !== 'only-icon') {\n    <span class=\"loro-button__label\">{{ resolvedText() }}</span>\n  }\n</button>\n", styles: [":host{display:inline-flex;width:fit-content;font-family:var(--loro-font-brand)}:host(.loro-button-host--full){display:block;width:100%}.loro-button{display:inline-flex;align-items:center;justify-content:center;gap:.65rem;min-width:0;min-height:var(--loro-button-min-height, 3.25rem);padding:var(--loro-button-padding, .85rem 1.25rem);border:1px solid transparent;border-radius:var(--loro-button-radius, .9rem);background:var(--loro-button-background, var(--loro-surface-muted));color:var(--loro-text-strong);box-shadow:var(--loro-button-shadow, none);font:inherit;font-size:var(--loro-button-font-size, 1rem);font-weight:900;line-height:1.1;white-space:normal;overflow-wrap:anywhere;word-break:break-word;text-align:center;cursor:pointer;transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease,color .15s ease}.loro-button__label{min-width:0}.loro-button__spinner{width:1rem;height:1rem;flex:0 0 auto;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:loro-button-spin .7s linear infinite}.loro-button__sr-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.loro-button:hover:not(:disabled){transform:translateY(-1px)}.loro-button--full{width:100%}.loro-button--primary,.loro-button--primary.loro-button--primary-color{background:linear-gradient(135deg,var(--loro-primary-500),var(--loro-primary-700));color:#fff}.loro-button--secondary,.loro-button--outline{border-color:var(--loro-primary-500);background:transparent;color:var(--loro-primary-700)}.loro-button--tertiary,.loro-button--ghost{background:transparent;color:var(--loro-primary-700)}.loro-button--tertiary{min-height:auto;padding:0;border-radius:.55rem;box-shadow:none}.loro-button--tertiary:hover:not(:disabled){transform:none}.loro-button--tertiary:focus-visible{outline:3px solid color-mix(in srgb,var(--loro-primary-500) 28%,transparent);outline-offset:2px}.loro-button--soft{background:color-mix(in srgb,var(--loro-primary-500) 8%,transparent);color:var(--loro-primary-700)}.loro-button--social{border-color:var(--loro-border-subtle);background:var(--loro-surface);color:var(--loro-text)}.loro-button--action{min-height:var(--loro-button-min-height, 2.75rem);padding:var(--loro-button-padding, 0);border:0;border-radius:var(--loro-button-radius, 50%);background:var(--loro-button-background, transparent);color:var(--loro-button-color, var(--loro-primary-700));box-shadow:var(--loro-button-shadow, none)}.loro-button--action:hover:not(:disabled){background:var(--loro-button-hover-background, color-mix(in srgb, var(--loro-primary) 8%, transparent));transform:translateY(-1px)}.loro-button--action:active:not(:disabled){transform:translateY(1px)}.loro-button--action:focus-visible{outline:3px solid var(--loro-button-focus-ring, color-mix(in srgb, var(--loro-primary) 36%, transparent));outline-offset:3px}.loro-button--social:hover:not(:disabled),.loro-button--social:focus-visible{border-color:var(--loro-primary-500);box-shadow:var(--loro-shadow-soft),0 0 0 3px color-mix(in srgb,var(--loro-primary-500) 14%,transparent)}.loro-button--navigation{justify-content:flex-start;gap:1rem;padding:.5rem;border-color:var(--loro-button-border-color, transparent);border-radius:var(--loro-button-radius, 1rem);color:var(--loro-home-avatar-color);text-align:left}.loro-button--navigation .loro-button__label{flex:1;text-align:left}.loro-button--navigation:hover:not(:disabled):not(.loro-button--danger-color):not(.loro-button--selected),.loro-button--navigation:focus-visible:not(:disabled):not(.loro-button--danger-color):not(.loro-button--selected){background:var(--loro-home-avatar-bg);transform:translateY(-.24rem) scale(1.01)}.loro-button--selected{border-color:var(--loro-button-selected-border-color, var(--loro-button-border-color, transparent));background:var(--loro-button-selected-background, var(--loro-button-background, transparent));color:var(--loro-button-selected-color, var(--loro-button-color, var(--loro-nav-button-text, var(--loro-text-strong))))}.loro-button--navigation.loro-button--selected:hover:not(:disabled),.loro-button--navigation.loro-button--selected:focus-visible:not(:disabled){transform:none;border-color:var(--loro-button-selected-border-color, var(--loro-button-border-color, transparent));background:var(--loro-button-selected-background, var(--loro-button-background, transparent));color:var(--loro-button-selected-color, var(--loro-button-color, var(--loro-nav-button-text, var(--loro-text-strong))));outline:none}.loro-button--danger,.loro-button--danger-color{border-color:color-mix(in srgb,var(--loro-danger-text) 24%,transparent);background:var(--loro-danger-surface);color:var(--loro-danger-text)}.loro-button--navigation.loro-button--danger-color{border-color:var(--loro-button-border-color, transparent);background:var(--loro-button-background, var(--loro-danger-surface));color:var(--loro-button-color, var(--loro-danger-text))}.loro-button--secondary-color.loro-button--primary{background:linear-gradient(135deg,var(--loro-primary-700),var(--loro-primary-900));color:#fff}.loro-button--tertiary-color.loro-button--primary{background:linear-gradient(135deg,color-mix(in srgb,var(--loro-primary-500) 82%,white),var(--loro-primary-700));color:#fff}.loro-button--sm{min-height:var(--loro-button-min-height, 2.35rem);border-radius:var(--loro-button-radius, .65rem);font-size:var(--loro-button-font-size, .82rem)}.loro-button--lg{min-height:var(--loro-button-min-height, 3.65rem);padding:var(--loro-button-padding, .95rem 1.35rem);border-radius:var(--loro-button-radius, 1rem);font-size:var(--loro-button-font-size, 1.08rem)}.loro-button--icon-only{width:var(--loro-button-icon-size, 3rem);min-width:var(--loro-button-icon-size, 3rem);padding:0;aspect-ratio:1}.loro-button:disabled{cursor:not-allowed;opacity:1;transform:none;border-color:var(--loro-button-disabled-border, var(--loro-disabled-border));background:var(--loro-button-disabled-bg, var(--loro-disabled-surface));color:var(--loro-button-disabled-text, var(--loro-disabled-text));box-shadow:var(--loro-button-disabled-shadow, none)}.loro-button--primary:disabled,.loro-button--primary-color:disabled{background:var(--loro-button-disabled-bg, var(--loro-disabled-primary-surface, var(--loro-disabled-surface)));color:var(--loro-button-disabled-text, var(--loro-disabled-primary-text, var(--loro-disabled-text)))}.loro-button--social:disabled{border-color:var(--loro-social-disabled-border, var(--loro-button-disabled-border, var(--loro-disabled-border)));background:var(--loro-social-disabled-surface, var(--loro-button-disabled-bg, var(--loro-disabled-surface)));color:var(--loro-social-disabled-text, var(--loro-button-disabled-text, var(--loro-disabled-text)));box-shadow:var(--loro-social-disabled-shadow, none)}.loro-button:disabled loro-icon,.loro-button:disabled ::ng-deep .loro-icon,.loro-button:disabled ::ng-deep svg{opacity:var(--loro-button-disabled-icon-opacity, .72)!important}.loro-button--loading:disabled{cursor:progress}.loro-button--loading{cursor:progress}@keyframes loro-button-spin{to{transform:rotate(360deg)}}@media(max-width:767.88px){.loro-button--social.loro-button--social-mobile-compact{width:var(--loro-button-icon-size, 3rem);min-width:var(--loro-button-icon-size, 3rem);min-height:var(--loro-button-icon-size, 3rem);margin-inline:auto;padding:0;aspect-ratio:1}.loro-button--social.loro-button--social-mobile-compact .loro-button__label{display:none}}@media(prefers-reduced-motion:reduce){.loro-button{transition:none}.loro-button__spinner{animation-duration:1.4s}}\n"], dependencies: [{ kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroButton, decorators: [{
             type: Component,
             args: [{ selector: 'loro-button', standalone: true, imports: [LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.loro-button-host--full]': "resolvedButtonWidth() === 'full'",
-                    }, template: "<button\n  [type]=\"type()\"\n  [attr.form]=\"formId() || null\"\n  class=\"loro-button\"\n  [class]=\"'loro-button loro-button--' + resolvedTypeButton()\"\n  [class.loro-button--outline]=\"variant() === 'outline'\"\n  [class.loro-button--ghost]=\"variant() === 'ghost'\"\n  [class.loro-button--soft]=\"variant() === 'soft'\"\n  [class.loro-button--social]=\"variant() === 'social'\"\n  [class.loro-button--action]=\"variant() === 'action'\"\n  [class.loro-button--navigation]=\"variant() === 'navigation'\"\n  [class.loro-button--danger]=\"variant() === 'danger'\"\n  [class.loro-button--secondary-color]=\"resolvedColor() === 'secondary'\"\n  [class.loro-button--tertiary-color]=\"resolvedColor() === 'tertiary'\"\n  [class.loro-button--danger-color]=\"resolvedColor() === 'danger'\"\n  [class.loro-button--sm]=\"size() === 'sm'\"\n  [class.loro-button--lg]=\"size() === 'lg'\"\n  [class.loro-button--full]=\"resolvedButtonWidth() === 'full'\"\n  [class.loro-button--icon-only]=\"resolvedIconMode() === 'only-icon'\"\n  [class.loro-button--social-mobile-compact]=\"socialMobileCompact()\"\n  [class.loro-button--selected]=\"selected()\"\n  [class.loro-button--loading]=\"loading()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [attr.aria-description]=\"ariaDescription() || null\"\n  [attr.aria-busy]=\"loading()\"\n  [style.--loro-button-icon-size]=\"resolvedIconButtonSize()\"\n  (click)=\"emitChange()\"\n>\n  @if (showIcon()) {\n    <loro-icon\n      [name]=\"resolvedIcon()!\"\n      [size]=\"iconSize()\"\n      [alt]=\"resolvedText()\"\n      [color]=\"resolvedIconColor()\"\n      [renderMode]=\"resolvedIconRenderMode()\"\n    />\n  }\n\n  @if (showSpinner()) {\n    <span class=\"loro-button__spinner\" aria-hidden=\"true\"></span>\n    <span class=\"loro-button__sr-status\" aria-live=\"polite\">{{ loadingAriaLabel() }}</span>\n  }\n\n  @if (resolvedIconMode() !== 'only-icon') {\n    <span class=\"loro-button__label\">{{ resolvedText() }}</span>\n  }\n</button>\n", styles: [":host{display:inline-flex;width:fit-content;font-family:var(--loro-font-brand)}:host(.loro-button-host--full){display:block;width:100%}.loro-button{display:inline-flex;align-items:center;justify-content:center;gap:.65rem;min-width:0;min-height:var(--loro-button-min-height, 3.25rem);padding:var(--loro-button-padding, .85rem 1.25rem);border:1px solid transparent;border-radius:var(--loro-button-radius, .9rem);background:var(--loro-button-background, var(--loro-surface-muted));color:var(--loro-text-strong);box-shadow:var(--loro-button-shadow, none);font:inherit;font-size:var(--loro-button-font-size, 1rem);font-weight:900;line-height:1.1;white-space:normal;overflow-wrap:anywhere;word-break:break-word;text-align:center;cursor:pointer;transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease,color .15s ease}.loro-button__label{min-width:0}.loro-button__spinner{width:1rem;height:1rem;flex:0 0 auto;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:loro-button-spin .7s linear infinite}.loro-button__sr-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.loro-button:hover:not(:disabled){transform:translateY(-1px)}.loro-button--full{width:100%}.loro-button--primary,.loro-button--primary.loro-button--primary-color{background:linear-gradient(135deg,var(--loro-primary-500),var(--loro-primary-700));color:#fff}.loro-button--secondary,.loro-button--outline{border-color:var(--loro-primary-500);background:transparent;color:var(--loro-primary-700)}.loro-button--tertiary,.loro-button--ghost{background:transparent;color:var(--loro-primary-700)}.loro-button--tertiary{min-height:auto;padding:0;border-radius:.55rem;box-shadow:none}.loro-button--tertiary:hover:not(:disabled){transform:none}.loro-button--tertiary:focus-visible{outline:3px solid color-mix(in srgb,var(--loro-primary-500) 28%,transparent);outline-offset:2px}.loro-button--soft{background:color-mix(in srgb,var(--loro-primary-500) 8%,transparent);color:var(--loro-primary-700)}.loro-button--social{border-color:var(--loro-border-subtle);background:var(--loro-surface);color:var(--loro-text)}.loro-button--action{min-height:var(--loro-button-min-height, 2.75rem);padding:var(--loro-button-padding, 0);border:0;border-radius:var(--loro-button-radius, 50%);background:var(--loro-button-background, transparent);color:var(--loro-button-color, var(--loro-primary-700));box-shadow:var(--loro-button-shadow, none)}.loro-button--action:hover:not(:disabled){background:var(--loro-button-hover-background, color-mix(in srgb, var(--loro-primary) 8%, transparent));transform:translateY(-1px)}.loro-button--action:active:not(:disabled){transform:translateY(1px)}.loro-button--action:focus-visible{outline:3px solid var(--loro-button-focus-ring, color-mix(in srgb, var(--loro-primary) 36%, transparent));outline-offset:3px}.loro-button--social:hover:not(:disabled),.loro-button--social:focus-visible{border-color:var(--loro-primary-500);box-shadow:var(--loro-shadow-soft),0 0 0 3px color-mix(in srgb,var(--loro-primary-500) 14%,transparent)}.loro-button--navigation{justify-content:flex-start;gap:1rem;padding:.5rem;border-color:var(--loro-button-border-color, transparent);border-radius:var(--loro-button-radius, 1rem);color:var(--loro-home-avatar-color);text-align:left}.loro-button--navigation .loro-button__label{flex:1;text-align:left}.loro-button--navigation:hover:not(:disabled):not(.loro-button--danger-color):not(.loro-button--selected),.loro-button--navigation:focus-visible:not(:disabled):not(.loro-button--danger-color):not(.loro-button--selected){background:var(--loro-home-avatar-bg);transform:translateY(-.24rem) scale(1.01)}.loro-button--selected{border-color:var(--loro-button-selected-border-color, var(--loro-button-border-color, transparent));background:var(--loro-button-selected-background, var(--loro-button-background, transparent));color:var(--loro-button-selected-color, var(--loro-button-color, var(--loro-nav-button-text, var(--loro-text-strong))))}.loro-button--navigation.loro-button--selected:hover:not(:disabled),.loro-button--navigation.loro-button--selected:focus-visible:not(:disabled){transform:none;border-color:var(--loro-button-selected-border-color, var(--loro-button-border-color, transparent));background:var(--loro-button-selected-background, var(--loro-button-background, transparent));color:var(--loro-button-selected-color, var(--loro-button-color, var(--loro-nav-button-text, var(--loro-text-strong))));outline:none}.loro-button--danger,.loro-button--danger-color{border-color:color-mix(in srgb,var(--loro-danger-text) 24%,transparent);background:var(--loro-danger-surface);color:var(--loro-danger-text)}.loro-button--navigation.loro-button--danger-color{border-color:var(--loro-button-border-color, transparent);background:var(--loro-button-background, var(--loro-danger-surface));color:var(--loro-button-color, var(--loro-danger-text))}.loro-button--secondary-color.loro-button--primary{background:linear-gradient(135deg,var(--loro-primary-700),var(--loro-primary-900));color:#fff}.loro-button--tertiary-color.loro-button--primary{background:linear-gradient(135deg,color-mix(in srgb,var(--loro-primary-500) 82%,white),var(--loro-primary-700));color:#fff}.loro-button--sm{min-height:var(--loro-button-min-height, 2.35rem);border-radius:var(--loro-button-radius, .65rem);font-size:var(--loro-button-font-size, .82rem)}.loro-button--lg{min-height:var(--loro-button-min-height, 3.65rem);padding:var(--loro-button-padding, .95rem 1.35rem);border-radius:var(--loro-button-radius, 1rem);font-size:var(--loro-button-font-size, 1.08rem)}.loro-button--icon-only{width:var(--loro-button-icon-size, 3rem);min-width:var(--loro-button-icon-size, 3rem);padding:0;aspect-ratio:1}.loro-button:disabled{cursor:not-allowed;opacity:.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"] }]
+                    }, template: "<button\n  [type]=\"type()\"\n  [attr.form]=\"formId() || null\"\n  class=\"loro-button\"\n  [class]=\"'loro-button loro-button--' + resolvedTypeButton()\"\n  [class.loro-button--outline]=\"variant() === 'outline'\"\n  [class.loro-button--ghost]=\"variant() === 'ghost'\"\n  [class.loro-button--soft]=\"variant() === 'soft'\"\n  [class.loro-button--social]=\"variant() === 'social'\"\n  [class.loro-button--action]=\"variant() === 'action'\"\n  [class.loro-button--navigation]=\"variant() === 'navigation'\"\n  [class.loro-button--danger]=\"variant() === 'danger'\"\n  [class.loro-button--secondary-color]=\"resolvedColor() === 'secondary'\"\n  [class.loro-button--tertiary-color]=\"resolvedColor() === 'tertiary'\"\n  [class.loro-button--danger-color]=\"resolvedColor() === 'danger'\"\n  [class.loro-button--sm]=\"size() === 'sm'\"\n  [class.loro-button--lg]=\"size() === 'lg'\"\n  [class.loro-button--full]=\"resolvedButtonWidth() === 'full'\"\n  [class.loro-button--icon-only]=\"resolvedIconMode() === 'only-icon'\"\n  [class.loro-button--social-mobile-compact]=\"socialMobileCompact()\"\n  [class.loro-button--selected]=\"selected()\"\n  [class.loro-button--loading]=\"loading()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [attr.aria-description]=\"ariaDescription() || null\"\n  [attr.aria-busy]=\"loading()\"\n  [style.--loro-button-icon-size]=\"resolvedIconButtonSize()\"\n  (click)=\"emitChange()\"\n>\n  @if (showIcon()) {\n    <loro-icon\n      [name]=\"resolvedIcon()!\"\n      [size]=\"iconSize()\"\n      [alt]=\"resolvedText()\"\n      [color]=\"resolvedIconColor()\"\n      [renderMode]=\"resolvedIconRenderMode()\"\n    />\n  }\n\n  @if (showSpinner()) {\n    <span class=\"loro-button__spinner\" aria-hidden=\"true\"></span>\n    <span class=\"loro-button__sr-status\" aria-live=\"polite\">{{ loadingAriaLabel() }}</span>\n  }\n\n  @if (resolvedIconMode() !== 'only-icon') {\n    <span class=\"loro-button__label\">{{ resolvedText() }}</span>\n  }\n</button>\n", styles: [":host{display:inline-flex;width:fit-content;font-family:var(--loro-font-brand)}:host(.loro-button-host--full){display:block;width:100%}.loro-button{display:inline-flex;align-items:center;justify-content:center;gap:.65rem;min-width:0;min-height:var(--loro-button-min-height, 3.25rem);padding:var(--loro-button-padding, .85rem 1.25rem);border:1px solid transparent;border-radius:var(--loro-button-radius, .9rem);background:var(--loro-button-background, var(--loro-surface-muted));color:var(--loro-text-strong);box-shadow:var(--loro-button-shadow, none);font:inherit;font-size:var(--loro-button-font-size, 1rem);font-weight:900;line-height:1.1;white-space:normal;overflow-wrap:anywhere;word-break:break-word;text-align:center;cursor:pointer;transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease,color .15s ease}.loro-button__label{min-width:0}.loro-button__spinner{width:1rem;height:1rem;flex:0 0 auto;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:loro-button-spin .7s linear infinite}.loro-button__sr-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.loro-button:hover:not(:disabled){transform:translateY(-1px)}.loro-button--full{width:100%}.loro-button--primary,.loro-button--primary.loro-button--primary-color{background:linear-gradient(135deg,var(--loro-primary-500),var(--loro-primary-700));color:#fff}.loro-button--secondary,.loro-button--outline{border-color:var(--loro-primary-500);background:transparent;color:var(--loro-primary-700)}.loro-button--tertiary,.loro-button--ghost{background:transparent;color:var(--loro-primary-700)}.loro-button--tertiary{min-height:auto;padding:0;border-radius:.55rem;box-shadow:none}.loro-button--tertiary:hover:not(:disabled){transform:none}.loro-button--tertiary:focus-visible{outline:3px solid color-mix(in srgb,var(--loro-primary-500) 28%,transparent);outline-offset:2px}.loro-button--soft{background:color-mix(in srgb,var(--loro-primary-500) 8%,transparent);color:var(--loro-primary-700)}.loro-button--social{border-color:var(--loro-border-subtle);background:var(--loro-surface);color:var(--loro-text)}.loro-button--action{min-height:var(--loro-button-min-height, 2.75rem);padding:var(--loro-button-padding, 0);border:0;border-radius:var(--loro-button-radius, 50%);background:var(--loro-button-background, transparent);color:var(--loro-button-color, var(--loro-primary-700));box-shadow:var(--loro-button-shadow, none)}.loro-button--action:hover:not(:disabled){background:var(--loro-button-hover-background, color-mix(in srgb, var(--loro-primary) 8%, transparent));transform:translateY(-1px)}.loro-button--action:active:not(:disabled){transform:translateY(1px)}.loro-button--action:focus-visible{outline:3px solid var(--loro-button-focus-ring, color-mix(in srgb, var(--loro-primary) 36%, transparent));outline-offset:3px}.loro-button--social:hover:not(:disabled),.loro-button--social:focus-visible{border-color:var(--loro-primary-500);box-shadow:var(--loro-shadow-soft),0 0 0 3px color-mix(in srgb,var(--loro-primary-500) 14%,transparent)}.loro-button--navigation{justify-content:flex-start;gap:1rem;padding:.5rem;border-color:var(--loro-button-border-color, transparent);border-radius:var(--loro-button-radius, 1rem);color:var(--loro-home-avatar-color);text-align:left}.loro-button--navigation .loro-button__label{flex:1;text-align:left}.loro-button--navigation:hover:not(:disabled):not(.loro-button--danger-color):not(.loro-button--selected),.loro-button--navigation:focus-visible:not(:disabled):not(.loro-button--danger-color):not(.loro-button--selected){background:var(--loro-home-avatar-bg);transform:translateY(-.24rem) scale(1.01)}.loro-button--selected{border-color:var(--loro-button-selected-border-color, var(--loro-button-border-color, transparent));background:var(--loro-button-selected-background, var(--loro-button-background, transparent));color:var(--loro-button-selected-color, var(--loro-button-color, var(--loro-nav-button-text, var(--loro-text-strong))))}.loro-button--navigation.loro-button--selected:hover:not(:disabled),.loro-button--navigation.loro-button--selected:focus-visible:not(:disabled){transform:none;border-color:var(--loro-button-selected-border-color, var(--loro-button-border-color, transparent));background:var(--loro-button-selected-background, var(--loro-button-background, transparent));color:var(--loro-button-selected-color, var(--loro-button-color, var(--loro-nav-button-text, var(--loro-text-strong))));outline:none}.loro-button--danger,.loro-button--danger-color{border-color:color-mix(in srgb,var(--loro-danger-text) 24%,transparent);background:var(--loro-danger-surface);color:var(--loro-danger-text)}.loro-button--navigation.loro-button--danger-color{border-color:var(--loro-button-border-color, transparent);background:var(--loro-button-background, var(--loro-danger-surface));color:var(--loro-button-color, var(--loro-danger-text))}.loro-button--secondary-color.loro-button--primary{background:linear-gradient(135deg,var(--loro-primary-700),var(--loro-primary-900));color:#fff}.loro-button--tertiary-color.loro-button--primary{background:linear-gradient(135deg,color-mix(in srgb,var(--loro-primary-500) 82%,white),var(--loro-primary-700));color:#fff}.loro-button--sm{min-height:var(--loro-button-min-height, 2.35rem);border-radius:var(--loro-button-radius, .65rem);font-size:var(--loro-button-font-size, .82rem)}.loro-button--lg{min-height:var(--loro-button-min-height, 3.65rem);padding:var(--loro-button-padding, .95rem 1.35rem);border-radius:var(--loro-button-radius, 1rem);font-size:var(--loro-button-font-size, 1.08rem)}.loro-button--icon-only{width:var(--loro-button-icon-size, 3rem);min-width:var(--loro-button-icon-size, 3rem);padding:0;aspect-ratio:1}.loro-button:disabled{cursor:not-allowed;opacity:1;transform:none;border-color:var(--loro-button-disabled-border, var(--loro-disabled-border));background:var(--loro-button-disabled-bg, var(--loro-disabled-surface));color:var(--loro-button-disabled-text, var(--loro-disabled-text));box-shadow:var(--loro-button-disabled-shadow, none)}.loro-button--primary:disabled,.loro-button--primary-color:disabled{background:var(--loro-button-disabled-bg, var(--loro-disabled-primary-surface, var(--loro-disabled-surface)));color:var(--loro-button-disabled-text, var(--loro-disabled-primary-text, var(--loro-disabled-text)))}.loro-button--social:disabled{border-color:var(--loro-social-disabled-border, var(--loro-button-disabled-border, var(--loro-disabled-border)));background:var(--loro-social-disabled-surface, var(--loro-button-disabled-bg, var(--loro-disabled-surface)));color:var(--loro-social-disabled-text, var(--loro-button-disabled-text, var(--loro-disabled-text)));box-shadow:var(--loro-social-disabled-shadow, none)}.loro-button:disabled loro-icon,.loro-button:disabled ::ng-deep .loro-icon,.loro-button:disabled ::ng-deep svg{opacity:var(--loro-button-disabled-icon-opacity, .72)!important}.loro-button--loading:disabled{cursor:progress}.loro-button--loading{cursor:progress}@keyframes loro-button-spin{to{transform:rotate(360deg)}}@media(max-width:767.88px){.loro-button--social.loro-button--social-mobile-compact{width:var(--loro-button-icon-size, 3rem);min-width:var(--loro-button-icon-size, 3rem);min-height:var(--loro-button-icon-size, 3rem);margin-inline:auto;padding:0;aspect-ratio:1}.loro-button--social.loro-button--social-mobile-compact .loro-button__label{display:none}}@media(prefers-reduced-motion:reduce){.loro-button{transition:none}.loro-button__spinner{animation-duration:1.4s}}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconContent", required: false }] }], iconMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconMode", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], iconButtonSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconButtonSize", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], socialMobileCompact: [{ type: i0.Input, args: [{ isSignal: true, alias: "socialMobileCompact", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], typeButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeButton", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], buttonWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonWidth", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], formId: [{ type: i0.Input, args: [{ isSignal: true, alias: "formId", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescription", required: false }] }], buttonClick: [{ type: i0.Output, args: ["buttonClick"] }], change: [{ type: i0.Output, args: ["change"] }], sanChange: [{ type: i0.Output, args: ["sanChange"] }] } });
 
 const DEFAULT_MAIN_ITEMS = [
@@ -1361,8 +1361,8 @@ const DEFAULT_UTILITY_ITEMS = [
 ];
 class LoroAppNav {
     haptics = inject(LoroHapticsService);
-    draggedMobilePosition = signal(null, ...(ngDevMode ? [{ debugName: "draggedMobilePosition" }] : /* istanbul ignore next */ []));
     draggedMobileIndex = signal(null, ...(ngDevMode ? [{ debugName: "draggedMobileIndex" }] : /* istanbul ignore next */ []));
+    mobilePointerActive = signal(false, ...(ngDevMode ? [{ debugName: "mobilePointerActive" }] : /* istanbul ignore next */ []));
     activePointerId = null;
     suppressNextMobileClick = false;
     items = input(DEFAULT_MAIN_ITEMS, ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
@@ -1380,14 +1380,11 @@ class LoroAppNav {
         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 */ []));
+    mobileSliderPosition = computed(() => this.mobileItemIndexToVisualSlot(this.selectedMobileIndex()), ...(ngDevMode ? [{ debugName: "mobileSliderPosition" }] : /* istanbul ignore next */ []));
+    isMobileDragging = computed(() => this.mobilePointerActive(), ...(ngDevMode ? [{ debugName: "isMobileDragging" }] : /* istanbul ignore next */ []));
     mobileItemCount = computed(() => this.mobileItems().length, ...(ngDevMode ? [{ debugName: "mobileItemCount" }] : /* istanbul ignore next */ []));
     selectedMobileItemId = computed(() => this.mobileItems()[this.selectedMobileIndex()]?.id ?? '', ...(ngDevMode ? [{ debugName: "selectedMobileItemId" }] : /* istanbul ignore next */ []));
     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) {
@@ -1409,13 +1406,13 @@ class LoroAppNav {
         }
         const nav = event.currentTarget;
         this.activePointerId = event.pointerId;
+        this.mobilePointerActive.set(true);
         nav.setPointerCapture(event.pointerId);
-        const slotPosition = this.getMobileVisualSlotPosition(event.clientX, nav);
-        const index = this.getNearestEnabledMobileIndex(slotPosition);
+        const index = this.getNearestEnabledMobileIndex(this.getMobileVisualSlotPosition(event.clientX, nav));
         if (index === null) {
+            this.releaseMobilePointer(nav, event.pointerId);
             return;
         }
-        this.draggedMobilePosition.set(slotPosition);
         this.draggedMobileIndex.set(index);
         this.haptics.selection();
         event.preventDefault();
@@ -1427,7 +1424,6 @@ class LoroAppNav {
         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();
@@ -1443,19 +1439,14 @@ class LoroAppNav {
         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(() => {
@@ -1463,7 +1454,6 @@ class LoroAppNav {
         });
         this.emitMainItem(item, false);
         globalThis.queueMicrotask(() => {
-            this.draggedMobilePosition.set(null);
             this.draggedMobileIndex.set(null);
         });
         event.preventDefault();
@@ -1473,7 +1463,6 @@ class LoroAppNav {
             return;
         }
         this.releaseMobilePointer(event.currentTarget, event.pointerId);
-        this.draggedMobilePosition.set(null);
         this.draggedMobileIndex.set(null);
     }
     onUtilityItemClick(item) {
@@ -1526,13 +1515,14 @@ class LoroAppNav {
             nav.releasePointerCapture(pointerId);
         }
         this.activePointerId = null;
+        this.mobilePointerActive.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroAppNav, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroAppNav, isStandalone: true, selector: "loro-app-nav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, utilityItems: { classPropertyName: "utilityItems", publicName: "utilityItems", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, showUtilityItems: { classPropertyName: "showUtilityItems", publicName: "showUtilityItems", isSignal: true, isRequired: false, transformFunction: null }, compactDesktop: { classPropertyName: "compactDesktop", publicName: "compactDesktop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", utilityItemClick: "utilityItemClick", navItemClick: "navItemClick" }, ngImport: i0, template: "<aside class=\"loro-app-nav\">\n  <div class=\"loro-app-nav__desktop\">\n    <div class=\"loro-app-nav__surface\" [class.loro-app-nav__surface--compact]=\"compactDesktop()\">\n      <div class=\"loro-app-nav__brand\">\n        <loro-image\n          class=\"loro-app-nav__brand-image\"\n          name=\"image-loro-apaisado\"\n          alt=\"AlLoro\"\n          width=\"10rem\"\n          height=\"auto\"\n        />\n      </div>\n\n      <nav class=\"loro-app-nav__nav\" [attr.aria-label]=\"ariaLabel()\">\n        @for (item of desktopItems(); track item.id) {\n          <loro-button\n            class=\"loro-app-nav__item\"\n            [class.loro-app-nav__item--active]=\"item.active\"\n            [class.loro-app-nav__item--disabled]=\"item.disabled\"\n            [class.loro-app-nav__item--logout]=\"item.id === 'logout'\"\n            [text]=\"item.label\"\n            [icon]=\"item.icon\"\n            iconMode=\"with-icon\"\n            iconColor=\"default\"\n            variant=\"navigation\"\n            [selected]=\"!!item.active\"\n            [color]=\"item.id === 'logout' ? 'danger' : 'primary'\"\n            type=\"button\"\n            [fullWidth]=\"true\"\n            [ariaLabel]=\"item.label\"\n            [disabled]=\"!!item.disabled\"\n            (buttonClick)=\"onMainItemClick(item)\"\n          >\n            @if (item.badge !== null && item.badge !== undefined && item.badge !== '') {\n              <span class=\"loro-app-nav__badge\">{{ item.badge }}</span>\n            }\n          </loro-button>\n        }\n      </nav>\n\n      <div class=\"loro-app-nav__spacer\"></div>\n\n      @if (showUtilityItems() && utilityItems().length > 0) {\n        <div class=\"loro-app-nav__divider\" aria-hidden=\"true\"></div>\n\n        <nav\n          class=\"loro-app-nav__nav loro-app-nav__nav--utility\"\n          aria-label=\"Navegaci\u00F3n secundaria\"\n        >\n          @for (item of utilityItems(); track item.id) {\n            <loro-button\n              class=\"loro-app-nav__item\"\n              [class.loro-app-nav__item--active]=\"item.active\"\n              [class.loro-app-nav__item--disabled]=\"item.disabled\"\n              [class.loro-app-nav__item--logout]=\"item.id === 'logout'\"\n              [text]=\"item.label\"\n              [icon]=\"item.icon\"\n              iconMode=\"with-icon\"\n              iconColor=\"default\"\n              variant=\"navigation\"\n              [selected]=\"!!item.active\"\n              [color]=\"item.id === 'logout' ? 'danger' : 'primary'\"\n              type=\"button\"\n              [fullWidth]=\"true\"\n              [ariaLabel]=\"item.label\"\n              [disabled]=\"!!item.disabled\"\n              (buttonClick)=\"onUtilityItemClick(item)\"\n            >\n              @if (item.badge !== null && item.badge !== undefined && item.badge !== '') {\n                <span class=\"loro-app-nav__badge\">{{ item.badge }}</span>\n              }\n            </loro-button>\n          }\n        </nav>\n      }\n    </div>\n  </div>\n\n  <nav\n    ngToolbar\n    class=\"loro-app-nav__mobile\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [style.--loro-mobile-slider-position]=\"mobileSliderPosition()\"\n    [class.loro-app-nav__mobile--dragging]=\"isMobileDragging()\"\n    [class.loro-app-nav__mobile--with-labels]=\"true\"\n    [style.--loro-mobile-item-count]=\"mobileItemCount()\"\n    [style.--loro-mobile-visual-slot-count]=\"mobileVisualSlotCount()\"\n    (pointerdown)=\"onMobilePointerDown($event)\"\n    (pointermove)=\"onMobilePointerMove($event)\"\n    (pointerup)=\"onMobilePointerUp($event)\"\n    (pointercancel)=\"onMobilePointerCancel($event)\"\n  >\n    <span\n      class=\"loro-app-nav__mobile-slider\"\n      [class.loro-app-nav__mobile-slider--scan]=\"selectedMobileItemId() === 'scan'\"\n      aria-hidden=\"true\"></span>\n\n    @for (item of mobileItems(); track item.id; let index = $index) {\n      <button\n        ngToolbarWidget\n        type=\"button\"\n        class=\"loro-app-nav__mobile-item\"\n        [style.grid-column]=\"mobileItemGridColumn(index)\"\n        [class.loro-app-nav__mobile-item--active]=\"isMobileItemVisualActive(index)\"\n        [class.loro-app-nav__mobile-item--scan-active]=\"item.id === 'scan' && isMobileItemVisualActive(index)\"\n        [class.loro-app-nav__mobile-item--disabled]=\"item.disabled\"\n        [attr.aria-label]=\"item.label\"\n        [attr.aria-current]=\"item.active ? 'page' : null\"\n        [value]=\"item.id\"\n        [disabled]=\"!!item.disabled\"\n        (click)=\"onMobileItemClick(item)\"\n      >\n        <loro-icon\n          class=\"loro-app-nav__mobile-icon\"\n          [name]=\"item.icon\"\n          [size]=\"24\"\n          color=\"default\"\n          [alt]=\"item.label\"\n        />\n        <span class=\"loro-app-nav__mobile-label\">{{ item.label }}</span>\n      </button>\n    }\n  </nav>\n</aside>\n", styles: [":host{display:block;width:100%;height:100%}.loro-app-nav{width:100%;height:100%}.loro-app-nav__desktop{display:none;height:100%}.loro-app-nav__surface{width:100%;max-width:none;display:flex;height:100%;flex-direction:column;gap:1.1rem;padding:1.75rem 1.35rem 1.5rem;background:var(--loro-nav-desktop-surface, var(--loro-shell-header-surface));border:1px solid var(--loro-nav-desktop-border, var(--loro-border-soft))}html[data-theme=dark] .loro-app-nav__surface{background:var(--loro-nav-desktop-surface, rgba(24, 28, 32, .78));border-color:var(--loro-nav-desktop-border, rgba(255, 255, 255, .08));box-shadow:var(--loro-nav-desktop-shadow, none)}.loro-app-nav__surface--compact{gap:.9rem;padding:1.25rem 1rem 1.15rem}.loro-app-nav__surface--compact .loro-app-nav__brand{min-height:3.65rem;padding-bottom:1.2rem}.loro-app-nav__surface--compact .loro-app-nav__item{--loro-button-min-height: 3.75rem}.loro-app-nav__brand{display:flex;align-items:center;min-height:4.25rem;padding:.35rem .55rem .85rem}.loro-app-nav__brand-image{display:block}.loro-app-nav__nav{display:flex;flex-direction:column;gap:.75rem}.loro-app-nav__item{--loro-button-min-height: 4.25rem;--loro-button-padding: 1rem 1.2rem;--loro-button-radius: 1rem;--loro-button-font-size: 1rem;--loro-button-background: var(--loro-nav-button-background, transparent);--loro-button-border-color: var(--loro-nav-button-border, transparent);--loro-button-color: var(--loro-nav-button-text, var(--loro-text-strong));--loro-button-hover-background: var(--loro-nav-button-hover-bg, var(--loro-nav-hover-bg));--loro-button-hover-border-color: var(--loro-nav-button-hover-border, transparent);--loro-button-hover-color: var(--loro-nav-button-hover-text, var(--loro-nav-button-text, var(--loro-text-strong)));--loro-button-hover-shadow: var(--loro-nav-button-hover-shadow, none);display:block;width:100%;color:var(--loro-nav-button-text, var(--loro-text-strong))}.loro-app-nav__item--active{--loro-button-selected-background: var(--loro-nav-button-active-bg, var(--loro-nav-active-bg));--loro-button-selected-border-color: var(--loro-nav-button-active-border, var(--loro-nav-active-border));--loro-button-selected-color: var(--loro-nav-button-active-text, var(--loro-primary-500));--loro-button-selected-shadow: var(--loro-nav-button-active-shadow, inset .35rem 0 0 var(--loro-primary-500))}.loro-app-nav__item--logout{--loro-button-background: var(--loro-nav-button-danger-bg, var(--loro-danger-surface));--loro-button-border-color: var(--loro-nav-button-danger-border, transparent);--loro-button-color: var(--loro-nav-button-danger-text, var(--loro-danger-text));--loro-button-hover-background: var(--loro-nav-button-danger-bg, var(--loro-danger-surface));--loro-button-hover-border-color: var(--loro-nav-button-danger-border, transparent);--loro-button-hover-color: var(--loro-nav-button-danger-text, var(--loro-danger-text));--loro-button-shadow: none;--loro-button-hover-shadow: none}.loro-app-nav__item--disabled,.loro-app-nav__mobile-item--disabled{cursor:not-allowed;opacity:.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-slider--scan{background:var(--loro-nav-mobile-scan-indicator, linear-gradient(180deg, rgba(132, 83, 255, .98) 0%, rgba(94, 47, 224, .96) 100%));box-shadow:var(--loro-nav-mobile-scan-indicator-shadow, inset 0 1px 0 rgba(255, 255, 255, .38), 0 .85rem 1.65rem rgba(108, 60, 255, .28))}.loro-app-nav__mobile-item--scan-active{color:var(--loro-nav-mobile-scan-active-color, #fff)!important}.loro-app-nav__mobile--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, selector: "loro-image", inputs: ["name", "alt", "size", "width", "height", "fit"] }, { kind: "component", type: LoroButton, selector: "loro-button", inputs: ["label", "text", "icon", "iconContent", "iconMode", "iconSize", "iconButtonSize", "iconColor", "socialMobileCompact", "selected", "variant", "typeButton", "color", "size", "fullWidth", "buttonWidth", "disabled", "loading", "type", "formId", "ariaLabel", "ariaDescription"], outputs: ["buttonClick", "change", "sanChange"] }, { kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroAppNav, isStandalone: true, selector: "loro-app-nav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, utilityItems: { classPropertyName: "utilityItems", publicName: "utilityItems", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, showUtilityItems: { classPropertyName: "showUtilityItems", publicName: "showUtilityItems", isSignal: true, isRequired: false, transformFunction: null }, compactDesktop: { classPropertyName: "compactDesktop", publicName: "compactDesktop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", utilityItemClick: "utilityItemClick", navItemClick: "navItemClick" }, ngImport: i0, template: "<aside class=\"loro-app-nav\">\n  <div class=\"loro-app-nav__desktop\">\n    <div class=\"loro-app-nav__surface\" [class.loro-app-nav__surface--compact]=\"compactDesktop()\">\n      <div class=\"loro-app-nav__brand\">\n        <loro-image\n          class=\"loro-app-nav__brand-image\"\n          name=\"image-loro-apaisado\"\n          alt=\"AlLoro\"\n          width=\"10rem\"\n          height=\"auto\"\n        />\n      </div>\n\n      <nav class=\"loro-app-nav__nav\" [attr.aria-label]=\"ariaLabel()\">\n        @for (item of desktopItems(); track item.id) {\n          <loro-button\n            class=\"loro-app-nav__item\"\n            [class.loro-app-nav__item--active]=\"item.active\"\n            [class.loro-app-nav__item--disabled]=\"item.disabled\"\n            [class.loro-app-nav__item--logout]=\"item.id === 'logout'\"\n            [text]=\"item.label\"\n            [icon]=\"item.icon\"\n            iconMode=\"with-icon\"\n            iconColor=\"default\"\n            variant=\"navigation\"\n            [selected]=\"!!item.active\"\n            [color]=\"item.id === 'logout' ? 'danger' : 'primary'\"\n            type=\"button\"\n            [fullWidth]=\"true\"\n            [ariaLabel]=\"item.label\"\n            [disabled]=\"!!item.disabled\"\n            (buttonClick)=\"onMainItemClick(item)\"\n          >\n            @if (item.badge !== null && item.badge !== undefined && item.badge !== '') {\n              <span class=\"loro-app-nav__badge\">{{ item.badge }}</span>\n            }\n          </loro-button>\n        }\n      </nav>\n\n      <div class=\"loro-app-nav__spacer\"></div>\n\n      @if (showUtilityItems() && utilityItems().length > 0) {\n        <div class=\"loro-app-nav__divider\" aria-hidden=\"true\"></div>\n\n        <nav\n          class=\"loro-app-nav__nav loro-app-nav__nav--utility\"\n          aria-label=\"Navegaci\u00F3n secundaria\"\n        >\n          @for (item of utilityItems(); track item.id) {\n            <loro-button\n              class=\"loro-app-nav__item\"\n              [class.loro-app-nav__item--active]=\"item.active\"\n              [class.loro-app-nav__item--disabled]=\"item.disabled\"\n              [class.loro-app-nav__item--logout]=\"item.id === 'logout'\"\n              [text]=\"item.label\"\n              [icon]=\"item.icon\"\n              iconMode=\"with-icon\"\n              iconColor=\"default\"\n              variant=\"navigation\"\n              [selected]=\"!!item.active\"\n              [color]=\"item.id === 'logout' ? 'danger' : 'primary'\"\n              type=\"button\"\n              [fullWidth]=\"true\"\n              [ariaLabel]=\"item.label\"\n              [disabled]=\"!!item.disabled\"\n              (buttonClick)=\"onUtilityItemClick(item)\"\n            >\n              @if (item.badge !== null && item.badge !== undefined && item.badge !== '') {\n                <span class=\"loro-app-nav__badge\">{{ item.badge }}</span>\n              }\n            </loro-button>\n          }\n        </nav>\n      }\n    </div>\n  </div>\n\n  <nav\n    ngToolbar\n    class=\"loro-app-nav__mobile\"\n    data-horizontal-gesture\n    [attr.aria-label]=\"ariaLabel()\"\n    [style.--loro-mobile-slider-position]=\"mobileSliderPosition()\"\n    [class.loro-app-nav__mobile--dragging]=\"isMobileDragging()\"\n    [class.loro-app-nav__mobile--with-labels]=\"true\"\n    [style.--loro-mobile-item-count]=\"mobileItemCount()\"\n    [style.--loro-mobile-visual-slot-count]=\"mobileVisualSlotCount()\"\n    (pointerdown)=\"onMobilePointerDown($event)\"\n    (pointermove)=\"onMobilePointerMove($event)\"\n    (pointerup)=\"onMobilePointerUp($event)\"\n    (pointercancel)=\"onMobilePointerCancel($event)\"\n  >\n    <span\n      class=\"loro-app-nav__mobile-slider\"\n      [class.loro-app-nav__mobile-slider--scan]=\"selectedMobileItemId() === 'scan'\"\n      aria-hidden=\"true\"></span>\n\n    @for (item of mobileItems(); track item.id; let index = $index) {\n      <button\n        ngToolbarWidget\n        type=\"button\"\n        class=\"loro-app-nav__mobile-item\"\n        [style.grid-column]=\"mobileItemGridColumn(index)\"\n        [class.loro-app-nav__mobile-item--active]=\"isMobileItemVisualActive(index)\"\n        [class.loro-app-nav__mobile-item--scan-active]=\"item.id === 'scan' && isMobileItemVisualActive(index)\"\n        [class.loro-app-nav__mobile-item--disabled]=\"item.disabled\"\n        [attr.aria-label]=\"item.label\"\n        [attr.aria-current]=\"item.active ? 'page' : null\"\n        [value]=\"item.id\"\n        [disabled]=\"!!item.disabled\"\n        (click)=\"onMobileItemClick(item)\"\n      >\n        <loro-icon\n          class=\"loro-app-nav__mobile-icon\"\n          [name]=\"item.icon\"\n          [size]=\"24\"\n          color=\"default\"\n          [alt]=\"item.label\"\n        />\n        <span class=\"loro-app-nav__mobile-label\">{{ item.label }}</span>\n      </button>\n    }\n  </nav>\n</aside>\n", styles: [":host{display:block;width:100%;height:100%}.loro-app-nav{width:100%;height:100%}.loro-app-nav__desktop{display:none;height:100%}.loro-app-nav__surface{width:100%;max-width:none;display:flex;height:100%;flex-direction:column;gap:1.1rem;padding:1.75rem 1.35rem 1.5rem;background:var(--loro-nav-desktop-surface, var(--loro-shell-header-surface));border:1px solid var(--loro-nav-desktop-border, var(--loro-border-soft))}html[data-theme=dark] .loro-app-nav__surface{background:var(--loro-nav-desktop-surface, rgba(24, 28, 32, .78));border-color:var(--loro-nav-desktop-border, rgba(255, 255, 255, .08));box-shadow:var(--loro-nav-desktop-shadow, none)}.loro-app-nav__surface--compact{gap:.9rem;padding:1.25rem 1rem 1.15rem}.loro-app-nav__surface--compact .loro-app-nav__brand{min-height:3.65rem;padding-bottom:1.2rem}.loro-app-nav__surface--compact .loro-app-nav__item{--loro-button-min-height: 3.75rem}.loro-app-nav__brand{display:flex;align-items:center;min-height:4.25rem;padding:.35rem .55rem .85rem}.loro-app-nav__brand-image{display:block}.loro-app-nav__nav{display:flex;flex-direction:column;gap:.75rem}.loro-app-nav__item{--loro-button-min-height: 4.25rem;--loro-button-padding: 1rem 1.2rem;--loro-button-radius: 1rem;--loro-button-font-size: 1rem;--loro-button-background: var(--loro-nav-button-background, transparent);--loro-button-border-color: var(--loro-nav-button-border, transparent);--loro-button-color: var(--loro-nav-button-text, var(--loro-text-strong));--loro-button-hover-background: var(--loro-nav-button-hover-bg, var(--loro-nav-hover-bg));--loro-button-hover-border-color: var(--loro-nav-button-hover-border, transparent);--loro-button-hover-color: var(--loro-nav-button-hover-text, var(--loro-nav-button-text, var(--loro-text-strong)));--loro-button-hover-shadow: var(--loro-nav-button-hover-shadow, none);display:block;width:100%;color:var(--loro-nav-button-text, var(--loro-text-strong))}.loro-app-nav__item--active{--loro-button-selected-background: var(--loro-nav-button-active-bg, var(--loro-nav-active-bg));--loro-button-selected-border-color: var(--loro-nav-button-active-border, var(--loro-nav-active-border));--loro-button-selected-color: var(--loro-nav-button-active-text, var(--loro-primary-500));--loro-button-selected-shadow: var(--loro-nav-button-active-shadow, inset .35rem 0 0 var(--loro-primary-500))}.loro-app-nav__item--logout{--loro-button-background: var(--loro-nav-button-danger-bg, var(--loro-danger-surface));--loro-button-border-color: var(--loro-nav-button-danger-border, transparent);--loro-button-color: var(--loro-nav-button-danger-text, var(--loro-danger-text));--loro-button-hover-background: var(--loro-nav-button-danger-bg, var(--loro-danger-surface));--loro-button-hover-border-color: var(--loro-nav-button-danger-border, transparent);--loro-button-hover-color: var(--loro-nav-button-danger-text, var(--loro-danger-text));--loro-button-shadow: none;--loro-button-hover-shadow: none}.loro-app-nav__item--disabled,.loro-app-nav__mobile-item--disabled{cursor:not-allowed;opacity:1}.loro-app-nav__item--disabled{--loro-button-disabled-bg: var(--loro-disabled-surface);--loro-button-disabled-border: var(--loro-disabled-border);--loro-button-disabled-text: var(--loro-disabled-text)}.loro-app-nav__mobile-item--disabled{color:var(--loro-disabled-text)}.loro-app-nav__label,.loro-app-nav__mobile-label{color:inherit}.loro-app-nav__label{font-size:.98rem;font-weight:700;color:inherit}.loro-app-nav__badge{margin-left:auto;min-width:1.5rem;padding:.125rem .5rem;border-radius:999px;background:#ffffff24;color:inherit;font-size:.75rem;font-weight:700;text-align:center;box-shadow:inset 0 1px #ffffff14}.loro-app-nav__spacer{flex:1}.loro-app-nav__divider{height:1px;margin:.65rem 0 .9rem;background:var(--loro-nav-divider)}.loro-app-nav__nav--utility{margin-top:auto}.loro-app-nav__mobile{position:fixed;left:50%;bottom:max(1.25rem,env(safe-area-inset-bottom,0px) * .28);z-index:70;display:grid;grid-template-columns:repeat(var(--loro-mobile-visual-slot-count, 4),minmax(0,1fr));width:min(76vw - max(1rem,var(--app-shell-mobile-gutter, 1rem) * .75),19rem);gap:0;margin:0;transform:translate(-50%);padding:0;overflow:hidden;border:1px solid var(--loro-nav-mobile-border, rgba(43, 35, 80, .08));border-radius:999px;isolation:isolate;background:var(--loro-nav-mobile-glass-surface, rgba(255, 255, 255, .68));box-shadow:var(--loro-nav-mobile-surface-shadow, 0 8px 24px rgba(28, 32, 48, .1));backdrop-filter:blur(var(--loro-nav-mobile-glass-blur, 24px)) saturate(1.32);-webkit-backdrop-filter:blur(var(--loro-nav-mobile-glass-blur, 24px)) saturate(1.32);touch-action:pan-y;contain:layout paint;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;transition:background .22s ease,border-color .22s ease,box-shadow .22s ease}.loro-app-nav__mobile-item{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:3.58rem;gap:.18rem;padding:.35rem .15rem;border:0;border-radius:999px;outline:0;background:transparent;color:var(--loro-nav-mobile-icon, var(--loro-text));cursor:pointer;appearance:none;-webkit-appearance:none;opacity:1;visibility:visible;transition:transform .22s cubic-bezier(.22,1,.36,1);-webkit-tap-highlight-color:transparent}.loro-app-nav__mobile-item:hover:not(.loro-app-nav__mobile-item--active),.loro-app-nav__mobile-item:active:not(.loro-app-nav__mobile-item--active),.loro-app-nav__mobile-item:focus:not(.loro-app-nav__mobile-item--active){background:transparent;color:var(--loro-nav-mobile-icon, var(--loro-text))}.loro-app-nav__mobile-item--active{background:transparent;color:var(--loro-nav-mobile-icon, var(--loro-text))}.loro-app-nav__mobile-item:focus-visible{outline:2px solid var(--loro-focus-ring);outline-offset:-4px}.loro-app-nav__mobile-item:disabled{cursor:not-allowed;opacity:1;color:var(--loro-disabled-text)}.loro-app-nav__mobile-icon{position:relative;z-index:3;display:inline-flex;align-items:center;justify-content:center;color:inherit!important;opacity:1!important;visibility:visible!important;pointer-events:none;mix-blend-mode:normal;transform:scale(.94);transform-origin:center}.loro-app-nav__mobile-item ::ng-deep .loro-icon,.loro-app-nav__mobile-item ::ng-deep svg{display:block!important;color:inherit!important;opacity:1!important;visibility:visible!important;pointer-events:none!important}.loro-app-nav__mobile-item ::ng-deep .loro-icon__mask{background-color:currentColor!important;opacity:1!important;visibility:visible!important}.loro-app-nav__mobile-item ::ng-deep svg [fill]:not([fill=none]){fill:currentColor!important}.loro-app-nav__mobile-item ::ng-deep svg [stroke]:not([stroke=none]){stroke:currentColor!important}.loro-app-nav__mobile-slider{position:absolute;inset-block:0;left:0;z-index:1;width:calc(100% / var(--loro-mobile-visual-slot-count, 4));border:0;border-radius:999px;background:var(--loro-nav-mobile-indicator, linear-gradient(180deg, rgba(227, 229, 233, .96) 0%, rgba(214, 217, 223, .92) 100%));box-shadow:var(--loro-nav-mobile-indicator-shadow, inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 5px rgba(21, 28, 42, .06));transform:translate3d(calc(var(--loro-mobile-slider-position, 0) * 100%),0,0);will-change:transform;transition:transform .26s cubic-bezier(.22,1,.36,1);pointer-events:none}.loro-app-nav__mobile--dragging .loro-app-nav__mobile-slider{transition:transform 1ms linear}.loro-app-nav__mobile-slider--scan{background:var(--loro-nav-mobile-scan-indicator, linear-gradient(180deg, rgba(132, 83, 255, .98) 0%, rgba(94, 47, 224, .96) 100%));box-shadow:var(--loro-nav-mobile-scan-indicator-shadow, inset 0 1px 0 rgba(255, 255, 255, .38), 0 .85rem 1.65rem rgba(108, 60, 255, .28))}.loro-app-nav__mobile-item--scan-active{color:var(--loro-nav-mobile-scan-active-color, #fff)!important}.loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active):hover,.loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active):active{color:var(--loro-nav-mobile-icon, var(--loro-text))!important}.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active),.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active) .loro-app-nav__mobile-icon,.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active) ::ng-deep .loro-icon,.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active) ::ng-deep svg{color:var(--loro-nav-mobile-icon, var(--loro-text))!important;opacity:1!important;visibility:visible!important}.loro-app-nav__mobile-label{display:block;max-width:100%;overflow:hidden;color:inherit;font-size:.625rem;font-weight:700;line-height:1.1;text-align:center;text-overflow:ellipsis;white-space:nowrap;opacity:0;transform:translateY(.08rem);transition:opacity .18s ease,transform .18s ease}.loro-app-nav__mobile--with-labels{width:min(92vw - max(1rem,var(--app-shell-mobile-gutter, 1rem) * .75),24rem)}.loro-app-nav__mobile--with-labels .loro-app-nav__mobile-item{min-height:4.4rem;padding-top:.7rem}.loro-app-nav__mobile--with-labels .loro-app-nav__mobile-label{opacity:1;transform:translateY(0)}@media(max-width:479.99px)and (orientation:portrait){:host{height:auto}.loro-app-nav{height:auto;padding:0}.loro-app-nav__desktop{height:auto}}@media(min-width:1024px){:host,.loro-app-nav,.loro-app-nav__desktop{height:100%}.loro-app-nav__desktop{display:block}.loro-app-nav__mobile{display:none}}@media(prefers-reduced-motion:reduce){.loro-app-nav__mobile-slider,.loro-app-nav__mobile-item,.loro-app-nav__mobile-item ::ng-deep .loro-icon{transition-duration:1ms}}\n"], dependencies: [{ kind: "directive", type: Toolbar, selector: "[ngToolbar]", inputs: ["orientation", "softDisabled", "disabled", "wrap", "values"], outputs: ["valuesChange"], exportAs: ["ngToolbar"] }, { kind: "directive", type: ToolbarWidget, selector: "[ngToolbarWidget]", inputs: ["id", "disabled", "value"], exportAs: ["ngToolbarWidget"] }, { kind: "component", type: LoroImage, selector: "loro-image", inputs: ["name", "alt", "size", "width", "height", "fit"] }, { kind: "component", type: LoroButton, selector: "loro-button", inputs: ["label", "text", "icon", "iconContent", "iconMode", "iconSize", "iconButtonSize", "iconColor", "socialMobileCompact", "selected", "variant", "typeButton", "color", "size", "fullWidth", "buttonWidth", "disabled", "loading", "type", "formId", "ariaLabel", "ariaDescription"], outputs: ["buttonClick", "change", "sanChange"] }, { kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroAppNav, decorators: [{
             type: Component,
-            args: [{ selector: 'loro-app-nav', standalone: true, imports: [Toolbar, ToolbarWidget, LoroImage, LoroButton, LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<aside class=\"loro-app-nav\">\n  <div class=\"loro-app-nav__desktop\">\n    <div class=\"loro-app-nav__surface\" [class.loro-app-nav__surface--compact]=\"compactDesktop()\">\n      <div class=\"loro-app-nav__brand\">\n        <loro-image\n          class=\"loro-app-nav__brand-image\"\n          name=\"image-loro-apaisado\"\n          alt=\"AlLoro\"\n          width=\"10rem\"\n          height=\"auto\"\n        />\n      </div>\n\n      <nav class=\"loro-app-nav__nav\" [attr.aria-label]=\"ariaLabel()\">\n        @for (item of desktopItems(); track item.id) {\n          <loro-button\n            class=\"loro-app-nav__item\"\n            [class.loro-app-nav__item--active]=\"item.active\"\n            [class.loro-app-nav__item--disabled]=\"item.disabled\"\n            [class.loro-app-nav__item--logout]=\"item.id === 'logout'\"\n            [text]=\"item.label\"\n            [icon]=\"item.icon\"\n            iconMode=\"with-icon\"\n            iconColor=\"default\"\n            variant=\"navigation\"\n            [selected]=\"!!item.active\"\n            [color]=\"item.id === 'logout' ? 'danger' : 'primary'\"\n            type=\"button\"\n            [fullWidth]=\"true\"\n            [ariaLabel]=\"item.label\"\n            [disabled]=\"!!item.disabled\"\n            (buttonClick)=\"onMainItemClick(item)\"\n          >\n            @if (item.badge !== null && item.badge !== undefined && item.badge !== '') {\n              <span class=\"loro-app-nav__badge\">{{ item.badge }}</span>\n            }\n          </loro-button>\n        }\n      </nav>\n\n      <div class=\"loro-app-nav__spacer\"></div>\n\n      @if (showUtilityItems() && utilityItems().length > 0) {\n        <div class=\"loro-app-nav__divider\" aria-hidden=\"true\"></div>\n\n        <nav\n          class=\"loro-app-nav__nav loro-app-nav__nav--utility\"\n          aria-label=\"Navegaci\u00F3n secundaria\"\n        >\n          @for (item of utilityItems(); track item.id) {\n            <loro-button\n              class=\"loro-app-nav__item\"\n              [class.loro-app-nav__item--active]=\"item.active\"\n              [class.loro-app-nav__item--disabled]=\"item.disabled\"\n              [class.loro-app-nav__item--logout]=\"item.id === 'logout'\"\n              [text]=\"item.label\"\n              [icon]=\"item.icon\"\n              iconMode=\"with-icon\"\n              iconColor=\"default\"\n              variant=\"navigation\"\n              [selected]=\"!!item.active\"\n              [color]=\"item.id === 'logout' ? 'danger' : 'primary'\"\n              type=\"button\"\n              [fullWidth]=\"true\"\n              [ariaLabel]=\"item.label\"\n              [disabled]=\"!!item.disabled\"\n              (buttonClick)=\"onUtilityItemClick(item)\"\n            >\n              @if (item.badge !== null && item.badge !== undefined && item.badge !== '') {\n                <span class=\"loro-app-nav__badge\">{{ item.badge }}</span>\n              }\n            </loro-button>\n          }\n        </nav>\n      }\n    </div>\n  </div>\n\n  <nav\n    ngToolbar\n    class=\"loro-app-nav__mobile\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [style.--loro-mobile-slider-position]=\"mobileSliderPosition()\"\n    [class.loro-app-nav__mobile--dragging]=\"isMobileDragging()\"\n    [class.loro-app-nav__mobile--with-labels]=\"true\"\n    [style.--loro-mobile-item-count]=\"mobileItemCount()\"\n    [style.--loro-mobile-visual-slot-count]=\"mobileVisualSlotCount()\"\n    (pointerdown)=\"onMobilePointerDown($event)\"\n    (pointermove)=\"onMobilePointerMove($event)\"\n    (pointerup)=\"onMobilePointerUp($event)\"\n    (pointercancel)=\"onMobilePointerCancel($event)\"\n  >\n    <span\n      class=\"loro-app-nav__mobile-slider\"\n      [class.loro-app-nav__mobile-slider--scan]=\"selectedMobileItemId() === 'scan'\"\n      aria-hidden=\"true\"></span>\n\n    @for (item of mobileItems(); track item.id; let index = $index) {\n      <button\n        ngToolbarWidget\n        type=\"button\"\n        class=\"loro-app-nav__mobile-item\"\n        [style.grid-column]=\"mobileItemGridColumn(index)\"\n        [class.loro-app-nav__mobile-item--active]=\"isMobileItemVisualActive(index)\"\n        [class.loro-app-nav__mobile-item--scan-active]=\"item.id === 'scan' && isMobileItemVisualActive(index)\"\n        [class.loro-app-nav__mobile-item--disabled]=\"item.disabled\"\n        [attr.aria-label]=\"item.label\"\n        [attr.aria-current]=\"item.active ? 'page' : null\"\n        [value]=\"item.id\"\n        [disabled]=\"!!item.disabled\"\n        (click)=\"onMobileItemClick(item)\"\n      >\n        <loro-icon\n          class=\"loro-app-nav__mobile-icon\"\n          [name]=\"item.icon\"\n          [size]=\"24\"\n          color=\"default\"\n          [alt]=\"item.label\"\n        />\n        <span class=\"loro-app-nav__mobile-label\">{{ item.label }}</span>\n      </button>\n    }\n  </nav>\n</aside>\n", styles: [":host{display:block;width:100%;height:100%}.loro-app-nav{width:100%;height:100%}.loro-app-nav__desktop{display:none;height:100%}.loro-app-nav__surface{width:100%;max-width:none;display:flex;height:100%;flex-direction:column;gap:1.1rem;padding:1.75rem 1.35rem 1.5rem;background:var(--loro-nav-desktop-surface, var(--loro-shell-header-surface));border:1px solid var(--loro-nav-desktop-border, var(--loro-border-soft))}html[data-theme=dark] .loro-app-nav__surface{background:var(--loro-nav-desktop-surface, rgba(24, 28, 32, .78));border-color:var(--loro-nav-desktop-border, rgba(255, 255, 255, .08));box-shadow:var(--loro-nav-desktop-shadow, none)}.loro-app-nav__surface--compact{gap:.9rem;padding:1.25rem 1rem 1.15rem}.loro-app-nav__surface--compact .loro-app-nav__brand{min-height:3.65rem;padding-bottom:1.2rem}.loro-app-nav__surface--compact .loro-app-nav__item{--loro-button-min-height: 3.75rem}.loro-app-nav__brand{display:flex;align-items:center;min-height:4.25rem;padding:.35rem .55rem .85rem}.loro-app-nav__brand-image{display:block}.loro-app-nav__nav{display:flex;flex-direction:column;gap:.75rem}.loro-app-nav__item{--loro-button-min-height: 4.25rem;--loro-button-padding: 1rem 1.2rem;--loro-button-radius: 1rem;--loro-button-font-size: 1rem;--loro-button-background: var(--loro-nav-button-background, transparent);--loro-button-border-color: var(--loro-nav-button-border, transparent);--loro-button-color: var(--loro-nav-button-text, var(--loro-text-strong));--loro-button-hover-background: var(--loro-nav-button-hover-bg, var(--loro-nav-hover-bg));--loro-button-hover-border-color: var(--loro-nav-button-hover-border, transparent);--loro-button-hover-color: var(--loro-nav-button-hover-text, var(--loro-nav-button-text, var(--loro-text-strong)));--loro-button-hover-shadow: var(--loro-nav-button-hover-shadow, none);display:block;width:100%;color:var(--loro-nav-button-text, var(--loro-text-strong))}.loro-app-nav__item--active{--loro-button-selected-background: var(--loro-nav-button-active-bg, var(--loro-nav-active-bg));--loro-button-selected-border-color: var(--loro-nav-button-active-border, var(--loro-nav-active-border));--loro-button-selected-color: var(--loro-nav-button-active-text, var(--loro-primary-500));--loro-button-selected-shadow: var(--loro-nav-button-active-shadow, inset .35rem 0 0 var(--loro-primary-500))}.loro-app-nav__item--logout{--loro-button-background: var(--loro-nav-button-danger-bg, var(--loro-danger-surface));--loro-button-border-color: var(--loro-nav-button-danger-border, transparent);--loro-button-color: var(--loro-nav-button-danger-text, var(--loro-danger-text));--loro-button-hover-background: var(--loro-nav-button-danger-bg, var(--loro-danger-surface));--loro-button-hover-border-color: var(--loro-nav-button-danger-border, transparent);--loro-button-hover-color: var(--loro-nav-button-danger-text, var(--loro-danger-text));--loro-button-shadow: none;--loro-button-hover-shadow: none}.loro-app-nav__item--disabled,.loro-app-nav__mobile-item--disabled{cursor:not-allowed;opacity:.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-slider--scan{background:var(--loro-nav-mobile-scan-indicator, linear-gradient(180deg, rgba(132, 83, 255, .98) 0%, rgba(94, 47, 224, .96) 100%));box-shadow:var(--loro-nav-mobile-scan-indicator-shadow, inset 0 1px 0 rgba(255, 255, 255, .38), 0 .85rem 1.65rem rgba(108, 60, 255, .28))}.loro-app-nav__mobile-item--scan-active{color:var(--loro-nav-mobile-scan-active-color, #fff)!important}.loro-app-nav__mobile--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"] }]
+            args: [{ selector: 'loro-app-nav', standalone: true, imports: [Toolbar, ToolbarWidget, LoroImage, LoroButton, LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<aside class=\"loro-app-nav\">\n  <div class=\"loro-app-nav__desktop\">\n    <div class=\"loro-app-nav__surface\" [class.loro-app-nav__surface--compact]=\"compactDesktop()\">\n      <div class=\"loro-app-nav__brand\">\n        <loro-image\n          class=\"loro-app-nav__brand-image\"\n          name=\"image-loro-apaisado\"\n          alt=\"AlLoro\"\n          width=\"10rem\"\n          height=\"auto\"\n        />\n      </div>\n\n      <nav class=\"loro-app-nav__nav\" [attr.aria-label]=\"ariaLabel()\">\n        @for (item of desktopItems(); track item.id) {\n          <loro-button\n            class=\"loro-app-nav__item\"\n            [class.loro-app-nav__item--active]=\"item.active\"\n            [class.loro-app-nav__item--disabled]=\"item.disabled\"\n            [class.loro-app-nav__item--logout]=\"item.id === 'logout'\"\n            [text]=\"item.label\"\n            [icon]=\"item.icon\"\n            iconMode=\"with-icon\"\n            iconColor=\"default\"\n            variant=\"navigation\"\n            [selected]=\"!!item.active\"\n            [color]=\"item.id === 'logout' ? 'danger' : 'primary'\"\n            type=\"button\"\n            [fullWidth]=\"true\"\n            [ariaLabel]=\"item.label\"\n            [disabled]=\"!!item.disabled\"\n            (buttonClick)=\"onMainItemClick(item)\"\n          >\n            @if (item.badge !== null && item.badge !== undefined && item.badge !== '') {\n              <span class=\"loro-app-nav__badge\">{{ item.badge }}</span>\n            }\n          </loro-button>\n        }\n      </nav>\n\n      <div class=\"loro-app-nav__spacer\"></div>\n\n      @if (showUtilityItems() && utilityItems().length > 0) {\n        <div class=\"loro-app-nav__divider\" aria-hidden=\"true\"></div>\n\n        <nav\n          class=\"loro-app-nav__nav loro-app-nav__nav--utility\"\n          aria-label=\"Navegaci\u00F3n secundaria\"\n        >\n          @for (item of utilityItems(); track item.id) {\n            <loro-button\n              class=\"loro-app-nav__item\"\n              [class.loro-app-nav__item--active]=\"item.active\"\n              [class.loro-app-nav__item--disabled]=\"item.disabled\"\n              [class.loro-app-nav__item--logout]=\"item.id === 'logout'\"\n              [text]=\"item.label\"\n              [icon]=\"item.icon\"\n              iconMode=\"with-icon\"\n              iconColor=\"default\"\n              variant=\"navigation\"\n              [selected]=\"!!item.active\"\n              [color]=\"item.id === 'logout' ? 'danger' : 'primary'\"\n              type=\"button\"\n              [fullWidth]=\"true\"\n              [ariaLabel]=\"item.label\"\n              [disabled]=\"!!item.disabled\"\n              (buttonClick)=\"onUtilityItemClick(item)\"\n            >\n              @if (item.badge !== null && item.badge !== undefined && item.badge !== '') {\n                <span class=\"loro-app-nav__badge\">{{ item.badge }}</span>\n              }\n            </loro-button>\n          }\n        </nav>\n      }\n    </div>\n  </div>\n\n  <nav\n    ngToolbar\n    class=\"loro-app-nav__mobile\"\n    data-horizontal-gesture\n    [attr.aria-label]=\"ariaLabel()\"\n    [style.--loro-mobile-slider-position]=\"mobileSliderPosition()\"\n    [class.loro-app-nav__mobile--dragging]=\"isMobileDragging()\"\n    [class.loro-app-nav__mobile--with-labels]=\"true\"\n    [style.--loro-mobile-item-count]=\"mobileItemCount()\"\n    [style.--loro-mobile-visual-slot-count]=\"mobileVisualSlotCount()\"\n    (pointerdown)=\"onMobilePointerDown($event)\"\n    (pointermove)=\"onMobilePointerMove($event)\"\n    (pointerup)=\"onMobilePointerUp($event)\"\n    (pointercancel)=\"onMobilePointerCancel($event)\"\n  >\n    <span\n      class=\"loro-app-nav__mobile-slider\"\n      [class.loro-app-nav__mobile-slider--scan]=\"selectedMobileItemId() === 'scan'\"\n      aria-hidden=\"true\"></span>\n\n    @for (item of mobileItems(); track item.id; let index = $index) {\n      <button\n        ngToolbarWidget\n        type=\"button\"\n        class=\"loro-app-nav__mobile-item\"\n        [style.grid-column]=\"mobileItemGridColumn(index)\"\n        [class.loro-app-nav__mobile-item--active]=\"isMobileItemVisualActive(index)\"\n        [class.loro-app-nav__mobile-item--scan-active]=\"item.id === 'scan' && isMobileItemVisualActive(index)\"\n        [class.loro-app-nav__mobile-item--disabled]=\"item.disabled\"\n        [attr.aria-label]=\"item.label\"\n        [attr.aria-current]=\"item.active ? 'page' : null\"\n        [value]=\"item.id\"\n        [disabled]=\"!!item.disabled\"\n        (click)=\"onMobileItemClick(item)\"\n      >\n        <loro-icon\n          class=\"loro-app-nav__mobile-icon\"\n          [name]=\"item.icon\"\n          [size]=\"24\"\n          color=\"default\"\n          [alt]=\"item.label\"\n        />\n        <span class=\"loro-app-nav__mobile-label\">{{ item.label }}</span>\n      </button>\n    }\n  </nav>\n</aside>\n", styles: [":host{display:block;width:100%;height:100%}.loro-app-nav{width:100%;height:100%}.loro-app-nav__desktop{display:none;height:100%}.loro-app-nav__surface{width:100%;max-width:none;display:flex;height:100%;flex-direction:column;gap:1.1rem;padding:1.75rem 1.35rem 1.5rem;background:var(--loro-nav-desktop-surface, var(--loro-shell-header-surface));border:1px solid var(--loro-nav-desktop-border, var(--loro-border-soft))}html[data-theme=dark] .loro-app-nav__surface{background:var(--loro-nav-desktop-surface, rgba(24, 28, 32, .78));border-color:var(--loro-nav-desktop-border, rgba(255, 255, 255, .08));box-shadow:var(--loro-nav-desktop-shadow, none)}.loro-app-nav__surface--compact{gap:.9rem;padding:1.25rem 1rem 1.15rem}.loro-app-nav__surface--compact .loro-app-nav__brand{min-height:3.65rem;padding-bottom:1.2rem}.loro-app-nav__surface--compact .loro-app-nav__item{--loro-button-min-height: 3.75rem}.loro-app-nav__brand{display:flex;align-items:center;min-height:4.25rem;padding:.35rem .55rem .85rem}.loro-app-nav__brand-image{display:block}.loro-app-nav__nav{display:flex;flex-direction:column;gap:.75rem}.loro-app-nav__item{--loro-button-min-height: 4.25rem;--loro-button-padding: 1rem 1.2rem;--loro-button-radius: 1rem;--loro-button-font-size: 1rem;--loro-button-background: var(--loro-nav-button-background, transparent);--loro-button-border-color: var(--loro-nav-button-border, transparent);--loro-button-color: var(--loro-nav-button-text, var(--loro-text-strong));--loro-button-hover-background: var(--loro-nav-button-hover-bg, var(--loro-nav-hover-bg));--loro-button-hover-border-color: var(--loro-nav-button-hover-border, transparent);--loro-button-hover-color: var(--loro-nav-button-hover-text, var(--loro-nav-button-text, var(--loro-text-strong)));--loro-button-hover-shadow: var(--loro-nav-button-hover-shadow, none);display:block;width:100%;color:var(--loro-nav-button-text, var(--loro-text-strong))}.loro-app-nav__item--active{--loro-button-selected-background: var(--loro-nav-button-active-bg, var(--loro-nav-active-bg));--loro-button-selected-border-color: var(--loro-nav-button-active-border, var(--loro-nav-active-border));--loro-button-selected-color: var(--loro-nav-button-active-text, var(--loro-primary-500));--loro-button-selected-shadow: var(--loro-nav-button-active-shadow, inset .35rem 0 0 var(--loro-primary-500))}.loro-app-nav__item--logout{--loro-button-background: var(--loro-nav-button-danger-bg, var(--loro-danger-surface));--loro-button-border-color: var(--loro-nav-button-danger-border, transparent);--loro-button-color: var(--loro-nav-button-danger-text, var(--loro-danger-text));--loro-button-hover-background: var(--loro-nav-button-danger-bg, var(--loro-danger-surface));--loro-button-hover-border-color: var(--loro-nav-button-danger-border, transparent);--loro-button-hover-color: var(--loro-nav-button-danger-text, var(--loro-danger-text));--loro-button-shadow: none;--loro-button-hover-shadow: none}.loro-app-nav__item--disabled,.loro-app-nav__mobile-item--disabled{cursor:not-allowed;opacity:1}.loro-app-nav__item--disabled{--loro-button-disabled-bg: var(--loro-disabled-surface);--loro-button-disabled-border: var(--loro-disabled-border);--loro-button-disabled-text: var(--loro-disabled-text)}.loro-app-nav__mobile-item--disabled{color:var(--loro-disabled-text)}.loro-app-nav__label,.loro-app-nav__mobile-label{color:inherit}.loro-app-nav__label{font-size:.98rem;font-weight:700;color:inherit}.loro-app-nav__badge{margin-left:auto;min-width:1.5rem;padding:.125rem .5rem;border-radius:999px;background:#ffffff24;color:inherit;font-size:.75rem;font-weight:700;text-align:center;box-shadow:inset 0 1px #ffffff14}.loro-app-nav__spacer{flex:1}.loro-app-nav__divider{height:1px;margin:.65rem 0 .9rem;background:var(--loro-nav-divider)}.loro-app-nav__nav--utility{margin-top:auto}.loro-app-nav__mobile{position:fixed;left:50%;bottom:max(1.25rem,env(safe-area-inset-bottom,0px) * .28);z-index:70;display:grid;grid-template-columns:repeat(var(--loro-mobile-visual-slot-count, 4),minmax(0,1fr));width:min(76vw - max(1rem,var(--app-shell-mobile-gutter, 1rem) * .75),19rem);gap:0;margin:0;transform:translate(-50%);padding:0;overflow:hidden;border:1px solid var(--loro-nav-mobile-border, rgba(43, 35, 80, .08));border-radius:999px;isolation:isolate;background:var(--loro-nav-mobile-glass-surface, rgba(255, 255, 255, .68));box-shadow:var(--loro-nav-mobile-surface-shadow, 0 8px 24px rgba(28, 32, 48, .1));backdrop-filter:blur(var(--loro-nav-mobile-glass-blur, 24px)) saturate(1.32);-webkit-backdrop-filter:blur(var(--loro-nav-mobile-glass-blur, 24px)) saturate(1.32);touch-action:pan-y;contain:layout paint;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;transition:background .22s ease,border-color .22s ease,box-shadow .22s ease}.loro-app-nav__mobile-item{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:3.58rem;gap:.18rem;padding:.35rem .15rem;border:0;border-radius:999px;outline:0;background:transparent;color:var(--loro-nav-mobile-icon, var(--loro-text));cursor:pointer;appearance:none;-webkit-appearance:none;opacity:1;visibility:visible;transition:transform .22s cubic-bezier(.22,1,.36,1);-webkit-tap-highlight-color:transparent}.loro-app-nav__mobile-item:hover:not(.loro-app-nav__mobile-item--active),.loro-app-nav__mobile-item:active:not(.loro-app-nav__mobile-item--active),.loro-app-nav__mobile-item:focus:not(.loro-app-nav__mobile-item--active){background:transparent;color:var(--loro-nav-mobile-icon, var(--loro-text))}.loro-app-nav__mobile-item--active{background:transparent;color:var(--loro-nav-mobile-icon, var(--loro-text))}.loro-app-nav__mobile-item:focus-visible{outline:2px solid var(--loro-focus-ring);outline-offset:-4px}.loro-app-nav__mobile-item:disabled{cursor:not-allowed;opacity:1;color:var(--loro-disabled-text)}.loro-app-nav__mobile-icon{position:relative;z-index:3;display:inline-flex;align-items:center;justify-content:center;color:inherit!important;opacity:1!important;visibility:visible!important;pointer-events:none;mix-blend-mode:normal;transform:scale(.94);transform-origin:center}.loro-app-nav__mobile-item ::ng-deep .loro-icon,.loro-app-nav__mobile-item ::ng-deep svg{display:block!important;color:inherit!important;opacity:1!important;visibility:visible!important;pointer-events:none!important}.loro-app-nav__mobile-item ::ng-deep .loro-icon__mask{background-color:currentColor!important;opacity:1!important;visibility:visible!important}.loro-app-nav__mobile-item ::ng-deep svg [fill]:not([fill=none]){fill:currentColor!important}.loro-app-nav__mobile-item ::ng-deep svg [stroke]:not([stroke=none]){stroke:currentColor!important}.loro-app-nav__mobile-slider{position:absolute;inset-block:0;left:0;z-index:1;width:calc(100% / var(--loro-mobile-visual-slot-count, 4));border:0;border-radius:999px;background:var(--loro-nav-mobile-indicator, linear-gradient(180deg, rgba(227, 229, 233, .96) 0%, rgba(214, 217, 223, .92) 100%));box-shadow:var(--loro-nav-mobile-indicator-shadow, inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 5px rgba(21, 28, 42, .06));transform:translate3d(calc(var(--loro-mobile-slider-position, 0) * 100%),0,0);will-change:transform;transition:transform .26s cubic-bezier(.22,1,.36,1);pointer-events:none}.loro-app-nav__mobile--dragging .loro-app-nav__mobile-slider{transition:transform 1ms linear}.loro-app-nav__mobile-slider--scan{background:var(--loro-nav-mobile-scan-indicator, linear-gradient(180deg, rgba(132, 83, 255, .98) 0%, rgba(94, 47, 224, .96) 100%));box-shadow:var(--loro-nav-mobile-scan-indicator-shadow, inset 0 1px 0 rgba(255, 255, 255, .38), 0 .85rem 1.65rem rgba(108, 60, 255, .28))}.loro-app-nav__mobile-item--scan-active{color:var(--loro-nav-mobile-scan-active-color, #fff)!important}.loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active):hover,.loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active):active{color:var(--loro-nav-mobile-icon, var(--loro-text))!important}.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active),.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active) .loro-app-nav__mobile-icon,.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active) ::ng-deep .loro-icon,.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active) ::ng-deep svg{color:var(--loro-nav-mobile-icon, var(--loro-text))!important;opacity:1!important;visibility:visible!important}.loro-app-nav__mobile-label{display:block;max-width:100%;overflow:hidden;color:inherit;font-size:.625rem;font-weight:700;line-height:1.1;text-align:center;text-overflow:ellipsis;white-space:nowrap;opacity:0;transform:translateY(.08rem);transition:opacity .18s ease,transform .18s ease}.loro-app-nav__mobile--with-labels{width:min(92vw - max(1rem,var(--app-shell-mobile-gutter, 1rem) * .75),24rem)}.loro-app-nav__mobile--with-labels .loro-app-nav__mobile-item{min-height:4.4rem;padding-top:.7rem}.loro-app-nav__mobile--with-labels .loro-app-nav__mobile-label{opacity:1;transform:translateY(0)}@media(max-width:479.99px)and (orientation:portrait){:host{height:auto}.loro-app-nav{height:auto;padding:0}.loro-app-nav__desktop{height:auto}}@media(min-width:1024px){:host,.loro-app-nav,.loro-app-nav__desktop{height:100%}.loro-app-nav__desktop{display:block}.loro-app-nav__mobile{display:none}}@media(prefers-reduced-motion:reduce){.loro-app-nav__mobile-slider,.loro-app-nav__mobile-item,.loro-app-nav__mobile-item ::ng-deep .loro-icon{transition-duration:1ms}}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], utilityItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "utilityItems", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], showUtilityItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "showUtilityItems", required: false }] }], compactDesktop: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactDesktop", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], utilityItemClick: [{ type: i0.Output, args: ["utilityItemClick"] }], navItemClick: [{ type: i0.Output, args: ["navItemClick"] }] } });
 
 class LoroAssistantCard {
@@ -2882,6 +2872,10 @@ class LoroProfileCard {
     name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
     email = input.required(...(ngDevMode ? [{ debugName: "email" }] : /* istanbul ignore next */ []));
     imageSrc = input(null, ...(ngDevMode ? [{ debugName: "imageSrc" }] : /* istanbul ignore next */ []));
+    changePhotoLabel = input('Cambiar foto', ...(ngDevMode ? [{ debugName: "changePhotoLabel" }] : /* istanbul ignore next */ []));
+    changePhotoLoadingLabel = input('Actualizando...', ...(ngDevMode ? [{ debugName: "changePhotoLoadingLabel" }] : /* istanbul ignore next */ []));
+    changePhotoLoading = input(false, ...(ngDevMode ? [{ debugName: "changePhotoLoading" }] : /* istanbul ignore next */ []));
+    changePhotoDisabled = input(false, ...(ngDevMode ? [{ debugName: "changePhotoDisabled" }] : /* istanbul ignore next */ []));
     changePhotoClick = output();
     imageFailed = signal(false, ...(ngDevMode ? [{ debugName: "imageFailed" }] : /* istanbul ignore next */ []));
     constructor() {
@@ -2897,7 +2891,7 @@ class LoroProfileCard {
         this.imageFailed.set(true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroProfileCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroProfileCard, isStandalone: true, selector: "loro-profile-card", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, email: { classPropertyName: "email", publicName: "email", isSignal: true, isRequired: true, transformFunction: null }, imageSrc: { classPropertyName: "imageSrc", publicName: "imageSrc", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changePhotoClick: "changePhotoClick" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroProfileCard, isStandalone: true, selector: "loro-profile-card", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, email: { classPropertyName: "email", publicName: "email", isSignal: true, isRequired: true, transformFunction: null }, imageSrc: { classPropertyName: "imageSrc", publicName: "imageSrc", isSignal: true, isRequired: false, transformFunction: null }, changePhotoLabel: { classPropertyName: "changePhotoLabel", publicName: "changePhotoLabel", isSignal: true, isRequired: false, transformFunction: null }, changePhotoLoadingLabel: { classPropertyName: "changePhotoLoadingLabel", publicName: "changePhotoLoadingLabel", isSignal: true, isRequired: false, transformFunction: null }, changePhotoLoading: { classPropertyName: "changePhotoLoading", publicName: "changePhotoLoading", isSignal: true, isRequired: false, transformFunction: null }, changePhotoDisabled: { classPropertyName: "changePhotoDisabled", publicName: "changePhotoDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changePhotoClick: "changePhotoClick" }, ngImport: i0, template: `
     <section class="loro-profile-card">
       <div class="loro-profile-card__avatar">
         @if (resolvedImageSrc()) {
@@ -2910,9 +2904,11 @@ class LoroProfileCard {
         <h2>{{ name() }}</h2>
         <p>{{ email() }}</p>
         <loro-button
-          label="Cambiar foto"
+          [label]="changePhotoLoading() ? changePhotoLoadingLabel() : changePhotoLabel()"
           icon="camera"
           variant="outline"
+          [disabled]="changePhotoDisabled() || changePhotoLoading()"
+          [loading]="changePhotoLoading()"
           (buttonClick)="changePhotoClick.emit()" />
       </div>
     </section>
@@ -2933,14 +2929,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         <h2>{{ name() }}</h2>
         <p>{{ email() }}</p>
         <loro-button
-          label="Cambiar foto"
+          [label]="changePhotoLoading() ? changePhotoLoadingLabel() : changePhotoLabel()"
           icon="camera"
           variant="outline"
+          [disabled]="changePhotoDisabled() || changePhotoLoading()"
+          [loading]="changePhotoLoading()"
           (buttonClick)="changePhotoClick.emit()" />
       </div>
     </section>
   `, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-profile-card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:1.5rem;padding:clamp(1.25rem,3vw,2rem);border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-card);background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft)}.loro-profile-card__avatar{display:grid;width:clamp(7rem,16vw,9.5rem);aspect-ratio:1;place-items:center;overflow:hidden;border-radius:50%;background:linear-gradient(180deg,#6c3cff24,#6c3cff0a)}img{width:100%;height:100%;object-fit:cover}h2,p{margin:0}h2{color:var(--loro-text-strong);font-size:clamp(2rem,4vw,2.7rem);font-weight:900;line-height:1}p{margin:.4rem 0 1rem;color:var(--loro-muted);font-size:1.05rem;font-weight:650}@media(max-width:520px){.loro-profile-card{grid-template-columns:max-content minmax(0,1fr);gap:1rem}}\n"] }]
-        }], 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"] }] } });
+        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], email: [{ type: i0.Input, args: [{ isSignal: true, alias: "email", required: true }] }], imageSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageSrc", required: false }] }], changePhotoLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "changePhotoLabel", required: false }] }], changePhotoLoadingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "changePhotoLoadingLabel", required: false }] }], changePhotoLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "changePhotoLoading", required: false }] }], changePhotoDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "changePhotoDisabled", required: false }] }], changePhotoClick: [{ type: i0.Output, args: ["changePhotoClick"] }] } });
 
 class LoroProfileHero {
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
@@ -3537,10 +3535,16 @@ class LoroNotificationRow {
       (touchmove)="onTouchMove($event)"
       (touchend)="onTouchEnd()"
       (touchcancel)="resetDrag()">
-      <span class="loro-notification-row-shell__delete" aria-hidden="true">
+      <button
+        type="button"
+        class="loro-notification-row-shell__delete"
+        aria-label="Eliminar notificacion"
+        (pointerdown)="$event.stopPropagation()"
+        (touchstart)="$event.stopPropagation()"
+        (click)="onDeleteClick($event)">
         <loro-icon name="trash-white" [size]="22" alt="" [decorative]="true" color="inverse" />
         <span>Eliminar</span>
-      </span>
+      </button>
       <article
         role="button"
         tabindex="0"
@@ -3574,7 +3578,7 @@ class LoroNotificationRow {
         </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, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-notification-row-shell{position:relative;overflow:hidden;background:transparent;touch-action:pan-y}.loro-notification-row-shell__delete{position:absolute;inset:0 0 0 auto;display:grid;width:8.75rem;align-content:center;justify-items:center;gap:.45rem;border:0;background:#ef4444;color:var(--loro-text-inverse);font:inherit;font-weight:850;cursor:pointer;opacity:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:opacity .18s ease,transform .18s ease}.loro-notification-row-shell--dragging .loro-notification-row-shell__delete,.loro-notification-row-shell--armed .loro-notification-row-shell__delete,.loro-notification-row-shell--removing .loro-notification-row-shell__delete{opacity:1}.loro-notification-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:.85rem;width:100%;padding:.82rem .95rem;border:0;border-bottom:1px solid var(--loro-border-subtle);background:var(--loro-surface);color:var(--loro-text);text-align:left;cursor:pointer;will-change:transform;transition:background .15s ease,transform .22s cubic-bezier(.2,.8,.2,1),opacity .18s ease}.loro-notification-row-shell--dragging .loro-notification-row{transition:background .15s ease}.loro-notification-row-shell--removing .loro-notification-row{opacity:.18;transform:translate3d(-100%,0,0)!important}:host:last-child .loro-notification-row{border-bottom-color:transparent}.loro-notification-row:hover{background:var(--loro-surface)}.loro-notification-row:focus-visible{position:relative;z-index:1;outline:2px solid rgba(108,60,255,.32);outline-offset:-2px}.loro-notification-row__icon{display:grid;width:2.5rem;height:2.5rem;place-items:center;border-radius:.8rem;background:transparent}.loro-notification-row__content{display:grid;gap:.2rem;min-width:0}.loro-notification-row__meta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:.75rem}strong{overflow:hidden;color:var(--loro-text-strong);font-size:.92rem;font-weight:950;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}small,.loro-notification-row__message{color:var(--loro-muted);font-size:.82rem;font-weight:700;line-height:1.35}.loro-notification-row__dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--loro-primary-500)}.loro-notification-row__delete-button{display:grid;width:2.25rem;height:2.25rem;place-items:center;border:0;border-radius:.7rem;background:color-mix(in srgb,var(--loro-danger-text) 8%,transparent);cursor:pointer;opacity:0;transition:background .15s ease,opacity .15s ease,transform .15s ease}.loro-notification-row:hover .loro-notification-row__delete-button,.loro-notification-row:focus-visible .loro-notification-row__delete-button,.loro-notification-row__delete-button:focus-visible{opacity:1}.loro-notification-row__delete-button:hover,.loro-notification-row__delete-button:focus-visible{background:color-mix(in srgb,var(--loro-danger-text) 14%,transparent);outline:0;transform:translateY(-1px)}@media(max-width:1023.88px){.loro-notification-row{grid-template-columns:auto minmax(0,1fr) auto;padding:.82rem .8rem}.loro-notification-row__delete-button{display:none}}\n"], dependencies: [{ kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroNotificationRow, decorators: [{
             type: Component,
@@ -3589,10 +3593,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       (touchmove)="onTouchMove($event)"
       (touchend)="onTouchEnd()"
       (touchcancel)="resetDrag()">
-      <span class="loro-notification-row-shell__delete" aria-hidden="true">
+      <button
+        type="button"
+        class="loro-notification-row-shell__delete"
+        aria-label="Eliminar notificacion"
+        (pointerdown)="$event.stopPropagation()"
+        (touchstart)="$event.stopPropagation()"
+        (click)="onDeleteClick($event)">
         <loro-icon name="trash-white" [size]="22" alt="" [decorative]="true" color="inverse" />
         <span>Eliminar</span>
-      </span>
+      </button>
       <article
         role="button"
         tabindex="0"
@@ -3626,7 +3636,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         </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"] }]
+  `, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-notification-row-shell{position:relative;overflow:hidden;background:transparent;touch-action:pan-y}.loro-notification-row-shell__delete{position:absolute;inset:0 0 0 auto;display:grid;width:8.75rem;align-content:center;justify-items:center;gap:.45rem;border:0;background:#ef4444;color:var(--loro-text-inverse);font:inherit;font-weight:850;cursor:pointer;opacity:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:opacity .18s ease,transform .18s ease}.loro-notification-row-shell--dragging .loro-notification-row-shell__delete,.loro-notification-row-shell--armed .loro-notification-row-shell__delete,.loro-notification-row-shell--removing .loro-notification-row-shell__delete{opacity:1}.loro-notification-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:.85rem;width:100%;padding:.82rem .95rem;border:0;border-bottom:1px solid var(--loro-border-subtle);background:var(--loro-surface);color:var(--loro-text);text-align:left;cursor:pointer;will-change:transform;transition:background .15s ease,transform .22s cubic-bezier(.2,.8,.2,1),opacity .18s ease}.loro-notification-row-shell--dragging .loro-notification-row{transition:background .15s ease}.loro-notification-row-shell--removing .loro-notification-row{opacity:.18;transform:translate3d(-100%,0,0)!important}:host:last-child .loro-notification-row{border-bottom-color:transparent}.loro-notification-row:hover{background:var(--loro-surface)}.loro-notification-row:focus-visible{position:relative;z-index:1;outline:2px solid rgba(108,60,255,.32);outline-offset:-2px}.loro-notification-row__icon{display:grid;width:2.5rem;height:2.5rem;place-items:center;border-radius:.8rem;background:transparent}.loro-notification-row__content{display:grid;gap:.2rem;min-width:0}.loro-notification-row__meta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:.75rem}strong{overflow:hidden;color:var(--loro-text-strong);font-size:.92rem;font-weight:950;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}small,.loro-notification-row__message{color:var(--loro-muted);font-size:.82rem;font-weight:700;line-height:1.35}.loro-notification-row__dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--loro-primary-500)}.loro-notification-row__delete-button{display:grid;width:2.25rem;height:2.25rem;place-items:center;border:0;border-radius:.7rem;background:color-mix(in srgb,var(--loro-danger-text) 8%,transparent);cursor:pointer;opacity:0;transition:background .15s ease,opacity .15s ease,transform .15s ease}.loro-notification-row:hover .loro-notification-row__delete-button,.loro-notification-row:focus-visible .loro-notification-row__delete-button,.loro-notification-row__delete-button:focus-visible{opacity:1}.loro-notification-row__delete-button:hover,.loro-notification-row__delete-button:focus-visible{background:color-mix(in srgb,var(--loro-danger-text) 14%,transparent);outline:0;transform:translateY(-1px)}@media(max-width:1023.88px){.loro-notification-row{grid-template-columns:auto minmax(0,1fr) auto;padding:.82rem .8rem}.loro-notification-row__delete-button{display:none}}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], time: [{ type: i0.Input, args: [{ isSignal: true, alias: "time", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], unread: [{ type: i0.Input, args: [{ isSignal: true, alias: "unread", required: false }] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowRemove: [{ type: i0.Output, args: ["rowRemove"] }] } });
 
 class LoroNotificationPanel {
@@ -3645,6 +3655,16 @@ class LoroNotificationPanel {
     markAllRead = output();
     clearAll = output();
     hasUnread = computed(() => this.items().some((item) => !!item.unread), ...(ngDevMode ? [{ debugName: "hasUnread" }] : /* istanbul ignore next */ []));
+    onMarkAllReadClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.markAllRead.emit();
+    }
+    onClearAllClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.clearAll.emit();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroNotificationPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroNotificationPanel, isStandalone: true, selector: "loro-notification-panel", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, presentation: { classPropertyName: "presentation", publicName: "presentation", isSignal: true, isRequired: false, transformFunction: null }, showMarkAll: { classPropertyName: "showMarkAll", publicName: "showMarkAll", isSignal: true, isRequired: false, transformFunction: null }, markAllLabel: { classPropertyName: "markAllLabel", publicName: "markAllLabel", isSignal: true, isRequired: false, transformFunction: null }, showClearAll: { classPropertyName: "showClearAll", publicName: "showClearAll", isSignal: true, isRequired: false, transformFunction: null }, clearAllLabel: { classPropertyName: "clearAllLabel", publicName: "clearAllLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyIcon: { classPropertyName: "emptyIcon", publicName: "emptyIcon", isSignal: true, isRequired: false, transformFunction: null }, emptyTitle: { classPropertyName: "emptyTitle", publicName: "emptyTitle", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", itemRemove: "itemRemove", markAllRead: "markAllRead", clearAll: "clearAll" }, ngImport: i0, template: `
     <section
@@ -3659,9 +3679,18 @@ class LoroNotificationPanel {
         @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>
+              <button
+                type="button"
+                (pointerdown)="$event.stopPropagation()"
+                (touchstart)="$event.stopPropagation()"
+                (click)="onMarkAllReadClick($event)">{{ markAllLabel() }}</button>
+            }
+            @if (showClearAll()) {
+              <button
+                type="button"
+                (pointerdown)="$event.stopPropagation()"
+                (touchstart)="$event.stopPropagation()"
+                (click)="onClearAllClick($event)">{{ clearAllLabel() }}</button>
             }
           </div>
         }
@@ -3690,7 +3719,7 @@ class LoroNotificationPanel {
         </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:center;grid-template-columns:minmax(0,1fr) auto;gap:.65rem}.loro-notification-panel--sheet.loro-notification-panel--empty .loro-notification-panel__header{border-bottom:0}.loro-notification-panel--sheet .loro-notification-panel__empty{min-height:0;height:100%;place-items:center;align-content:center;padding:1rem 1.15rem 1.4rem;background:var(--loro-surface)}.loro-notification-panel--sheet .loro-notification-panel__handle{display:block;width:3rem;height:.25rem;margin:.5rem auto .2rem;border-radius:999px;background:#62588259}.loro-notification-panel--sheet .loro-notification-panel__header{padding:.7rem .95rem}.loro-notification-panel__actions{display:inline-flex;width:auto;justify-content:flex-end;gap:.5rem}.loro-notification-panel__actions button{white-space:nowrap}}\n"], dependencies: [{ kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }, { kind: "component", type: LoroNotificationRow, selector: "loro-notification-row", inputs: ["title", "message", "time", "icon", "unread"], outputs: ["rowClick", "rowRemove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;width:min(100%,24rem);min-height:0;font-family:var(--loro-font-brand)}.loro-notification-panel{overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;height:100%;min-height:0;isolation:isolate;border:1px solid var(--loro-border-subtle);border-radius:1rem;background:var(--loro-surface);box-shadow:var(--loro-shadow-panel);color:var(--loro-text)}.loro-notification-panel__handle{display:none}.loro-notification-panel__header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem;padding:.9rem 1rem;border-bottom:1px solid var(--loro-border-subtle)}.loro-notification-panel__actions{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:.75rem}h2{margin:0;color:var(--loro-text-strong);font-size:1rem;font-weight:950}button{min-height:2.2rem;border:0;border-radius:.65rem;background:transparent;color:var(--loro-primary-700);font:inherit;font-size:.82rem;font-weight:850;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:hover,button:focus-visible{background:color-mix(in srgb,var(--loro-primary-500) 9%,transparent);outline:none}.loro-notification-panel__list{display:grid;align-content:start;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;background:var(--loro-surface)}.loro-notification-panel__empty{display:grid;min-height:18rem;place-items:center;align-content:center;gap:.75rem;padding:2rem;text-align:center;background:var(--loro-surface)}.loro-notification-panel__empty-icon{display:grid;width:6rem;height:6rem;place-items:center;border-radius:50%;background:#6c3cff0f}.loro-notification-panel__empty strong{color:var(--loro-text-strong);font-weight:950}.loro-notification-panel__empty p{max-width:16rem;margin:0;color:var(--loro-muted);font-weight:700;line-height:1.45}@media(min-width:1024px){.loro-notification-panel__list{max-height:min(28rem,60vh)}}@media(max-width:1023.88px){:host{display:grid;width:100%;height:100%;min-height:0}.loro-notification-panel,.loro-notification-panel--sheet{width:100%;height:100%;min-height:0;border-radius:1.15rem 1.15rem 0 0;background:var(--loro-surface)}.loro-notification-panel--sheet{display:grid;min-height:0;grid-template-rows:auto auto minmax(0,1fr)}.loro-notification-panel--sheet .loro-notification-panel__list{min-height:0;height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;background:var(--loro-surface);touch-action:pan-y}.loro-notification-panel--sheet .loro-notification-panel__header{position:sticky;top:0;z-index:2;background:var(--loro-surface);align-items:center;grid-template-columns:minmax(0,1fr) auto;gap:.65rem}.loro-notification-panel--sheet.loro-notification-panel--empty .loro-notification-panel__header{border-bottom:0}.loro-notification-panel--sheet .loro-notification-panel__empty{min-height:0;height:100%;place-items:center;align-content:center;padding:1rem 1.15rem 1.4rem;background:var(--loro-surface)}.loro-notification-panel--sheet .loro-notification-panel__handle{display:block;width:3rem;height:.25rem;margin:.5rem auto .2rem;border-radius:999px;background:#62588259}.loro-notification-panel--sheet .loro-notification-panel__header{padding:.7rem .95rem}.loro-notification-panel__actions{display:inline-flex;width:auto;justify-content:flex-end;gap:.35rem}.loro-notification-panel__actions button{white-space:nowrap}}\n"], dependencies: [{ kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }, { kind: "component", type: LoroNotificationRow, selector: "loro-notification-row", inputs: ["title", "message", "time", "icon", "unread"], outputs: ["rowClick", "rowRemove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroNotificationPanel, decorators: [{
             type: Component,
@@ -3707,9 +3736,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         @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>
+              <button
+                type="button"
+                (pointerdown)="$event.stopPropagation()"
+                (touchstart)="$event.stopPropagation()"
+                (click)="onMarkAllReadClick($event)">{{ markAllLabel() }}</button>
+            }
+            @if (showClearAll()) {
+              <button
+                type="button"
+                (pointerdown)="$event.stopPropagation()"
+                (touchstart)="$event.stopPropagation()"
+                (click)="onClearAllClick($event)">{{ clearAllLabel() }}</button>
             }
           </div>
         }
@@ -3738,7 +3776,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         </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:center;grid-template-columns:minmax(0,1fr) auto;gap:.65rem}.loro-notification-panel--sheet.loro-notification-panel--empty .loro-notification-panel__header{border-bottom:0}.loro-notification-panel--sheet .loro-notification-panel__empty{min-height:0;height:100%;place-items:center;align-content:center;padding:1rem 1.15rem 1.4rem;background:var(--loro-surface)}.loro-notification-panel--sheet .loro-notification-panel__handle{display:block;width:3rem;height:.25rem;margin:.5rem auto .2rem;border-radius:999px;background:#62588259}.loro-notification-panel--sheet .loro-notification-panel__header{padding:.7rem .95rem}.loro-notification-panel__actions{display:inline-flex;width:auto;justify-content:flex-end;gap:.5rem}.loro-notification-panel__actions button{white-space:nowrap}}\n"] }]
+  `, styles: [":host{display:block;width:min(100%,24rem);min-height:0;font-family:var(--loro-font-brand)}.loro-notification-panel{overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;height:100%;min-height:0;isolation:isolate;border:1px solid var(--loro-border-subtle);border-radius:1rem;background:var(--loro-surface);box-shadow:var(--loro-shadow-panel);color:var(--loro-text)}.loro-notification-panel__handle{display:none}.loro-notification-panel__header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem;padding:.9rem 1rem;border-bottom:1px solid var(--loro-border-subtle)}.loro-notification-panel__actions{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:.75rem}h2{margin:0;color:var(--loro-text-strong);font-size:1rem;font-weight:950}button{min-height:2.2rem;border:0;border-radius:.65rem;background:transparent;color:var(--loro-primary-700);font:inherit;font-size:.82rem;font-weight:850;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:hover,button:focus-visible{background:color-mix(in srgb,var(--loro-primary-500) 9%,transparent);outline:none}.loro-notification-panel__list{display:grid;align-content:start;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;background:var(--loro-surface)}.loro-notification-panel__empty{display:grid;min-height:18rem;place-items:center;align-content:center;gap:.75rem;padding:2rem;text-align:center;background:var(--loro-surface)}.loro-notification-panel__empty-icon{display:grid;width:6rem;height:6rem;place-items:center;border-radius:50%;background:#6c3cff0f}.loro-notification-panel__empty strong{color:var(--loro-text-strong);font-weight:950}.loro-notification-panel__empty p{max-width:16rem;margin:0;color:var(--loro-muted);font-weight:700;line-height:1.45}@media(min-width:1024px){.loro-notification-panel__list{max-height:min(28rem,60vh)}}@media(max-width:1023.88px){:host{display:grid;width:100%;height:100%;min-height:0}.loro-notification-panel,.loro-notification-panel--sheet{width:100%;height:100%;min-height:0;border-radius:1.15rem 1.15rem 0 0;background:var(--loro-surface)}.loro-notification-panel--sheet{display:grid;min-height:0;grid-template-rows:auto auto minmax(0,1fr)}.loro-notification-panel--sheet .loro-notification-panel__list{min-height:0;height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;background:var(--loro-surface);touch-action:pan-y}.loro-notification-panel--sheet .loro-notification-panel__header{position:sticky;top:0;z-index:2;background:var(--loro-surface);align-items:center;grid-template-columns:minmax(0,1fr) auto;gap:.65rem}.loro-notification-panel--sheet.loro-notification-panel--empty .loro-notification-panel__header{border-bottom:0}.loro-notification-panel--sheet .loro-notification-panel__empty{min-height:0;height:100%;place-items:center;align-content:center;padding:1rem 1.15rem 1.4rem;background:var(--loro-surface)}.loro-notification-panel--sheet .loro-notification-panel__handle{display:block;width:3rem;height:.25rem;margin:.5rem auto .2rem;border-radius:999px;background:#62588259}.loro-notification-panel--sheet .loro-notification-panel__header{padding:.7rem .95rem}.loro-notification-panel__actions{display:inline-flex;width:auto;justify-content:flex-end;gap:.35rem}.loro-notification-panel__actions button{white-space:nowrap}}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], presentation: [{ type: i0.Input, args: [{ isSignal: true, alias: "presentation", required: false }] }], showMarkAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMarkAll", required: false }] }], markAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "markAllLabel", required: false }] }], showClearAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearAll", required: false }] }], clearAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAllLabel", required: false }] }], emptyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyIcon", required: false }] }], emptyTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTitle", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], itemRemove: [{ type: i0.Output, args: ["itemRemove"] }], markAllRead: [{ type: i0.Output, args: ["markAllRead"] }], clearAll: [{ type: i0.Output, args: ["clearAll"] }] } });
 
 class LoroSpinner {
@@ -4431,6 +4469,11 @@ class LoroModal {
         this.resetSheetState();
         this.modalClose.emit();
     }
+    onCloseClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.requestClose();
+    }
     onSheetTouchStart(event, dialog) {
         if (!this.isSheetInteractionEnabled() || event.touches.length !== 1 || !this.isDragZone(event, dialog)) {
             return;
@@ -4525,6 +4568,9 @@ class LoroModal {
             return false;
         }
         const target = event.target instanceof Element ? event.target : null;
+        if (target?.closest('button, a, input, textarea, select, [contenteditable="true"]')) {
+            return false;
+        }
         if (target?.closest('.loro-notification-panel__handle, .loro-modal__header')) {
             return true;
         }
@@ -4563,7 +4609,13 @@ class LoroModal {
                 <h2>{{ title() }}</h2>
               }
               @if (dismissible()) {
-                <button type="button" class="loro-modal__close" aria-label="Cerrar modal" (click)="requestClose()">
+                <button
+                  type="button"
+                  class="loro-modal__close"
+                  aria-label="Cerrar modal"
+                  (pointerdown)="$event.stopPropagation()"
+                  (touchstart)="$event.stopPropagation()"
+                  (click)="onCloseClick($event)">
                   X
                 </button>
               }
@@ -4580,7 +4632,7 @@ class LoroModal {
         </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 });
+  `, isInline: true, styles: [":host{display:contents;font-family:var(--loro-font-brand)}.loro-modal{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;width:100vw;height:100vh;height:var(--app-fill-height, var(--app-viewport-height, 100dvh));padding:1.25rem;isolation:isolate}.loro-modal__backdrop{position:absolute;inset:0;border:0;background:#140e276b;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);cursor:pointer}.loro-modal__dialog{position:relative;z-index:1;display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:min(100%,32rem);max-height:min(42rem,calc(var(--app-fill-height, var(--app-viewport-height, 100dvh)) - 2.5rem));overflow:hidden;border:1px solid var(--loro-border-subtle);border-radius:1.25rem;background:var(--loro-surface);box-shadow:var(--loro-shadow-panel);color:var(--loro-text);transition:transform .22s cubic-bezier(.22,1,.36,1)}.loro-modal__dialog--sm{width:min(100%,24rem)}.loro-modal__dialog--lg{width:min(100%,44rem)}.loro-modal__header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem;padding:1rem 1.15rem;border-bottom:1px solid var(--loro-border-subtle)}h2{margin:0;color:var(--loro-text-strong);font-size:1.08rem;font-weight:950;line-height:1.2}.loro-modal__close{display:grid;width:2.25rem;height:2.25rem;place-items:center;border:0;border-radius:50%;background:#6c3cff14;color:var(--loro-text-strong);font:inherit;font-weight:950;cursor:pointer}.loro-modal__content{min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:1.15rem}::ng-deep [loro-modal-actions]{display:flex;justify-content:flex-end;gap:.75rem;padding:.9rem 1.15rem 1.15rem;border-top:1px solid var(--loro-border-subtle)}@media(max-width:1023.88px){.loro-modal{align-items:end;padding:0}.loro-modal--sheet{place-items:end stretch}.loro-modal__dialog,.loro-modal__dialog--sm,.loro-modal__dialog--md,.loro-modal__dialog--lg{width:100%;max-height:calc(var(--app-fill-height, var(--app-viewport-height, 100dvh)) - 1rem);border-radius:1.75rem 1.75rem 0 0}.loro-modal--sheet .loro-modal__dialog,.loro-modal--sheet .loro-modal__dialog--sm,.loro-modal--sheet .loro-modal__dialog--md,.loro-modal--sheet .loro-modal__dialog--lg{--loro-modal-sheet-rest-top: max( calc(var(--app-fill-height, 100dvh) * .3), calc(env(safe-area-inset-top, 0px) + .65rem) );position:fixed;inset:auto 0 0;width:100%;max-height:calc(var(--app-fill-height, var(--app-viewport-height, 100dvh)) - max(var(--loro-modal-sheet-rest-top),calc(env(safe-area-inset-top,0px) + .65rem)));grid-template-rows:auto minmax(0,auto) auto;background:var(--loro-surface);overscroll-behavior-y:contain;transform:translate3d(0,var(--loro-modal-sheet-drag-y, 0px),0)}.loro-modal--sheet .loro-modal__dialog--dragging{transition:none}.loro-modal--sheet .loro-modal__content{display:block;height:auto;min-height:0;max-height:calc(var(--app-fill-height, var(--app-viewport-height, 100dvh)) - max(var(--loro-modal-sheet-rest-top),calc(env(safe-area-inset-top,0px) + .65rem)) - 4rem);overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;padding:.85rem;background:var(--loro-surface);touch-action:pan-y}.loro-modal--sheet .loro-modal__content--flush{padding:0}.loro-modal--center{align-items:center;padding:1rem}.loro-modal--center .loro-modal__dialog{border-radius:1.15rem}::ng-deep [loro-modal-actions]{flex-direction:column-reverse;padding:.7rem .9rem max(.85rem,env(safe-area-inset-bottom,0px));background:var(--loro-surface)}}@media(min-width:1024px){.loro-modal{place-items:center;padding:2rem}.loro-modal__backdrop{background:#070a129e;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.loro-modal--center .loro-modal__dialog,.loro-modal--sheet .loro-modal__dialog{position:relative;inset:auto;max-height:min(46rem,calc(var(--app-fill-height, var(--app-viewport-height, 100dvh)) - 4rem));border-radius:1.5rem}.loro-modal__dialog--sm{width:min(100%,28rem)}.loro-modal__dialog--md{width:min(100%,36rem)}.loro-modal__dialog--lg{width:min(100%,60rem)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroModal, decorators: [{
             type: Component,
@@ -4615,7 +4667,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 <h2>{{ title() }}</h2>
               }
               @if (dismissible()) {
-                <button type="button" class="loro-modal__close" aria-label="Cerrar modal" (click)="requestClose()">
+                <button
+                  type="button"
+                  class="loro-modal__close"
+                  aria-label="Cerrar modal"
+                  (pointerdown)="$event.stopPropagation()"
+                  (touchstart)="$event.stopPropagation()"
+                  (click)="onCloseClick($event)">
                   X
                 </button>
               }
@@ -4632,7 +4690,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         </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"] }]
+  `, styles: [":host{display:contents;font-family:var(--loro-font-brand)}.loro-modal{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;width:100vw;height:100vh;height:var(--app-fill-height, var(--app-viewport-height, 100dvh));padding:1.25rem;isolation:isolate}.loro-modal__backdrop{position:absolute;inset:0;border:0;background:#140e276b;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);cursor:pointer}.loro-modal__dialog{position:relative;z-index:1;display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:min(100%,32rem);max-height:min(42rem,calc(var(--app-fill-height, var(--app-viewport-height, 100dvh)) - 2.5rem));overflow:hidden;border:1px solid var(--loro-border-subtle);border-radius:1.25rem;background:var(--loro-surface);box-shadow:var(--loro-shadow-panel);color:var(--loro-text);transition:transform .22s cubic-bezier(.22,1,.36,1)}.loro-modal__dialog--sm{width:min(100%,24rem)}.loro-modal__dialog--lg{width:min(100%,44rem)}.loro-modal__header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem;padding:1rem 1.15rem;border-bottom:1px solid var(--loro-border-subtle)}h2{margin:0;color:var(--loro-text-strong);font-size:1.08rem;font-weight:950;line-height:1.2}.loro-modal__close{display:grid;width:2.25rem;height:2.25rem;place-items:center;border:0;border-radius:50%;background:#6c3cff14;color:var(--loro-text-strong);font:inherit;font-weight:950;cursor:pointer}.loro-modal__content{min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:1.15rem}::ng-deep [loro-modal-actions]{display:flex;justify-content:flex-end;gap:.75rem;padding:.9rem 1.15rem 1.15rem;border-top:1px solid var(--loro-border-subtle)}@media(max-width:1023.88px){.loro-modal{align-items:end;padding:0}.loro-modal--sheet{place-items:end stretch}.loro-modal__dialog,.loro-modal__dialog--sm,.loro-modal__dialog--md,.loro-modal__dialog--lg{width:100%;max-height:calc(var(--app-fill-height, var(--app-viewport-height, 100dvh)) - 1rem);border-radius:1.75rem 1.75rem 0 0}.loro-modal--sheet .loro-modal__dialog,.loro-modal--sheet .loro-modal__dialog--sm,.loro-modal--sheet .loro-modal__dialog--md,.loro-modal--sheet .loro-modal__dialog--lg{--loro-modal-sheet-rest-top: max( calc(var(--app-fill-height, 100dvh) * .3), calc(env(safe-area-inset-top, 0px) + .65rem) );position:fixed;inset:auto 0 0;width:100%;max-height:calc(var(--app-fill-height, var(--app-viewport-height, 100dvh)) - max(var(--loro-modal-sheet-rest-top),calc(env(safe-area-inset-top,0px) + .65rem)));grid-template-rows:auto minmax(0,auto) auto;background:var(--loro-surface);overscroll-behavior-y:contain;transform:translate3d(0,var(--loro-modal-sheet-drag-y, 0px),0)}.loro-modal--sheet .loro-modal__dialog--dragging{transition:none}.loro-modal--sheet .loro-modal__content{display:block;height:auto;min-height:0;max-height:calc(var(--app-fill-height, var(--app-viewport-height, 100dvh)) - max(var(--loro-modal-sheet-rest-top),calc(env(safe-area-inset-top,0px) + .65rem)) - 4rem);overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;padding:.85rem;background:var(--loro-surface);touch-action:pan-y}.loro-modal--sheet .loro-modal__content--flush{padding:0}.loro-modal--center{align-items:center;padding:1rem}.loro-modal--center .loro-modal__dialog{border-radius:1.15rem}::ng-deep [loro-modal-actions]{flex-direction:column-reverse;padding:.7rem .9rem max(.85rem,env(safe-area-inset-bottom,0px));background:var(--loro-surface)}}@media(min-width:1024px){.loro-modal{place-items:center;padding:2rem}.loro-modal__backdrop{background:#070a129e;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.loro-modal--center .loro-modal__dialog,.loro-modal--sheet .loro-modal__dialog{position:relative;inset:auto;max-height:min(46rem,calc(var(--app-fill-height, var(--app-viewport-height, 100dvh)) - 4rem));border-radius:1.5rem}.loro-modal__dialog--sm{width:min(100%,28rem)}.loro-modal__dialog--md{width:min(100%,36rem)}.loro-modal__dialog--lg{width:min(100%,60rem)}}\n"] }]
         }], 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"] }] } });
 
 /**