@ajuarezso/sui-design-system 0.7.8 → 0.7.9

package/fesm2022/ajuarezso-sui-design-system.mjs

@@ -5613,7 +5613,7 @@ class SuiTooltip {
         this._panelRef.setInput('text', this.suiTooltip());
         this._panelRef.setInput('position', userPosition);
         this._panelRef.setInput('size', effectiveSize);
-        this._panelRef.setInput('theme', this.theme());
+        this._panelRef.setInput('theme', this.resolveTheme());
         this._panelRef.setInput('showArrow', this.showArrow());
         if (large) {
             this._panelRef.setInput('title', large.title);
@@ -5664,6 +5664,17 @@ class SuiTooltip {
         this.isVisible.set(false);
         this._renderer.removeAttribute(this._host.nativeElement, 'aria-describedby');
     }
+    /** 'auto' → contraste invertido con el tema de la página (light page → burbuja
+     *  dark, dark page → burbuja light). Se evalúa en cada open: un toggle de tema
+     *  con el tooltip cerrado queda cubierto; con él abierto es un no-caso. */
+    resolveTheme() {
+        const v = this.theme();
+        if (v !== 'auto')
+            return v;
+        const pageDark = typeof document !== 'undefined'
+            && document.documentElement.getAttribute('data-theme') === 'dark';
+        return pageDark ? 'light' : 'dark';
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: SuiTooltip, isStandalone: true, selector: "[suiTooltip], [suiTooltipLarge]", inputs: { suiTooltip: { classPropertyName: "suiTooltip", publicName: "suiTooltip", isSignal: true, isRequired: false, transformFunction: null }, suiTooltipLarge: { classPropertyName: "suiTooltipLarge", publicName: "suiTooltipLarge", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "suiTooltipSize", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showArrow: { classPropertyName: "showArrow", publicName: "showArrow", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
@@ -5774,14 +5785,14 @@ class SuiFormLabel {
         this.linkClick.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiFormLabel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiFormLabel, isStandalone: true, selector: "sui-form-label", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { linkClick: "linkClick" }, host: { properties: { "attr.data-sui-size": "size()", "attr.data-sui-disabled": "disabled() ? \"\" : null" } }, ngImport: i0, template: "<label [attr.for]=\"for()\" class=\"sui-form-label__main\">\n  <span class=\"sui-form-label__text\">{{ label() }}</span>\n  @if (required()) {\n    <span class=\"sui-form-label__required\" aria-hidden=\"true\">*</span>\n  }\n  @if (sublabel()) {\n    <span class=\"sui-form-label__sublabel\">{{ sublabel() }}</span>\n  }\n  @if (tooltip()) {\n    <button\n      type=\"button\"\n      class=\"sui-form-label__info\"\n      [suiTooltip]=\"tooltip()!\"\n      position=\"top\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"tooltip()!\"\n      [attr.disabled]=\"disabled() ? '' : null\"\n      (touchstart)=\"$any($event.currentTarget)\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      <!-- info-custom-fill: icono custom de SUI registrado en sui-icon\n           (SUI_CUSTOM_ICONS). Regla del proyecto: iconos SIEMPRE v\u00EDa sui-icon,\n           incluso los custom del DS. Color hereda de .sui-form-label__info. -->\n      <sui-icon name=\"info-custom-fill\" [size]=\"20\" />\n    </button>\n  }\n  @if (linkCfg(); as link) {\n    <!-- Link de acci\u00F3n = COMPONENTE sui-link-button real (variant `gray` size\n         `small` \u2192 12/16/500 text/sub-600 + disabled-300, el spec verificado del\n         nodo 266:2814, que en Figma ES una instancia de Link Buttons [1.1]).\n         Con href (SuiLinkConfig) renderiza <a> real; rel autom\u00E1tico via linkCfg.\n         El iOS touch fix vive dentro de sui-link-button. -->\n    <sui-link-button\n      class=\"sui-form-label__link\"\n      variant=\"gray\"\n      size=\"small\"\n      [disabled]=\"disabled()\"\n      [href]=\"link.href ?? null\"\n      [target]=\"link.target ?? null\"\n      [rel]=\"link.rel ?? null\"\n      (clicked)=\"onLinkClick($event)\"\n    >{{ link.label }}</sui-link-button>\n  }\n</label>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-form-label__main{display:flex;align-items:center;gap:1px;cursor:default;-webkit-user-select:none;user-select:none}:host([data-sui-size=xsmall]) .sui-form-label__main{font-size:var(--sui-type-label-xs-size);font-weight:var(--sui-type-label-xs-weight);line-height:var(--sui-type-label-xs-line);letter-spacing:var(--sui-type-label-xs-spacing)}:host([data-sui-size=small]) .sui-form-label__main{font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing)}:host([data-sui-size=medium]) .sui-form-label__main,:host(:not([data-sui-size])) .sui-form-label__main{font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing)}.sui-form-label__text{color:var(--sui-text-strong-950)}.sui-form-label__required{color:var(--sui-state-error-base)}.sui-form-label__sublabel{color:var(--sui-text-sub-600);font-weight:400}.sui-form-label__info{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:var(--sui-icon-disabled-300);cursor:pointer;border-radius:2px;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);line-height:1}.sui-form-label__info:hover:not(:disabled){color:var(--sui-icon-sub-600)}.sui-form-label__info:focus-visible{outline:2px solid var(--sui-stroke-strong-950);outline-offset:2px}.sui-form-label__info:disabled{cursor:not-allowed}.sui-form-label__info{font-size:0}.sui-form-label__link{margin-left:auto}:host([data-sui-disabled]) .sui-form-label__main{cursor:not-allowed}:host([data-sui-disabled]) .sui-form-label__text,:host([data-sui-disabled]) .sui-form-label__sublabel,:host([data-sui-disabled]) .sui-form-label__required{color:var(--sui-text-disabled-300)}:host([data-sui-disabled]) .sui-form-label__info{color:var(--sui-icon-disabled-300);cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "directive", type: SuiTooltip, selector: "[suiTooltip], [suiTooltipLarge]", inputs: ["suiTooltip", "suiTooltipLarge", "position", "suiTooltipSize", "theme", "delay", "disabled", "showArrow"] }, { kind: "component", type: SuiLinkButton, selector: "sui-link-button", inputs: ["variant", "size", "underline", "disabled", "leftIcon", "rightIcon", "href", "target", "rel", "type", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiFormLabel, isStandalone: true, selector: "sui-form-label", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { linkClick: "linkClick" }, host: { properties: { "attr.data-sui-size": "size()", "attr.data-sui-disabled": "disabled() ? \"\" : null" } }, ngImport: i0, template: "<label [attr.for]=\"for()\" class=\"sui-form-label__main\">\n  <span class=\"sui-form-label__text\">{{ label() }}</span>\n  @if (required()) {\n    <span class=\"sui-form-label__required\" aria-hidden=\"true\">*</span>\n  }\n  @if (sublabel()) {\n    <span class=\"sui-form-label__sublabel\">{{ sublabel() }}</span>\n  }\n  @if (tooltip()) {\n    <button\n      type=\"button\"\n      class=\"sui-form-label__info\"\n      [suiTooltip]=\"tooltip()!\"\n      position=\"top\"\n      theme=\"auto\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"tooltip()!\"\n      [attr.disabled]=\"disabled() ? '' : null\"\n      (touchstart)=\"$any($event.currentTarget)\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      <!-- info-custom-fill: icono custom de SUI registrado en sui-icon\n           (SUI_CUSTOM_ICONS). Regla del proyecto: iconos SIEMPRE v\u00EDa sui-icon,\n           incluso los custom del DS. Color hereda de .sui-form-label__info. -->\n      <sui-icon name=\"info-custom-fill\" [size]=\"20\" />\n    </button>\n  }\n  @if (linkCfg(); as link) {\n    <!-- Link de acci\u00F3n = COMPONENTE sui-link-button real (variant `gray` size\n         `small` \u2192 12/16/500 text/sub-600 + disabled-300, el spec verificado del\n         nodo 266:2814, que en Figma ES una instancia de Link Buttons [1.1]).\n         Con href (SuiLinkConfig) renderiza <a> real; rel autom\u00E1tico via linkCfg.\n         El iOS touch fix vive dentro de sui-link-button. -->\n    <sui-link-button\n      class=\"sui-form-label__link\"\n      variant=\"gray\"\n      size=\"small\"\n      [disabled]=\"disabled()\"\n      [href]=\"link.href ?? null\"\n      [target]=\"link.target ?? null\"\n      [rel]=\"link.rel ?? null\"\n      (clicked)=\"onLinkClick($event)\"\n    >{{ link.label }}</sui-link-button>\n  }\n</label>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-form-label__main{display:flex;align-items:center;gap:1px;cursor:default;-webkit-user-select:none;user-select:none}:host([data-sui-size=xsmall]) .sui-form-label__main{font-size:var(--sui-type-label-xs-size);font-weight:var(--sui-type-label-xs-weight);line-height:var(--sui-type-label-xs-line);letter-spacing:var(--sui-type-label-xs-spacing)}:host([data-sui-size=small]) .sui-form-label__main{font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing)}:host([data-sui-size=medium]) .sui-form-label__main,:host(:not([data-sui-size])) .sui-form-label__main{font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing)}.sui-form-label__text{color:var(--sui-text-strong-950)}.sui-form-label__required{color:var(--sui-state-error-base)}.sui-form-label__sublabel{color:var(--sui-text-sub-600);font-weight:400}.sui-form-label__info{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:var(--sui-icon-disabled-300);cursor:pointer;border-radius:2px;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);line-height:1}.sui-form-label__info:hover:not(:disabled){color:var(--sui-icon-sub-600)}.sui-form-label__info:focus-visible{outline:2px solid var(--sui-stroke-strong-950);outline-offset:2px}.sui-form-label__info:disabled{cursor:not-allowed}.sui-form-label__info{font-size:0}.sui-form-label__link{margin-left:auto}:host([data-sui-disabled]) .sui-form-label__main{cursor:not-allowed}:host([data-sui-disabled]) .sui-form-label__text,:host([data-sui-disabled]) .sui-form-label__sublabel,:host([data-sui-disabled]) .sui-form-label__required{color:var(--sui-text-disabled-300)}:host([data-sui-disabled]) .sui-form-label__info{color:var(--sui-icon-disabled-300);cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "directive", type: SuiTooltip, selector: "[suiTooltip], [suiTooltipLarge]", inputs: ["suiTooltip", "suiTooltipLarge", "position", "suiTooltipSize", "theme", "delay", "disabled", "showArrow"] }, { kind: "component", type: SuiLinkButton, selector: "sui-link-button", inputs: ["variant", "size", "underline", "disabled", "leftIcon", "rightIcon", "href", "target", "rel", "type", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiFormLabel, decorators: [{
             type: Component,
             args: [{ selector: 'sui-form-label', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiIcon, SuiTooltip, SuiLinkButton], host: {
                         '[attr.data-sui-size]': 'size()',
                         '[attr.data-sui-disabled]': 'disabled() ? "" : null',
-                    }, template: "<label [attr.for]=\"for()\" class=\"sui-form-label__main\">\n  <span class=\"sui-form-label__text\">{{ label() }}</span>\n  @if (required()) {\n    <span class=\"sui-form-label__required\" aria-hidden=\"true\">*</span>\n  }\n  @if (sublabel()) {\n    <span class=\"sui-form-label__sublabel\">{{ sublabel() }}</span>\n  }\n  @if (tooltip()) {\n    <button\n      type=\"button\"\n      class=\"sui-form-label__info\"\n      [suiTooltip]=\"tooltip()!\"\n      position=\"top\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"tooltip()!\"\n      [attr.disabled]=\"disabled() ? '' : null\"\n      (touchstart)=\"$any($event.currentTarget)\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      <!-- info-custom-fill: icono custom de SUI registrado en sui-icon\n           (SUI_CUSTOM_ICONS). Regla del proyecto: iconos SIEMPRE v\u00EDa sui-icon,\n           incluso los custom del DS. Color hereda de .sui-form-label__info. -->\n      <sui-icon name=\"info-custom-fill\" [size]=\"20\" />\n    </button>\n  }\n  @if (linkCfg(); as link) {\n    <!-- Link de acci\u00F3n = COMPONENTE sui-link-button real (variant `gray` size\n         `small` \u2192 12/16/500 text/sub-600 + disabled-300, el spec verificado del\n         nodo 266:2814, que en Figma ES una instancia de Link Buttons [1.1]).\n         Con href (SuiLinkConfig) renderiza <a> real; rel autom\u00E1tico via linkCfg.\n         El iOS touch fix vive dentro de sui-link-button. -->\n    <sui-link-button\n      class=\"sui-form-label__link\"\n      variant=\"gray\"\n      size=\"small\"\n      [disabled]=\"disabled()\"\n      [href]=\"link.href ?? null\"\n      [target]=\"link.target ?? null\"\n      [rel]=\"link.rel ?? null\"\n      (clicked)=\"onLinkClick($event)\"\n    >{{ link.label }}</sui-link-button>\n  }\n</label>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-form-label__main{display:flex;align-items:center;gap:1px;cursor:default;-webkit-user-select:none;user-select:none}:host([data-sui-size=xsmall]) .sui-form-label__main{font-size:var(--sui-type-label-xs-size);font-weight:var(--sui-type-label-xs-weight);line-height:var(--sui-type-label-xs-line);letter-spacing:var(--sui-type-label-xs-spacing)}:host([data-sui-size=small]) .sui-form-label__main{font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing)}:host([data-sui-size=medium]) .sui-form-label__main,:host(:not([data-sui-size])) .sui-form-label__main{font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing)}.sui-form-label__text{color:var(--sui-text-strong-950)}.sui-form-label__required{color:var(--sui-state-error-base)}.sui-form-label__sublabel{color:var(--sui-text-sub-600);font-weight:400}.sui-form-label__info{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:var(--sui-icon-disabled-300);cursor:pointer;border-radius:2px;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);line-height:1}.sui-form-label__info:hover:not(:disabled){color:var(--sui-icon-sub-600)}.sui-form-label__info:focus-visible{outline:2px solid var(--sui-stroke-strong-950);outline-offset:2px}.sui-form-label__info:disabled{cursor:not-allowed}.sui-form-label__info{font-size:0}.sui-form-label__link{margin-left:auto}:host([data-sui-disabled]) .sui-form-label__main{cursor:not-allowed}:host([data-sui-disabled]) .sui-form-label__text,:host([data-sui-disabled]) .sui-form-label__sublabel,:host([data-sui-disabled]) .sui-form-label__required{color:var(--sui-text-disabled-300)}:host([data-sui-disabled]) .sui-form-label__info{color:var(--sui-icon-disabled-300);cursor:not-allowed}\n"] }]
+                    }, template: "<label [attr.for]=\"for()\" class=\"sui-form-label__main\">\n  <span class=\"sui-form-label__text\">{{ label() }}</span>\n  @if (required()) {\n    <span class=\"sui-form-label__required\" aria-hidden=\"true\">*</span>\n  }\n  @if (sublabel()) {\n    <span class=\"sui-form-label__sublabel\">{{ sublabel() }}</span>\n  }\n  @if (tooltip()) {\n    <button\n      type=\"button\"\n      class=\"sui-form-label__info\"\n      [suiTooltip]=\"tooltip()!\"\n      position=\"top\"\n      theme=\"auto\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"tooltip()!\"\n      [attr.disabled]=\"disabled() ? '' : null\"\n      (touchstart)=\"$any($event.currentTarget)\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      <!-- info-custom-fill: icono custom de SUI registrado en sui-icon\n           (SUI_CUSTOM_ICONS). Regla del proyecto: iconos SIEMPRE v\u00EDa sui-icon,\n           incluso los custom del DS. Color hereda de .sui-form-label__info. -->\n      <sui-icon name=\"info-custom-fill\" [size]=\"20\" />\n    </button>\n  }\n  @if (linkCfg(); as link) {\n    <!-- Link de acci\u00F3n = COMPONENTE sui-link-button real (variant `gray` size\n         `small` \u2192 12/16/500 text/sub-600 + disabled-300, el spec verificado del\n         nodo 266:2814, que en Figma ES una instancia de Link Buttons [1.1]).\n         Con href (SuiLinkConfig) renderiza <a> real; rel autom\u00E1tico via linkCfg.\n         El iOS touch fix vive dentro de sui-link-button. -->\n    <sui-link-button\n      class=\"sui-form-label__link\"\n      variant=\"gray\"\n      size=\"small\"\n      [disabled]=\"disabled()\"\n      [href]=\"link.href ?? null\"\n      [target]=\"link.target ?? null\"\n      [rel]=\"link.rel ?? null\"\n      (clicked)=\"onLinkClick($event)\"\n    >{{ link.label }}</sui-link-button>\n  }\n</label>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-form-label__main{display:flex;align-items:center;gap:1px;cursor:default;-webkit-user-select:none;user-select:none}:host([data-sui-size=xsmall]) .sui-form-label__main{font-size:var(--sui-type-label-xs-size);font-weight:var(--sui-type-label-xs-weight);line-height:var(--sui-type-label-xs-line);letter-spacing:var(--sui-type-label-xs-spacing)}:host([data-sui-size=small]) .sui-form-label__main{font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing)}:host([data-sui-size=medium]) .sui-form-label__main,:host(:not([data-sui-size])) .sui-form-label__main{font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing)}.sui-form-label__text{color:var(--sui-text-strong-950)}.sui-form-label__required{color:var(--sui-state-error-base)}.sui-form-label__sublabel{color:var(--sui-text-sub-600);font-weight:400}.sui-form-label__info{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:var(--sui-icon-disabled-300);cursor:pointer;border-radius:2px;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);line-height:1}.sui-form-label__info:hover:not(:disabled){color:var(--sui-icon-sub-600)}.sui-form-label__info:focus-visible{outline:2px solid var(--sui-stroke-strong-950);outline-offset:2px}.sui-form-label__info:disabled{cursor:not-allowed}.sui-form-label__info{font-size:0}.sui-form-label__link{margin-left:auto}:host([data-sui-disabled]) .sui-form-label__main{cursor:not-allowed}:host([data-sui-disabled]) .sui-form-label__text,:host([data-sui-disabled]) .sui-form-label__sublabel,:host([data-sui-disabled]) .sui-form-label__required{color:var(--sui-text-disabled-300)}:host([data-sui-disabled]) .sui-form-label__info{color:var(--sui-icon-disabled-300);cursor:not-allowed}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], for: [{ type: i0.Input, args: [{ isSignal: true, alias: "for", required: false }] }], linkClick: [{ type: i0.Output, args: ["linkClick"] }] } });
 
 /**
@@ -5800,31 +5811,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  *   - Disabled → variant 'disabled'  (cerrado en esta capa)
  *
  * @input message: string | null — Mensaje del hint. Nada se renderiza si es null/vacío
- * @input variant: 'neutral' | 'error' | 'success' | 'warning' | 'disabled' — Variante visual, default 'neutral'
+ * @input variant: 'neutral' | 'error' | 'disabled' — Variante visual, default 'neutral'.
+ *   Nota 2026-07-22: las variantes semánticas positivas se eliminaron por falta de
+ *   consumidores; para feedback positivo usar sui-alert (caso mi-negocio 'Link disponible').
  * @input icon: string | null | undefined — Icono Remix personalizado.
  *   - undefined (default): usa el icono default por variant
  *   - null: fuerza sin icono
  *   - string: usa ese nombre de icono Remix
- * @input size: 'xsmall' | 'small' | 'medium' — Tamaño, default 'medium'
  *
  * Default icons por variant:
  *   - neutral  → null (sin icono por defecto)
  *   - error    → 'error-warning-line'
- *   - success  → 'checkbox-circle-line'
- *   - warning  → 'alert-line'
  *   - disabled → 'information-fill' (VERIFICADO Figma 266:5284: el estado
  *       Disabled SÍ muestra el icono info, coloreado --text/disabled-300)
  *
  * Color tokens por variant:
  *   - neutral  → text-sub-600  (mismo que sui-input __message--hint)
  *   - error    → state-error-base (#fb3748)
- *   - success  → state-success-base
- *   - warning  → state-warning-base
  *   - disabled → text-disabled-300 (estado Disabled de Figma; mismo token que el field)
  *
- * extraFeatures preservadas (audit): variantes `success` y `warning` + override de icon
+ * extraFeatures preservadas (audit): override de `icon`.
+ *   Nota 2026-07-22: el input `size` se ELIMINÓ — era un no-op (cero reglas CSS,
+ *   la tipografía del hint es siempre Paragraph/X-Small 12/16 como en Figma).
  *   no aparecen en el frame Hint Text de Figma (solo Default/Error/Disabled) — se mantienen.
- *   El input `size` (xsmall/small/medium) tampoco está auditado — se preserva.
  */
 class SuiFormHint {
     /** Mensaje del hint. Si null, no renderiza nada */
@@ -5838,16 +5847,12 @@ class SuiFormHint {
      * - string: usa ese icono
      */
     icon = input(undefined, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-    /** Tamaño visual */
-    size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     /** Default icons per variant */
     static _defaultIcons = {
         neutral: null,
         // Figma 267:1279 (Text Input State=Error, hint I267:1285): information-fill
         // relleno recoloreado a error-base — mismo glifo que Default, NO outline.
         error: 'information-fill',
-        success: 'checkbox-circle-line',
-        warning: 'alert-line',
         // Figma node 266:5284 (Hint Text State=Disabled) SÍ renderiza el icono
         // `information-fill` (mismo que Default), solo coloreado --text/disabled-300.
         // Se usa `information-fill` (variante rellena) para matchear Figma y ser
@@ -5865,20 +5870,19 @@ class SuiFormHint {
         return SuiFormHint._defaultIcons[this.variant()];
     }, ...(ngDevMode ? [{ debugName: "resolvedIcon" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiFormHint, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiFormHint, isStandalone: true, selector: "sui-form-hint", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-sui-size": "size()", "attr.data-sui-variant": "variant()", "attr.data-sui-has-message": "message() ? \"\" : null" } }, ngImport: i0, template: "@if (message()) {\n  <span class=\"sui-form-hint\">\n    @if (resolvedIcon()) {\n      <sui-icon [name]=\"resolvedIcon()!\" [size]=\"16\" class=\"sui-form-hint__icon\" />\n    }\n    <span class=\"sui-form-hint__text\">{{ message() }}</span>\n  </span>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}:host(:not([data-sui-has-message])){display:none}.sui-form-hint{display:inline-flex;align-items:flex-start;gap:4px;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-xs-size);font-weight:var(--sui-type-paragraph-xs-weight);line-height:var(--sui-type-paragraph-xs-line);letter-spacing:var(--sui-type-paragraph-xs-spacing)}:host(:not([data-sui-variant])) .sui-form-hint,:host([data-sui-variant=neutral]) .sui-form-hint{color:var(--sui-text-sub-600)}:host([data-sui-variant=error]) .sui-form-hint{color:var(--sui-state-error-base)}:host([data-sui-variant=success]) .sui-form-hint{color:var(--sui-state-success-base)}:host([data-sui-variant=warning]) .sui-form-hint{color:var(--sui-state-warning-base)}:host([data-sui-variant=disabled]) .sui-form-hint{color:var(--sui-text-disabled-300)}.sui-form-hint__icon{flex-shrink:0}:host(:not([data-sui-variant])) .sui-form-hint__icon,:host([data-sui-variant=neutral]) .sui-form-hint__icon{color:var(--sui-icon-soft-400)}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiFormHint, isStandalone: true, selector: "sui-form-hint", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-sui-variant": "variant()", "attr.data-sui-has-message": "message() ? \"\" : null" } }, ngImport: i0, template: "@if (message()) {\n  <span class=\"sui-form-hint\">\n    @if (resolvedIcon()) {\n      <sui-icon [name]=\"resolvedIcon()!\" [size]=\"16\" class=\"sui-form-hint__icon\" />\n    }\n    <span class=\"sui-form-hint__text\">{{ message() }}</span>\n  </span>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}:host(:not([data-sui-has-message])){display:none}.sui-form-hint{display:inline-flex;align-items:flex-start;gap:4px;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-xs-size);font-weight:var(--sui-type-paragraph-xs-weight);line-height:var(--sui-type-paragraph-xs-line);letter-spacing:var(--sui-type-paragraph-xs-spacing)}:host(:not([data-sui-variant])) .sui-form-hint,:host([data-sui-variant=neutral]) .sui-form-hint{color:var(--sui-text-sub-600)}:host([data-sui-variant=error]) .sui-form-hint{color:var(--sui-state-error-base)}:host([data-sui-variant=disabled]) .sui-form-hint{color:var(--sui-text-disabled-300)}.sui-form-hint__icon{flex-shrink:0}:host(:not([data-sui-variant])) .sui-form-hint__icon,:host([data-sui-variant=neutral]) .sui-form-hint__icon{color:var(--sui-icon-soft-400)}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiFormHint, decorators: [{
             type: Component,
             args: [{ selector: 'sui-form-hint', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiIcon], host: {
-                        '[attr.data-sui-size]': 'size()',
                         '[attr.data-sui-variant]': 'variant()',
                         /* Marca si el host tiene mensaje para que el CSS pueda ocultarlo
                            cuando está vacío. Sin esto, el `:host { display: block }` ocupaba
                            espacio reservado abajo del consumer (sui-input/sui-select/etc)
                            aunque el template interno (@if message()) no rendereara nada. */
                         '[attr.data-sui-has-message]': 'message() ? "" : null',
-                    }, template: "@if (message()) {\n  <span class=\"sui-form-hint\">\n    @if (resolvedIcon()) {\n      <sui-icon [name]=\"resolvedIcon()!\" [size]=\"16\" class=\"sui-form-hint__icon\" />\n    }\n    <span class=\"sui-form-hint__text\">{{ message() }}</span>\n  </span>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}:host(:not([data-sui-has-message])){display:none}.sui-form-hint{display:inline-flex;align-items:flex-start;gap:4px;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-xs-size);font-weight:var(--sui-type-paragraph-xs-weight);line-height:var(--sui-type-paragraph-xs-line);letter-spacing:var(--sui-type-paragraph-xs-spacing)}:host(:not([data-sui-variant])) .sui-form-hint,:host([data-sui-variant=neutral]) .sui-form-hint{color:var(--sui-text-sub-600)}:host([data-sui-variant=error]) .sui-form-hint{color:var(--sui-state-error-base)}:host([data-sui-variant=success]) .sui-form-hint{color:var(--sui-state-success-base)}:host([data-sui-variant=warning]) .sui-form-hint{color:var(--sui-state-warning-base)}:host([data-sui-variant=disabled]) .sui-form-hint{color:var(--sui-text-disabled-300)}.sui-form-hint__icon{flex-shrink:0}:host(:not([data-sui-variant])) .sui-form-hint__icon,:host([data-sui-variant=neutral]) .sui-form-hint__icon{color:var(--sui-icon-soft-400)}\n"] }]
-        }], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+                    }, template: "@if (message()) {\n  <span class=\"sui-form-hint\">\n    @if (resolvedIcon()) {\n      <sui-icon [name]=\"resolvedIcon()!\" [size]=\"16\" class=\"sui-form-hint__icon\" />\n    }\n    <span class=\"sui-form-hint__text\">{{ message() }}</span>\n  </span>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}:host(:not([data-sui-has-message])){display:none}.sui-form-hint{display:inline-flex;align-items:flex-start;gap:4px;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-xs-size);font-weight:var(--sui-type-paragraph-xs-weight);line-height:var(--sui-type-paragraph-xs-line);letter-spacing:var(--sui-type-paragraph-xs-spacing)}:host(:not([data-sui-variant])) .sui-form-hint,:host([data-sui-variant=neutral]) .sui-form-hint{color:var(--sui-text-sub-600)}:host([data-sui-variant=error]) .sui-form-hint{color:var(--sui-state-error-base)}:host([data-sui-variant=disabled]) .sui-form-hint{color:var(--sui-text-disabled-300)}.sui-form-hint__icon{flex-shrink:0}:host(:not([data-sui-variant])) .sui-form-hint__icon,:host([data-sui-variant=neutral]) .sui-form-hint__icon{color:var(--sui-icon-soft-400)}\n"] }]
+        }], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
 
 /**
  * SUI Counter Input — SUI Design System 2.0
@@ -6028,7 +6032,7 @@ class SuiCounterInput {
                 useExisting: forwardRef(() => SuiCounterInput),
                 multi: true,
             },
-        ], ngImport: i0, template: "@if (label()) {\n  <sui-form-label\n    [label]=\"label()!\"\n    [sublabel]=\"sublabel()\"\n    [required]=\"required()\"\n    [tooltip]=\"tooltip()\"\n    [size]=\"size()\"\n    class=\"sui-counter-input__label-host\"\n  />\n}\n\n<div\n  class=\"sui-counter-input__field\"\n  [class.sui-counter-input__field--error]=\"error()\"\n  [class.sui-counter-input__field--disabled]=\"isDisabled()\"\n>\n  <!-- Stepper \u2212 (decrement) -->\n  <button\n    type=\"button\"\n    class=\"sui-counter-input__stepper\"\n    [attr.aria-label]=\"decrementLabel()\"\n    [disabled]=\"!canDecrement() || null\"\n    (click)=\"decrement()\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    <sui-icon name=\"subtract-line\" [size]=\"20\" />\n  </button>\n\n  <!-- Valor centrado (spinbutton) -->\n  <span\n    class=\"sui-counter-input__value\"\n    role=\"spinbutton\"\n    [attr.aria-valuenow]=\"effectiveValue()\"\n    [attr.aria-valuemin]=\"ariaMin()\"\n    [attr.aria-valuemax]=\"ariaMax()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n    [attr.aria-invalid]=\"error() ? 'true' : null\"\n  >\n    {{ displayValue() }}\n  </span>\n\n  <!-- Stepper + (increment) -->\n  <button\n    type=\"button\"\n    class=\"sui-counter-input__stepper\"\n    [attr.aria-label]=\"incrementLabel()\"\n    [disabled]=\"!canIncrement() || null\"\n    (click)=\"increment()\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    <sui-icon name=\"add-line\" [size]=\"20\" />\n  </button>\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n  <sui-form-hint\n    [message]=\"error() ? errorMessage() : hint()\"\n    [variant]=\"error() ? 'error' : 'neutral'\"\n    [size]=\"size()\"\n    class=\"sui-counter-input__hint-host\"\n  />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-counter-input__label-host{display:block;margin-bottom:6px}.sui-counter-input__hint-host{display:block;margin-top:6px}.sui-counter-input__field{display:flex;align-items:center;justify-content:space-between;width:100%;box-sizing:border-box;overflow:hidden;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);transition:background var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=medium]) .sui-counter-input__field,:host(:not([data-sui-size])) .sui-counter-input__field{gap:8px;padding:7px 8px;border-radius:var(--sui-radius-10, 10px);min-height:40px}:host([data-sui-size=small]) .sui-counter-input__field{gap:6px;padding:5px 6px;border-radius:var(--sui-radius-8, 8px);min-height:36px}:host([data-sui-size=xsmall]) .sui-counter-input__field{gap:4px;padding:3px 4px;border-radius:var(--sui-radius-8, 8px);min-height:32px}.sui-counter-input__field:not(.sui-counter-input__field--disabled):not(.sui-counter-input__field--error):hover{background:var(--sui-bg-weak-50);border-color:transparent}.sui-counter-input__field:not(.sui-counter-input__field--disabled):not(.sui-counter-input__field--error):focus-within{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-counter-input__field--error{border-color:var(--sui-state-error-base);box-shadow:var(--sui-regular-shadow-x-small)}.sui-counter-input__field--error:focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 3px var(--sui-red-alpha-10, rgba(251, 55, 72, .1019607843))}.sui-counter-input__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-counter-input__stepper{appearance:none;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;width:24px;height:24px;min-width:0;min-height:0;margin:0;padding:2px;border:0;border-radius:var(--sui-radius-6, 6px);background:transparent;color:var(--sui-icon-sub-600);line-height:0;cursor:pointer;transition:background .12s,color .12s,transform var(--dur-instant, 80ms) var(--ease-ek, cubic-bezier(.22, 1, .36, 1))}.sui-counter-input__stepper:hover:not(:disabled){background:var(--sui-bg-weak-50);color:var(--sui-icon-strong-950)}.sui-counter-input__stepper:active:not(:disabled){background:var(--sui-bg-surface-800);color:var(--sui-icon-white-0);transform:scale(.92)}.sui-counter-input__stepper:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}.sui-counter-input__stepper:disabled{color:var(--sui-icon-disabled-300);cursor:not-allowed;pointer-events:none;opacity:.5}.sui-counter-input__field:hover .sui-counter-input__stepper:hover:not(:disabled){background:var(--sui-bg-white-0)}:host([data-sui-disabled]) .sui-counter-input__stepper{color:var(--sui-icon-disabled-300);opacity:1}.sui-counter-input__value{flex:1 1 auto;min-width:0;text-align:center;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size, 14px);font-weight:var(--sui-type-paragraph-sm-weight, 400);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;-webkit-user-select:none;user-select:none;color:var(--sui-text-strong-950)}.sui-counter-input__field--disabled .sui-counter-input__value{color:var(--sui-text-disabled-300)}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiFormLabel, selector: "sui-form-label", inputs: ["label", "sublabel", "required", "tooltip", "link", "size", "disabled", "for"], outputs: ["linkClick"] }, { kind: "component", type: SuiFormHint, selector: "sui-form-hint", inputs: ["message", "variant", "icon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "@if (label()) {\n  <sui-form-label\n    [label]=\"label()!\"\n    [sublabel]=\"sublabel()\"\n    [required]=\"required()\"\n    [tooltip]=\"tooltip()\"\n    [size]=\"size()\"\n    class=\"sui-counter-input__label-host\"\n  />\n}\n\n<div\n  class=\"sui-counter-input__field\"\n  [class.sui-counter-input__field--error]=\"error()\"\n  [class.sui-counter-input__field--disabled]=\"isDisabled()\"\n>\n  <!-- Stepper \u2212 (decrement) -->\n  <button\n    type=\"button\"\n    class=\"sui-counter-input__stepper\"\n    [attr.aria-label]=\"decrementLabel()\"\n    [disabled]=\"!canDecrement() || null\"\n    (click)=\"decrement()\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    <sui-icon name=\"subtract-line\" [size]=\"20\" />\n  </button>\n\n  <!-- Valor centrado (spinbutton) -->\n  <span\n    class=\"sui-counter-input__value\"\n    role=\"spinbutton\"\n    [attr.aria-valuenow]=\"effectiveValue()\"\n    [attr.aria-valuemin]=\"ariaMin()\"\n    [attr.aria-valuemax]=\"ariaMax()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n    [attr.aria-invalid]=\"error() ? 'true' : null\"\n  >\n    {{ displayValue() }}\n  </span>\n\n  <!-- Stepper + (increment) -->\n  <button\n    type=\"button\"\n    class=\"sui-counter-input__stepper\"\n    [attr.aria-label]=\"incrementLabel()\"\n    [disabled]=\"!canIncrement() || null\"\n    (click)=\"increment()\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    <sui-icon name=\"add-line\" [size]=\"20\" />\n  </button>\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n  <sui-form-hint\n    [message]=\"error() ? errorMessage() : hint()\"\n    [variant]=\"error() ? 'error' : 'neutral'\"\n    class=\"sui-counter-input__hint-host\"\n  />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-counter-input__label-host{display:block;margin-bottom:6px}.sui-counter-input__hint-host{display:block;margin-top:6px}.sui-counter-input__field{display:flex;align-items:center;justify-content:space-between;width:100%;box-sizing:border-box;overflow:hidden;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);transition:background var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=medium]) .sui-counter-input__field,:host(:not([data-sui-size])) .sui-counter-input__field{gap:8px;padding:7px 8px;border-radius:var(--sui-radius-10, 10px);min-height:40px}:host([data-sui-size=small]) .sui-counter-input__field{gap:6px;padding:5px 6px;border-radius:var(--sui-radius-8, 8px);min-height:36px}:host([data-sui-size=xsmall]) .sui-counter-input__field{gap:4px;padding:3px 4px;border-radius:var(--sui-radius-8, 8px);min-height:32px}.sui-counter-input__field:not(.sui-counter-input__field--disabled):not(.sui-counter-input__field--error):hover{background:var(--sui-bg-weak-50);border-color:transparent}.sui-counter-input__field:not(.sui-counter-input__field--disabled):not(.sui-counter-input__field--error):focus-within{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-counter-input__field--error{border-color:var(--sui-state-error-base);box-shadow:var(--sui-regular-shadow-x-small)}.sui-counter-input__field--error:focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 3px var(--sui-red-alpha-10, rgba(251, 55, 72, .1019607843))}.sui-counter-input__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-counter-input__stepper{appearance:none;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;width:24px;height:24px;min-width:0;min-height:0;margin:0;padding:2px;border:0;border-radius:var(--sui-radius-6, 6px);background:transparent;color:var(--sui-icon-sub-600);line-height:0;cursor:pointer;transition:background .12s,color .12s,transform var(--dur-instant, 80ms) var(--ease-ek, cubic-bezier(.22, 1, .36, 1))}.sui-counter-input__stepper:hover:not(:disabled){background:var(--sui-bg-weak-50);color:var(--sui-icon-strong-950)}.sui-counter-input__stepper:active:not(:disabled){background:var(--sui-bg-surface-800);color:var(--sui-icon-white-0);transform:scale(.92)}.sui-counter-input__stepper:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}.sui-counter-input__stepper:disabled{color:var(--sui-icon-disabled-300);cursor:not-allowed;pointer-events:none;opacity:.5}.sui-counter-input__field:hover .sui-counter-input__stepper:hover:not(:disabled){background:var(--sui-bg-white-0)}:host([data-sui-disabled]) .sui-counter-input__stepper{color:var(--sui-icon-disabled-300);opacity:1}.sui-counter-input__value{flex:1 1 auto;min-width:0;text-align:center;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size, 14px);font-weight:var(--sui-type-paragraph-sm-weight, 400);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;-webkit-user-select:none;user-select:none;color:var(--sui-text-strong-950)}.sui-counter-input__field--disabled .sui-counter-input__value{color:var(--sui-text-disabled-300)}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiFormLabel, selector: "sui-form-label", inputs: ["label", "sublabel", "required", "tooltip", "link", "size", "disabled", "for"], outputs: ["linkClick"] }, { kind: "component", type: SuiFormHint, selector: "sui-form-hint", inputs: ["message", "variant", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiCounterInput, decorators: [{
             type: Component,
@@ -6044,7 +6048,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[attr.data-sui-size]': 'size()',
                         '[attr.data-sui-disabled]': 'isDisabled() ? "" : null',
                         '[attr.data-sui-error]': 'error() ? "" : null',
-                    }, template: "@if (label()) {\n  <sui-form-label\n    [label]=\"label()!\"\n    [sublabel]=\"sublabel()\"\n    [required]=\"required()\"\n    [tooltip]=\"tooltip()\"\n    [size]=\"size()\"\n    class=\"sui-counter-input__label-host\"\n  />\n}\n\n<div\n  class=\"sui-counter-input__field\"\n  [class.sui-counter-input__field--error]=\"error()\"\n  [class.sui-counter-input__field--disabled]=\"isDisabled()\"\n>\n  <!-- Stepper \u2212 (decrement) -->\n  <button\n    type=\"button\"\n    class=\"sui-counter-input__stepper\"\n    [attr.aria-label]=\"decrementLabel()\"\n    [disabled]=\"!canDecrement() || null\"\n    (click)=\"decrement()\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    <sui-icon name=\"subtract-line\" [size]=\"20\" />\n  </button>\n\n  <!-- Valor centrado (spinbutton) -->\n  <span\n    class=\"sui-counter-input__value\"\n    role=\"spinbutton\"\n    [attr.aria-valuenow]=\"effectiveValue()\"\n    [attr.aria-valuemin]=\"ariaMin()\"\n    [attr.aria-valuemax]=\"ariaMax()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n    [attr.aria-invalid]=\"error() ? 'true' : null\"\n  >\n    {{ displayValue() }}\n  </span>\n\n  <!-- Stepper + (increment) -->\n  <button\n    type=\"button\"\n    class=\"sui-counter-input__stepper\"\n    [attr.aria-label]=\"incrementLabel()\"\n    [disabled]=\"!canIncrement() || null\"\n    (click)=\"increment()\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    <sui-icon name=\"add-line\" [size]=\"20\" />\n  </button>\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n  <sui-form-hint\n    [message]=\"error() ? errorMessage() : hint()\"\n    [variant]=\"error() ? 'error' : 'neutral'\"\n    [size]=\"size()\"\n    class=\"sui-counter-input__hint-host\"\n  />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-counter-input__label-host{display:block;margin-bottom:6px}.sui-counter-input__hint-host{display:block;margin-top:6px}.sui-counter-input__field{display:flex;align-items:center;justify-content:space-between;width:100%;box-sizing:border-box;overflow:hidden;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);transition:background var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=medium]) .sui-counter-input__field,:host(:not([data-sui-size])) .sui-counter-input__field{gap:8px;padding:7px 8px;border-radius:var(--sui-radius-10, 10px);min-height:40px}:host([data-sui-size=small]) .sui-counter-input__field{gap:6px;padding:5px 6px;border-radius:var(--sui-radius-8, 8px);min-height:36px}:host([data-sui-size=xsmall]) .sui-counter-input__field{gap:4px;padding:3px 4px;border-radius:var(--sui-radius-8, 8px);min-height:32px}.sui-counter-input__field:not(.sui-counter-input__field--disabled):not(.sui-counter-input__field--error):hover{background:var(--sui-bg-weak-50);border-color:transparent}.sui-counter-input__field:not(.sui-counter-input__field--disabled):not(.sui-counter-input__field--error):focus-within{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-counter-input__field--error{border-color:var(--sui-state-error-base);box-shadow:var(--sui-regular-shadow-x-small)}.sui-counter-input__field--error:focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 3px var(--sui-red-alpha-10, rgba(251, 55, 72, .1019607843))}.sui-counter-input__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-counter-input__stepper{appearance:none;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;width:24px;height:24px;min-width:0;min-height:0;margin:0;padding:2px;border:0;border-radius:var(--sui-radius-6, 6px);background:transparent;color:var(--sui-icon-sub-600);line-height:0;cursor:pointer;transition:background .12s,color .12s,transform var(--dur-instant, 80ms) var(--ease-ek, cubic-bezier(.22, 1, .36, 1))}.sui-counter-input__stepper:hover:not(:disabled){background:var(--sui-bg-weak-50);color:var(--sui-icon-strong-950)}.sui-counter-input__stepper:active:not(:disabled){background:var(--sui-bg-surface-800);color:var(--sui-icon-white-0);transform:scale(.92)}.sui-counter-input__stepper:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}.sui-counter-input__stepper:disabled{color:var(--sui-icon-disabled-300);cursor:not-allowed;pointer-events:none;opacity:.5}.sui-counter-input__field:hover .sui-counter-input__stepper:hover:not(:disabled){background:var(--sui-bg-white-0)}:host([data-sui-disabled]) .sui-counter-input__stepper{color:var(--sui-icon-disabled-300);opacity:1}.sui-counter-input__value{flex:1 1 auto;min-width:0;text-align:center;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size, 14px);font-weight:var(--sui-type-paragraph-sm-weight, 400);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;-webkit-user-select:none;user-select:none;color:var(--sui-text-strong-950)}.sui-counter-input__field--disabled .sui-counter-input__value{color:var(--sui-text-disabled-300)}\n"] }]
+                    }, template: "@if (label()) {\n  <sui-form-label\n    [label]=\"label()!\"\n    [sublabel]=\"sublabel()\"\n    [required]=\"required()\"\n    [tooltip]=\"tooltip()\"\n    [size]=\"size()\"\n    class=\"sui-counter-input__label-host\"\n  />\n}\n\n<div\n  class=\"sui-counter-input__field\"\n  [class.sui-counter-input__field--error]=\"error()\"\n  [class.sui-counter-input__field--disabled]=\"isDisabled()\"\n>\n  <!-- Stepper \u2212 (decrement) -->\n  <button\n    type=\"button\"\n    class=\"sui-counter-input__stepper\"\n    [attr.aria-label]=\"decrementLabel()\"\n    [disabled]=\"!canDecrement() || null\"\n    (click)=\"decrement()\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    <sui-icon name=\"subtract-line\" [size]=\"20\" />\n  </button>\n\n  <!-- Valor centrado (spinbutton) -->\n  <span\n    class=\"sui-counter-input__value\"\n    role=\"spinbutton\"\n    [attr.aria-valuenow]=\"effectiveValue()\"\n    [attr.aria-valuemin]=\"ariaMin()\"\n    [attr.aria-valuemax]=\"ariaMax()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n    [attr.aria-invalid]=\"error() ? 'true' : null\"\n  >\n    {{ displayValue() }}\n  </span>\n\n  <!-- Stepper + (increment) -->\n  <button\n    type=\"button\"\n    class=\"sui-counter-input__stepper\"\n    [attr.aria-label]=\"incrementLabel()\"\n    [disabled]=\"!canIncrement() || null\"\n    (click)=\"increment()\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    <sui-icon name=\"add-line\" [size]=\"20\" />\n  </button>\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n  <sui-form-hint\n    [message]=\"error() ? errorMessage() : hint()\"\n    [variant]=\"error() ? 'error' : 'neutral'\"\n    class=\"sui-counter-input__hint-host\"\n  />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-counter-input__label-host{display:block;margin-bottom:6px}.sui-counter-input__hint-host{display:block;margin-top:6px}.sui-counter-input__field{display:flex;align-items:center;justify-content:space-between;width:100%;box-sizing:border-box;overflow:hidden;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);transition:background var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=medium]) .sui-counter-input__field,:host(:not([data-sui-size])) .sui-counter-input__field{gap:8px;padding:7px 8px;border-radius:var(--sui-radius-10, 10px);min-height:40px}:host([data-sui-size=small]) .sui-counter-input__field{gap:6px;padding:5px 6px;border-radius:var(--sui-radius-8, 8px);min-height:36px}:host([data-sui-size=xsmall]) .sui-counter-input__field{gap:4px;padding:3px 4px;border-radius:var(--sui-radius-8, 8px);min-height:32px}.sui-counter-input__field:not(.sui-counter-input__field--disabled):not(.sui-counter-input__field--error):hover{background:var(--sui-bg-weak-50);border-color:transparent}.sui-counter-input__field:not(.sui-counter-input__field--disabled):not(.sui-counter-input__field--error):focus-within{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-counter-input__field--error{border-color:var(--sui-state-error-base);box-shadow:var(--sui-regular-shadow-x-small)}.sui-counter-input__field--error:focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 3px var(--sui-red-alpha-10, rgba(251, 55, 72, .1019607843))}.sui-counter-input__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-counter-input__stepper{appearance:none;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;width:24px;height:24px;min-width:0;min-height:0;margin:0;padding:2px;border:0;border-radius:var(--sui-radius-6, 6px);background:transparent;color:var(--sui-icon-sub-600);line-height:0;cursor:pointer;transition:background .12s,color .12s,transform var(--dur-instant, 80ms) var(--ease-ek, cubic-bezier(.22, 1, .36, 1))}.sui-counter-input__stepper:hover:not(:disabled){background:var(--sui-bg-weak-50);color:var(--sui-icon-strong-950)}.sui-counter-input__stepper:active:not(:disabled){background:var(--sui-bg-surface-800);color:var(--sui-icon-white-0);transform:scale(.92)}.sui-counter-input__stepper:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}.sui-counter-input__stepper:disabled{color:var(--sui-icon-disabled-300);cursor:not-allowed;pointer-events:none;opacity:.5}.sui-counter-input__field:hover .sui-counter-input__stepper:hover:not(:disabled){background:var(--sui-bg-white-0)}:host([data-sui-disabled]) .sui-counter-input__stepper{color:var(--sui-icon-disabled-300);opacity:1}.sui-counter-input__value{flex:1 1 auto;min-width:0;text-align:center;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size, 14px);font-weight:var(--sui-type-paragraph-sm-weight, 400);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;-webkit-user-select:none;user-select:none;color:var(--sui-text-strong-950)}.sui-counter-input__field--disabled .sui-counter-input__value{color:var(--sui-text-disabled-300)}\n"] }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], decrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "decrementLabel", required: false }] }], incrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "incrementLabel", required: false }] }] } });
 
 /**
@@ -9837,7 +9841,7 @@ class SuiInput {
                 useExisting: forwardRef(() => SuiInput),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true }], ngImport: i0, template: "@if (label()) {\n  <sui-form-label\n    [label]=\"label()!\"\n    [sublabel]=\"sublabel()\"\n    [required]=\"required()\"\n    [tooltip]=\"tooltip()\"\n    [size]=\"size()\"\n    class=\"sui-input__label-host\"\n  />\n}\n\n<div\n  class=\"sui-input__field\"\n  [class.sui-input__field--error]=\"error()\"\n  [class.sui-input__field--disabled]=\"isDisabled()\"\n  [class.sui-input__field--readonly]=\"readonly()\"\n  [class.sui-input__field--split]=\"_hasLeadingDivider() || _hasTrailingDivider()\"\n  [class.sui-input__field--split-leading]=\"_hasLeadingDivider()\"\n  [class.sui-input__field--split-trailing]=\"_hasTrailingDivider()\"\n  [class.sui-input__field--button]=\"type() === 'button'\"\n>\n  <!--\n    Split-field con divisor vertical (gen\u00E9rico por lado):\n      - trailing (Figma node 332:1667 \"Button\"): acci\u00F3n a la derecha + divisor\n        border-right. `type='button'` lo activa solo.\n      - leading (Figma node 313:10267 \"Phone\"): afijo interactivo a la izquierda\n        (ej. country select) + divisor border-left.\n    El input + \u00EDconos van en la zona interna `.sui-input__inner`, que lleva el\n    padding y el/los border(s) de divisor. Los `[data-slot=start/end]` quedan\n    flush a su lado como zonas de afijo. Para los types sin divisor,\n    `.sui-input__inner` es transparente (display: contents) y el layout es el de\n    siempre.\n  -->\n\n  <!-- ng-content start slot \u2014 afijo leading (flush cuando es control/divisor) -->\n  <ng-content select=\"[data-slot=start]\" />\n\n  <div class=\"sui-input__inner\">\n    <!-- Built-in icon slot (left) -->\n    @if (icon() && iconPosition() === 'left') {\n      <span class=\"sui-input__icon sui-input__icon--left\">\n        <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n      </span>\n    }\n\n    <!-- Prefix label (S/, $, %) -->\n    @if (prefix()) {\n      <span class=\"sui-input__prefix\">{{ prefix() }}</span>\n    }\n\n    <input\n      #inputEl\n      class=\"sui-input__control\"\n      [type]=\"nativeType()\"\n      [attr.inputmode]=\"inputMode()\"\n      [value]=\"\n        type() === 'amount'\n          ? displayAmountValue()\n          : type() === 'card'\n            ? displayCardValue()\n            : value()\n      \"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.maxlength]=\"type() === 'card' ? (maxlength() ?? 19) : maxlength()\"\n      [attr.min]=\"type() === 'number' ? min() : null\"\n      [attr.max]=\"type() === 'number' ? max() : null\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n      (focus)=\"onFocus()\"\n      (keydown)=\"onKeydown($event)\"\n      (paste)=\"onPaste($event)\"\n    />\n  </div>\n\n  <!-- ng-content end slot (backward compat) -->\n  <ng-content select=\"[data-slot=end]\" />\n\n  <!-- Clear button -->\n  @if (showClear() && value() && !isDisabled() && !readonly()) {\n    <button\n      type=\"button\"\n      class=\"sui-input__clear\"\n      aria-label=\"Limpiar\"\n      (click)=\"clearValue()\"\n    >\n      <sui-icon name=\"close-circle-line\" [size]=\"16\" />\n    </button>\n  }\n\n  <!-- Password toggle button -->\n  @if (type() === 'password-toggle' && !isDisabled()) {\n    <button\n      type=\"button\"\n      class=\"sui-input__eye\"\n      [attr.aria-label]=\"showPassword() ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n      (click)=\"togglePassword()\"\n    >\n      <sui-icon [name]=\"showPassword() ? 'eye-off-line' : 'eye-line'\" [size]=\"16\" />\n    </button>\n  }\n\n  <!-- Built-in icon slot (right) -->\n  @if (icon() && iconPosition() === 'right') {\n    <span class=\"sui-input__icon sui-input__icon--right\">\n      <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n    </span>\n  }\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n  <sui-form-hint\n    [message]=\"error() ? errorMessage() : hint()\"\n    [variant]=\"error() ? 'error' : 'neutral'\"\n    [size]=\"size()\"\n    class=\"sui-input__hint-host\"\n  />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-input__label-host{display:block;margin-bottom:4px}.sui-input__field{display:flex;align-items:center;width:100%;box-sizing:border-box;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=xsmall]) .sui-input__field{gap:6px;padding:5px 6px 5px 8px;border-radius:var(--sui-radius-8);min-height:32px}:host([data-sui-size=small]) .sui-input__field{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8);min-height:36px}:host([data-sui-size=medium]) .sui-input__field,:host(:not([data-sui-size])) .sui-input__field{gap:8px;padding:9px 10px 9px 12px;border-radius:var(--sui-radius-10);min-height:40px}.sui-input__field:not(.sui-input__field--disabled):not(.sui-input__field--error):not(.sui-input__field--readonly):hover{border-color:var(--sui-stroke-sub-300)}.sui-input__field:not(.sui-input__field--disabled):not(.sui-input__field--error):not(.sui-input__field--readonly):focus-within{border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-input__field--error{border-color:var(--sui-state-error-base);box-shadow:none}.sui-input__field--error:not(.sui-input__field--disabled):hover{border-color:var(--sui-state-error-base)}.sui-input__field--error:not(.sui-input__field--disabled):focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 3px var(--sui-red-alpha-10)}.sui-input__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-input__field--readonly{background:var(--sui-bg-weak-50);border-color:var(--sui-stroke-soft-200);box-shadow:none}.sui-input__field ::ng-deep [data-slot=start],.sui-input__field ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);pointer-events:none}:host([data-sui-leading-control]) .sui-input__field ::ng-deep [data-slot=start],:host([data-sui-trailing-control]) .sui-input__field ::ng-deep [data-slot=end]{width:auto;height:auto;align-self:stretch;pointer-events:auto}.sui-input__inner{display:contents}.sui-input__field--split{align-items:stretch;overflow:hidden;padding:0!important;gap:0!important}.sui-input__field--split .sui-input__inner{display:flex;flex:1 1 auto;min-width:0;align-items:center;box-sizing:border-box}:host([data-sui-size=xsmall]) .sui-input__field--split .sui-input__inner{gap:6px;padding:5px 6px 5px 8px}:host([data-sui-size=small]) .sui-input__field--split .sui-input__inner{gap:8px;padding:7px 8px 7px 10px}:host([data-sui-size=medium]) .sui-input__field--split .sui-input__inner,:host(:not([data-sui-size])) .sui-input__field--split .sui-input__inner{gap:8px;padding:9px 10px 9px 12px}.sui-input__field--split-trailing .sui-input__inner{border-right:1px solid var(--sui-stroke-soft-200)}.sui-input__field--split-trailing.sui-input__field--error .sui-input__inner{border-right-color:var(--sui-state-error-base)}.sui-input__field--split-trailing.sui-input__field--disabled .sui-input__inner{border-right-color:transparent}.sui-input__field--split-trailing ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:auto;height:auto;align-self:stretch;color:var(--sui-icon-sub-600);pointer-events:auto}:host([data-sui-size=xsmall]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:6px}:host([data-sui-size=small]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:8px}:host([data-sui-size=medium]) .sui-input__field--split-trailing ::ng-deep [data-slot=end],:host(:not([data-sui-size])) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:10px}.sui-input__field--split-leading .sui-input__inner{border-left:1px solid var(--sui-stroke-soft-200)}.sui-input__field--split-leading.sui-input__field--error .sui-input__inner{border-left-color:var(--sui-state-error-base)}.sui-input__field--split-leading.sui-input__field--disabled .sui-input__inner{border-left-color:transparent}:host(:not([data-sui-leading-control])[data-sui-size=xsmall]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:6px 6px 6px 8px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=small]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:8px 8px 8px 10px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=medium]) .sui-input__field--split-leading ::ng-deep [data-slot=start],:host(:not([data-sui-leading-control]):not([data-sui-size])) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:10px 8px 10px 10px;box-sizing:content-box}.sui-input__prefix{flex-shrink:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;color:var(--sui-text-sub-600);-webkit-user-select:none;user-select:none;pointer-events:none}.sui-input__icon{display:inline-flex;align-items:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);pointer-events:none}:host([data-sui-disabled]) .sui-input__icon{color:var(--sui-icon-disabled-300)}.sui-input__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;min-height:0;min-width:0;padding:0;border:none;background:transparent;color:var(--sui-icon-sub-600);cursor:pointer;opacity:.7;line-height:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-input__clear:hover{opacity:1;color:var(--sui-text-strong-950)}.sui-input__clear:focus{outline:none}.sui-input__eye{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;min-height:0;min-width:0;padding:0;border:none;background:transparent;color:var(--sui-icon-sub-600);cursor:pointer;line-height:0;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-input__eye:hover{color:var(--sui-text-strong-950)}.sui-input__eye:focus{outline:none}.sui-input__control{flex:1 1 auto;min-width:0;border:none;outline:none;background:transparent;padding:0;margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;color:var(--sui-text-strong-950);-webkit-appearance:none;appearance:none;box-sizing:border-box}@media(max-width:767px){.sui-input__control{font-size:16px}}.sui-input__control::placeholder{color:var(--sui-text-soft-400);opacity:1}.sui-input__control:disabled{color:var(--sui-text-disabled-300);cursor:not-allowed;-webkit-text-fill-color:var(--sui-text-disabled-300)}.sui-input__control[readonly]{color:var(--sui-text-sub-600);cursor:default}.sui-input__control:focus{outline:none}.sui-input__control[type=number]{-moz-appearance:textfield}.sui-input__control[type=number]::-webkit-inner-spin-button,.sui-input__control[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.sui-input__control[type=search]::-webkit-search-decoration,.sui-input__control[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}.sui-input__hint-host{display:block;margin-top:4px}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiFormLabel, selector: "sui-form-label", inputs: ["label", "sublabel", "required", "tooltip", "link", "size", "disabled", "for"], outputs: ["linkClick"] }, { kind: "component", type: SuiFormHint, selector: "sui-form-hint", inputs: ["message", "variant", "icon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true }], ngImport: i0, template: "@if (label()) {\n  <sui-form-label\n    [label]=\"label()!\"\n    [sublabel]=\"sublabel()\"\n    [required]=\"required()\"\n    [tooltip]=\"tooltip()\"\n    [size]=\"size()\"\n    class=\"sui-input__label-host\"\n  />\n}\n\n<div\n  class=\"sui-input__field\"\n  [class.sui-input__field--error]=\"error()\"\n  [class.sui-input__field--disabled]=\"isDisabled()\"\n  [class.sui-input__field--readonly]=\"readonly()\"\n  [class.sui-input__field--split]=\"_hasLeadingDivider() || _hasTrailingDivider()\"\n  [class.sui-input__field--split-leading]=\"_hasLeadingDivider()\"\n  [class.sui-input__field--split-trailing]=\"_hasTrailingDivider()\"\n  [class.sui-input__field--button]=\"type() === 'button'\"\n>\n  <!--\n    Split-field con divisor vertical (gen\u00E9rico por lado):\n      - trailing (Figma node 332:1667 \"Button\"): acci\u00F3n a la derecha + divisor\n        border-right. `type='button'` lo activa solo.\n      - leading (Figma node 313:10267 \"Phone\"): afijo interactivo a la izquierda\n        (ej. country select) + divisor border-left.\n    El input + \u00EDconos van en la zona interna `.sui-input__inner`, que lleva el\n    padding y el/los border(s) de divisor. Los `[data-slot=start/end]` quedan\n    flush a su lado como zonas de afijo. Para los types sin divisor,\n    `.sui-input__inner` es transparente (display: contents) y el layout es el de\n    siempre.\n  -->\n\n  <!-- ng-content start slot \u2014 afijo leading (flush cuando es control/divisor) -->\n  <ng-content select=\"[data-slot=start]\" />\n\n  <div class=\"sui-input__inner\">\n    <!-- Built-in icon slot (left) -->\n    @if (icon() && iconPosition() === 'left') {\n      <span class=\"sui-input__icon sui-input__icon--left\">\n        <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n      </span>\n    }\n\n    <!-- Prefix label (S/, $, %) -->\n    @if (prefix()) {\n      <span class=\"sui-input__prefix\">{{ prefix() }}</span>\n    }\n\n    <input\n      #inputEl\n      class=\"sui-input__control\"\n      [type]=\"nativeType()\"\n      [attr.inputmode]=\"inputMode()\"\n      [value]=\"\n        type() === 'amount'\n          ? displayAmountValue()\n          : type() === 'card'\n            ? displayCardValue()\n            : value()\n      \"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.maxlength]=\"type() === 'card' ? (maxlength() ?? 19) : maxlength()\"\n      [attr.min]=\"type() === 'number' ? min() : null\"\n      [attr.max]=\"type() === 'number' ? max() : null\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n      (focus)=\"onFocus()\"\n      (keydown)=\"onKeydown($event)\"\n      (paste)=\"onPaste($event)\"\n    />\n  </div>\n\n  <!-- ng-content end slot (backward compat) -->\n  <ng-content select=\"[data-slot=end]\" />\n\n  <!-- Clear button -->\n  @if (showClear() && value() && !isDisabled() && !readonly()) {\n    <button\n      type=\"button\"\n      class=\"sui-input__clear\"\n      aria-label=\"Limpiar\"\n      (click)=\"clearValue()\"\n    >\n      <sui-icon name=\"close-circle-line\" [size]=\"16\" />\n    </button>\n  }\n\n  <!-- Password toggle button -->\n  @if (type() === 'password-toggle' && !isDisabled()) {\n    <button\n      type=\"button\"\n      class=\"sui-input__eye\"\n      [attr.aria-label]=\"showPassword() ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n      (click)=\"togglePassword()\"\n    >\n      <sui-icon [name]=\"showPassword() ? 'eye-off-line' : 'eye-line'\" [size]=\"16\" />\n    </button>\n  }\n\n  <!-- Built-in icon slot (right) -->\n  @if (icon() && iconPosition() === 'right') {\n    <span class=\"sui-input__icon sui-input__icon--right\">\n      <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n    </span>\n  }\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n  <sui-form-hint\n    [message]=\"error() ? errorMessage() : hint()\"\n    [variant]=\"error() ? 'error' : 'neutral'\"\n    class=\"sui-input__hint-host\"\n  />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-input__label-host{display:block;margin-bottom:4px}.sui-input__field{display:flex;align-items:center;width:100%;box-sizing:border-box;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=xsmall]) .sui-input__field{gap:6px;padding:5px 6px 5px 8px;border-radius:var(--sui-radius-8);min-height:32px}:host([data-sui-size=small]) .sui-input__field{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8);min-height:36px}:host([data-sui-size=medium]) .sui-input__field,:host(:not([data-sui-size])) .sui-input__field{gap:8px;padding:9px 10px 9px 12px;border-radius:var(--sui-radius-10);min-height:40px}.sui-input__field:not(.sui-input__field--disabled):not(.sui-input__field--error):not(.sui-input__field--readonly):hover{border-color:var(--sui-stroke-sub-300)}.sui-input__field:not(.sui-input__field--disabled):not(.sui-input__field--error):not(.sui-input__field--readonly):focus-within{border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-input__field--error{border-color:var(--sui-state-error-base);box-shadow:none}.sui-input__field--error:not(.sui-input__field--disabled):hover{border-color:var(--sui-state-error-base)}.sui-input__field--error:not(.sui-input__field--disabled):focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 3px var(--sui-red-alpha-10)}.sui-input__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-input__field--readonly{background:var(--sui-bg-weak-50);border-color:var(--sui-stroke-soft-200);box-shadow:none}.sui-input__field ::ng-deep [data-slot=start],.sui-input__field ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);pointer-events:none}:host([data-sui-leading-control]) .sui-input__field ::ng-deep [data-slot=start],:host([data-sui-trailing-control]) .sui-input__field ::ng-deep [data-slot=end]{width:auto;height:auto;align-self:stretch;pointer-events:auto}.sui-input__inner{display:contents}.sui-input__field--split{align-items:stretch;overflow:hidden;padding:0!important;gap:0!important}.sui-input__field--split .sui-input__inner{display:flex;flex:1 1 auto;min-width:0;align-items:center;box-sizing:border-box}:host([data-sui-size=xsmall]) .sui-input__field--split .sui-input__inner{gap:6px;padding:5px 6px 5px 8px}:host([data-sui-size=small]) .sui-input__field--split .sui-input__inner{gap:8px;padding:7px 8px 7px 10px}:host([data-sui-size=medium]) .sui-input__field--split .sui-input__inner,:host(:not([data-sui-size])) .sui-input__field--split .sui-input__inner{gap:8px;padding:9px 10px 9px 12px}.sui-input__field--split-trailing .sui-input__inner{border-right:1px solid var(--sui-stroke-soft-200)}.sui-input__field--split-trailing.sui-input__field--error .sui-input__inner{border-right-color:var(--sui-state-error-base)}.sui-input__field--split-trailing.sui-input__field--disabled .sui-input__inner{border-right-color:transparent}.sui-input__field--split-trailing ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:auto;height:auto;align-self:stretch;color:var(--sui-icon-sub-600);pointer-events:auto}:host([data-sui-size=xsmall]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:6px}:host([data-sui-size=small]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:8px}:host([data-sui-size=medium]) .sui-input__field--split-trailing ::ng-deep [data-slot=end],:host(:not([data-sui-size])) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:10px}.sui-input__field--split-leading .sui-input__inner{border-left:1px solid var(--sui-stroke-soft-200)}.sui-input__field--split-leading.sui-input__field--error .sui-input__inner{border-left-color:var(--sui-state-error-base)}.sui-input__field--split-leading.sui-input__field--disabled .sui-input__inner{border-left-color:transparent}:host(:not([data-sui-leading-control])[data-sui-size=xsmall]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:6px 6px 6px 8px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=small]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:8px 8px 8px 10px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=medium]) .sui-input__field--split-leading ::ng-deep [data-slot=start],:host(:not([data-sui-leading-control]):not([data-sui-size])) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:10px 8px 10px 10px;box-sizing:content-box}.sui-input__prefix{flex-shrink:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;color:var(--sui-text-sub-600);-webkit-user-select:none;user-select:none;pointer-events:none}.sui-input__icon{display:inline-flex;align-items:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);pointer-events:none}:host([data-sui-disabled]) .sui-input__icon{color:var(--sui-icon-disabled-300)}.sui-input__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;min-height:0;min-width:0;padding:0;border:none;background:transparent;color:var(--sui-icon-sub-600);cursor:pointer;opacity:.7;line-height:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-input__clear:hover{opacity:1;color:var(--sui-text-strong-950)}.sui-input__clear:focus{outline:none}.sui-input__eye{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;min-height:0;min-width:0;padding:0;border:none;background:transparent;color:var(--sui-icon-sub-600);cursor:pointer;line-height:0;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-input__eye:hover{color:var(--sui-text-strong-950)}.sui-input__eye:focus{outline:none}.sui-input__control{flex:1 1 auto;min-width:0;border:none;outline:none;background:transparent;padding:0;margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;color:var(--sui-text-strong-950);-webkit-appearance:none;appearance:none;box-sizing:border-box}@media(max-width:767px){.sui-input__control{font-size:16px}}.sui-input__control::placeholder{color:var(--sui-text-soft-400);opacity:1}.sui-input__control:disabled{color:var(--sui-text-disabled-300);cursor:not-allowed;-webkit-text-fill-color:var(--sui-text-disabled-300)}.sui-input__control[readonly]{color:var(--sui-text-sub-600);cursor:default}.sui-input__control:focus{outline:none}.sui-input__control[type=number]{-moz-appearance:textfield}.sui-input__control[type=number]::-webkit-inner-spin-button,.sui-input__control[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.sui-input__control[type=search]::-webkit-search-decoration,.sui-input__control[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}.sui-input__hint-host{display:block;margin-top:4px}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiFormLabel, selector: "sui-form-label", inputs: ["label", "sublabel", "required", "tooltip", "link", "size", "disabled", "for"], outputs: ["linkClick"] }, { kind: "component", type: SuiFormHint, selector: "sui-form-hint", inputs: ["message", "variant", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiInput, decorators: [{
             type: Component,
@@ -9863,7 +9867,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                            decorativo. */
                         '[attr.data-sui-leading-control]': 'leadingControl() ? "" : null',
                         '[attr.data-sui-trailing-control]': 'trailingControl() ? "" : null',
-                    }, template: "@if (label()) {\n  <sui-form-label\n    [label]=\"label()!\"\n    [sublabel]=\"sublabel()\"\n    [required]=\"required()\"\n    [tooltip]=\"tooltip()\"\n    [size]=\"size()\"\n    class=\"sui-input__label-host\"\n  />\n}\n\n<div\n  class=\"sui-input__field\"\n  [class.sui-input__field--error]=\"error()\"\n  [class.sui-input__field--disabled]=\"isDisabled()\"\n  [class.sui-input__field--readonly]=\"readonly()\"\n  [class.sui-input__field--split]=\"_hasLeadingDivider() || _hasTrailingDivider()\"\n  [class.sui-input__field--split-leading]=\"_hasLeadingDivider()\"\n  [class.sui-input__field--split-trailing]=\"_hasTrailingDivider()\"\n  [class.sui-input__field--button]=\"type() === 'button'\"\n>\n  <!--\n    Split-field con divisor vertical (gen\u00E9rico por lado):\n      - trailing (Figma node 332:1667 \"Button\"): acci\u00F3n a la derecha + divisor\n        border-right. `type='button'` lo activa solo.\n      - leading (Figma node 313:10267 \"Phone\"): afijo interactivo a la izquierda\n        (ej. country select) + divisor border-left.\n    El input + \u00EDconos van en la zona interna `.sui-input__inner`, que lleva el\n    padding y el/los border(s) de divisor. Los `[data-slot=start/end]` quedan\n    flush a su lado como zonas de afijo. Para los types sin divisor,\n    `.sui-input__inner` es transparente (display: contents) y el layout es el de\n    siempre.\n  -->\n\n  <!-- ng-content start slot \u2014 afijo leading (flush cuando es control/divisor) -->\n  <ng-content select=\"[data-slot=start]\" />\n\n  <div class=\"sui-input__inner\">\n    <!-- Built-in icon slot (left) -->\n    @if (icon() && iconPosition() === 'left') {\n      <span class=\"sui-input__icon sui-input__icon--left\">\n        <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n      </span>\n    }\n\n    <!-- Prefix label (S/, $, %) -->\n    @if (prefix()) {\n      <span class=\"sui-input__prefix\">{{ prefix() }}</span>\n    }\n\n    <input\n      #inputEl\n      class=\"sui-input__control\"\n      [type]=\"nativeType()\"\n      [attr.inputmode]=\"inputMode()\"\n      [value]=\"\n        type() === 'amount'\n          ? displayAmountValue()\n          : type() === 'card'\n            ? displayCardValue()\n            : value()\n      \"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.maxlength]=\"type() === 'card' ? (maxlength() ?? 19) : maxlength()\"\n      [attr.min]=\"type() === 'number' ? min() : null\"\n      [attr.max]=\"type() === 'number' ? max() : null\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n      (focus)=\"onFocus()\"\n      (keydown)=\"onKeydown($event)\"\n      (paste)=\"onPaste($event)\"\n    />\n  </div>\n\n  <!-- ng-content end slot (backward compat) -->\n  <ng-content select=\"[data-slot=end]\" />\n\n  <!-- Clear button -->\n  @if (showClear() && value() && !isDisabled() && !readonly()) {\n    <button\n      type=\"button\"\n      class=\"sui-input__clear\"\n      aria-label=\"Limpiar\"\n      (click)=\"clearValue()\"\n    >\n      <sui-icon name=\"close-circle-line\" [size]=\"16\" />\n    </button>\n  }\n\n  <!-- Password toggle button -->\n  @if (type() === 'password-toggle' && !isDisabled()) {\n    <button\n      type=\"button\"\n      class=\"sui-input__eye\"\n      [attr.aria-label]=\"showPassword() ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n      (click)=\"togglePassword()\"\n    >\n      <sui-icon [name]=\"showPassword() ? 'eye-off-line' : 'eye-line'\" [size]=\"16\" />\n    </button>\n  }\n\n  <!-- Built-in icon slot (right) -->\n  @if (icon() && iconPosition() === 'right') {\n    <span class=\"sui-input__icon sui-input__icon--right\">\n      <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n    </span>\n  }\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n  <sui-form-hint\n    [message]=\"error() ? errorMessage() : hint()\"\n    [variant]=\"error() ? 'error' : 'neutral'\"\n    [size]=\"size()\"\n    class=\"sui-input__hint-host\"\n  />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-input__label-host{display:block;margin-bottom:4px}.sui-input__field{display:flex;align-items:center;width:100%;box-sizing:border-box;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=xsmall]) .sui-input__field{gap:6px;padding:5px 6px 5px 8px;border-radius:var(--sui-radius-8);min-height:32px}:host([data-sui-size=small]) .sui-input__field{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8);min-height:36px}:host([data-sui-size=medium]) .sui-input__field,:host(:not([data-sui-size])) .sui-input__field{gap:8px;padding:9px 10px 9px 12px;border-radius:var(--sui-radius-10);min-height:40px}.sui-input__field:not(.sui-input__field--disabled):not(.sui-input__field--error):not(.sui-input__field--readonly):hover{border-color:var(--sui-stroke-sub-300)}.sui-input__field:not(.sui-input__field--disabled):not(.sui-input__field--error):not(.sui-input__field--readonly):focus-within{border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-input__field--error{border-color:var(--sui-state-error-base);box-shadow:none}.sui-input__field--error:not(.sui-input__field--disabled):hover{border-color:var(--sui-state-error-base)}.sui-input__field--error:not(.sui-input__field--disabled):focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 3px var(--sui-red-alpha-10)}.sui-input__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-input__field--readonly{background:var(--sui-bg-weak-50);border-color:var(--sui-stroke-soft-200);box-shadow:none}.sui-input__field ::ng-deep [data-slot=start],.sui-input__field ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);pointer-events:none}:host([data-sui-leading-control]) .sui-input__field ::ng-deep [data-slot=start],:host([data-sui-trailing-control]) .sui-input__field ::ng-deep [data-slot=end]{width:auto;height:auto;align-self:stretch;pointer-events:auto}.sui-input__inner{display:contents}.sui-input__field--split{align-items:stretch;overflow:hidden;padding:0!important;gap:0!important}.sui-input__field--split .sui-input__inner{display:flex;flex:1 1 auto;min-width:0;align-items:center;box-sizing:border-box}:host([data-sui-size=xsmall]) .sui-input__field--split .sui-input__inner{gap:6px;padding:5px 6px 5px 8px}:host([data-sui-size=small]) .sui-input__field--split .sui-input__inner{gap:8px;padding:7px 8px 7px 10px}:host([data-sui-size=medium]) .sui-input__field--split .sui-input__inner,:host(:not([data-sui-size])) .sui-input__field--split .sui-input__inner{gap:8px;padding:9px 10px 9px 12px}.sui-input__field--split-trailing .sui-input__inner{border-right:1px solid var(--sui-stroke-soft-200)}.sui-input__field--split-trailing.sui-input__field--error .sui-input__inner{border-right-color:var(--sui-state-error-base)}.sui-input__field--split-trailing.sui-input__field--disabled .sui-input__inner{border-right-color:transparent}.sui-input__field--split-trailing ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:auto;height:auto;align-self:stretch;color:var(--sui-icon-sub-600);pointer-events:auto}:host([data-sui-size=xsmall]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:6px}:host([data-sui-size=small]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:8px}:host([data-sui-size=medium]) .sui-input__field--split-trailing ::ng-deep [data-slot=end],:host(:not([data-sui-size])) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:10px}.sui-input__field--split-leading .sui-input__inner{border-left:1px solid var(--sui-stroke-soft-200)}.sui-input__field--split-leading.sui-input__field--error .sui-input__inner{border-left-color:var(--sui-state-error-base)}.sui-input__field--split-leading.sui-input__field--disabled .sui-input__inner{border-left-color:transparent}:host(:not([data-sui-leading-control])[data-sui-size=xsmall]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:6px 6px 6px 8px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=small]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:8px 8px 8px 10px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=medium]) .sui-input__field--split-leading ::ng-deep [data-slot=start],:host(:not([data-sui-leading-control]):not([data-sui-size])) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:10px 8px 10px 10px;box-sizing:content-box}.sui-input__prefix{flex-shrink:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;color:var(--sui-text-sub-600);-webkit-user-select:none;user-select:none;pointer-events:none}.sui-input__icon{display:inline-flex;align-items:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);pointer-events:none}:host([data-sui-disabled]) .sui-input__icon{color:var(--sui-icon-disabled-300)}.sui-input__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;min-height:0;min-width:0;padding:0;border:none;background:transparent;color:var(--sui-icon-sub-600);cursor:pointer;opacity:.7;line-height:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-input__clear:hover{opacity:1;color:var(--sui-text-strong-950)}.sui-input__clear:focus{outline:none}.sui-input__eye{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;min-height:0;min-width:0;padding:0;border:none;background:transparent;color:var(--sui-icon-sub-600);cursor:pointer;line-height:0;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-input__eye:hover{color:var(--sui-text-strong-950)}.sui-input__eye:focus{outline:none}.sui-input__control{flex:1 1 auto;min-width:0;border:none;outline:none;background:transparent;padding:0;margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;color:var(--sui-text-strong-950);-webkit-appearance:none;appearance:none;box-sizing:border-box}@media(max-width:767px){.sui-input__control{font-size:16px}}.sui-input__control::placeholder{color:var(--sui-text-soft-400);opacity:1}.sui-input__control:disabled{color:var(--sui-text-disabled-300);cursor:not-allowed;-webkit-text-fill-color:var(--sui-text-disabled-300)}.sui-input__control[readonly]{color:var(--sui-text-sub-600);cursor:default}.sui-input__control:focus{outline:none}.sui-input__control[type=number]{-moz-appearance:textfield}.sui-input__control[type=number]::-webkit-inner-spin-button,.sui-input__control[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.sui-input__control[type=search]::-webkit-search-decoration,.sui-input__control[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}.sui-input__hint-host{display:block;margin-top:4px}\n"] }]
+                    }, template: "@if (label()) {\n  <sui-form-label\n    [label]=\"label()!\"\n    [sublabel]=\"sublabel()\"\n    [required]=\"required()\"\n    [tooltip]=\"tooltip()\"\n    [size]=\"size()\"\n    class=\"sui-input__label-host\"\n  />\n}\n\n<div\n  class=\"sui-input__field\"\n  [class.sui-input__field--error]=\"error()\"\n  [class.sui-input__field--disabled]=\"isDisabled()\"\n  [class.sui-input__field--readonly]=\"readonly()\"\n  [class.sui-input__field--split]=\"_hasLeadingDivider() || _hasTrailingDivider()\"\n  [class.sui-input__field--split-leading]=\"_hasLeadingDivider()\"\n  [class.sui-input__field--split-trailing]=\"_hasTrailingDivider()\"\n  [class.sui-input__field--button]=\"type() === 'button'\"\n>\n  <!--\n    Split-field con divisor vertical (gen\u00E9rico por lado):\n      - trailing (Figma node 332:1667 \"Button\"): acci\u00F3n a la derecha + divisor\n        border-right. `type='button'` lo activa solo.\n      - leading (Figma node 313:10267 \"Phone\"): afijo interactivo a la izquierda\n        (ej. country select) + divisor border-left.\n    El input + \u00EDconos van en la zona interna `.sui-input__inner`, que lleva el\n    padding y el/los border(s) de divisor. Los `[data-slot=start/end]` quedan\n    flush a su lado como zonas de afijo. Para los types sin divisor,\n    `.sui-input__inner` es transparente (display: contents) y el layout es el de\n    siempre.\n  -->\n\n  <!-- ng-content start slot \u2014 afijo leading (flush cuando es control/divisor) -->\n  <ng-content select=\"[data-slot=start]\" />\n\n  <div class=\"sui-input__inner\">\n    <!-- Built-in icon slot (left) -->\n    @if (icon() && iconPosition() === 'left') {\n      <span class=\"sui-input__icon sui-input__icon--left\">\n        <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n      </span>\n    }\n\n    <!-- Prefix label (S/, $, %) -->\n    @if (prefix()) {\n      <span class=\"sui-input__prefix\">{{ prefix() }}</span>\n    }\n\n    <input\n      #inputEl\n      class=\"sui-input__control\"\n      [type]=\"nativeType()\"\n      [attr.inputmode]=\"inputMode()\"\n      [value]=\"\n        type() === 'amount'\n          ? displayAmountValue()\n          : type() === 'card'\n            ? displayCardValue()\n            : value()\n      \"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.maxlength]=\"type() === 'card' ? (maxlength() ?? 19) : maxlength()\"\n      [attr.min]=\"type() === 'number' ? min() : null\"\n      [attr.max]=\"type() === 'number' ? max() : null\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n      (focus)=\"onFocus()\"\n      (keydown)=\"onKeydown($event)\"\n      (paste)=\"onPaste($event)\"\n    />\n  </div>\n\n  <!-- ng-content end slot (backward compat) -->\n  <ng-content select=\"[data-slot=end]\" />\n\n  <!-- Clear button -->\n  @if (showClear() && value() && !isDisabled() && !readonly()) {\n    <button\n      type=\"button\"\n      class=\"sui-input__clear\"\n      aria-label=\"Limpiar\"\n      (click)=\"clearValue()\"\n    >\n      <sui-icon name=\"close-circle-line\" [size]=\"16\" />\n    </button>\n  }\n\n  <!-- Password toggle button -->\n  @if (type() === 'password-toggle' && !isDisabled()) {\n    <button\n      type=\"button\"\n      class=\"sui-input__eye\"\n      [attr.aria-label]=\"showPassword() ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n      (click)=\"togglePassword()\"\n    >\n      <sui-icon [name]=\"showPassword() ? 'eye-off-line' : 'eye-line'\" [size]=\"16\" />\n    </button>\n  }\n\n  <!-- Built-in icon slot (right) -->\n  @if (icon() && iconPosition() === 'right') {\n    <span class=\"sui-input__icon sui-input__icon--right\">\n      <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n    </span>\n  }\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n  <sui-form-hint\n    [message]=\"error() ? errorMessage() : hint()\"\n    [variant]=\"error() ? 'error' : 'neutral'\"\n    class=\"sui-input__hint-host\"\n  />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-input__label-host{display:block;margin-bottom:4px}.sui-input__field{display:flex;align-items:center;width:100%;box-sizing:border-box;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=xsmall]) .sui-input__field{gap:6px;padding:5px 6px 5px 8px;border-radius:var(--sui-radius-8);min-height:32px}:host([data-sui-size=small]) .sui-input__field{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8);min-height:36px}:host([data-sui-size=medium]) .sui-input__field,:host(:not([data-sui-size])) .sui-input__field{gap:8px;padding:9px 10px 9px 12px;border-radius:var(--sui-radius-10);min-height:40px}.sui-input__field:not(.sui-input__field--disabled):not(.sui-input__field--error):not(.sui-input__field--readonly):hover{border-color:var(--sui-stroke-sub-300)}.sui-input__field:not(.sui-input__field--disabled):not(.sui-input__field--error):not(.sui-input__field--readonly):focus-within{border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-input__field--error{border-color:var(--sui-state-error-base);box-shadow:none}.sui-input__field--error:not(.sui-input__field--disabled):hover{border-color:var(--sui-state-error-base)}.sui-input__field--error:not(.sui-input__field--disabled):focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 3px var(--sui-red-alpha-10)}.sui-input__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-input__field--readonly{background:var(--sui-bg-weak-50);border-color:var(--sui-stroke-soft-200);box-shadow:none}.sui-input__field ::ng-deep [data-slot=start],.sui-input__field ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);pointer-events:none}:host([data-sui-leading-control]) .sui-input__field ::ng-deep [data-slot=start],:host([data-sui-trailing-control]) .sui-input__field ::ng-deep [data-slot=end]{width:auto;height:auto;align-self:stretch;pointer-events:auto}.sui-input__inner{display:contents}.sui-input__field--split{align-items:stretch;overflow:hidden;padding:0!important;gap:0!important}.sui-input__field--split .sui-input__inner{display:flex;flex:1 1 auto;min-width:0;align-items:center;box-sizing:border-box}:host([data-sui-size=xsmall]) .sui-input__field--split .sui-input__inner{gap:6px;padding:5px 6px 5px 8px}:host([data-sui-size=small]) .sui-input__field--split .sui-input__inner{gap:8px;padding:7px 8px 7px 10px}:host([data-sui-size=medium]) .sui-input__field--split .sui-input__inner,:host(:not([data-sui-size])) .sui-input__field--split .sui-input__inner{gap:8px;padding:9px 10px 9px 12px}.sui-input__field--split-trailing .sui-input__inner{border-right:1px solid var(--sui-stroke-soft-200)}.sui-input__field--split-trailing.sui-input__field--error .sui-input__inner{border-right-color:var(--sui-state-error-base)}.sui-input__field--split-trailing.sui-input__field--disabled .sui-input__inner{border-right-color:transparent}.sui-input__field--split-trailing ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:auto;height:auto;align-self:stretch;color:var(--sui-icon-sub-600);pointer-events:auto}:host([data-sui-size=xsmall]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:6px}:host([data-sui-size=small]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:8px}:host([data-sui-size=medium]) .sui-input__field--split-trailing ::ng-deep [data-slot=end],:host(:not([data-sui-size])) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:10px}.sui-input__field--split-leading .sui-input__inner{border-left:1px solid var(--sui-stroke-soft-200)}.sui-input__field--split-leading.sui-input__field--error .sui-input__inner{border-left-color:var(--sui-state-error-base)}.sui-input__field--split-leading.sui-input__field--disabled .sui-input__inner{border-left-color:transparent}:host(:not([data-sui-leading-control])[data-sui-size=xsmall]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:6px 6px 6px 8px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=small]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:8px 8px 8px 10px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=medium]) .sui-input__field--split-leading ::ng-deep [data-slot=start],:host(:not([data-sui-leading-control]):not([data-sui-size])) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:10px 8px 10px 10px;box-sizing:content-box}.sui-input__prefix{flex-shrink:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;color:var(--sui-text-sub-600);-webkit-user-select:none;user-select:none;pointer-events:none}.sui-input__icon{display:inline-flex;align-items:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);pointer-events:none}:host([data-sui-disabled]) .sui-input__icon{color:var(--sui-icon-disabled-300)}.sui-input__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;min-height:0;min-width:0;padding:0;border:none;background:transparent;color:var(--sui-icon-sub-600);cursor:pointer;opacity:.7;line-height:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-input__clear:hover{opacity:1;color:var(--sui-text-strong-950)}.sui-input__clear:focus{outline:none}.sui-input__eye{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;min-height:0;min-width:0;padding:0;border:none;background:transparent;color:var(--sui-icon-sub-600);cursor:pointer;line-height:0;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-input__eye:hover{color:var(--sui-text-strong-950)}.sui-input__eye:focus{outline:none}.sui-input__control{flex:1 1 auto;min-width:0;border:none;outline:none;background:transparent;padding:0;margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;color:var(--sui-text-strong-950);-webkit-appearance:none;appearance:none;box-sizing:border-box}@media(max-width:767px){.sui-input__control{font-size:16px}}.sui-input__control::placeholder{color:var(--sui-text-soft-400);opacity:1}.sui-input__control:disabled{color:var(--sui-text-disabled-300);cursor:not-allowed;-webkit-text-fill-color:var(--sui-text-disabled-300)}.sui-input__control[readonly]{color:var(--sui-text-sub-600);cursor:default}.sui-input__control:focus{outline:none}.sui-input__control[type=number]{-moz-appearance:textfield}.sui-input__control[type=number]::-webkit-inner-spin-button,.sui-input__control[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.sui-input__control[type=search]::-webkit-search-decoration,.sui-input__control[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}.sui-input__hint-host{display:block;margin-top:4px}\n"] }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], paste: [{ type: i0.Input, args: [{ isSignal: true, alias: "paste", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], closeOnOutsideClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsideClick", required: false }] }], leadingDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingDivider", required: false }] }], trailingDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingDivider", required: false }] }], leadingControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingControl", required: false }] }], trailingControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingControl", required: false }] }], inputEl: [{
                 type: ViewChild,
                 args: ['inputEl']
@@ -13607,7 +13611,7 @@ class SuiSelect {
                 useExisting: forwardRef(() => SuiSelect),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "_menu", first: true, predicate: SuiDropdownMenu, descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <sui-form-label\n    [label]=\"label()!\"\n    [sublabel]=\"sublabel()\"\n    [required]=\"required()\"\n    [tooltip]=\"tooltip()\"\n    [size]=\"size()\"\n    class=\"sui-select__label-host\"\n    (click)=\"toggleOpen()\"\n  />\n}\n\n<div\n  #triggerEl\n  class=\"sui-select__trigger\"\n  [class.sui-select__trigger--error]=\"error()\"\n  [class.sui-select__trigger--disabled]=\"isDisabled()\"\n  [class.sui-select__trigger--open]=\"isOpen()\"\n  [class.sui-select__trigger--filled]=\"selectedLabel() !== null\"\n  role=\"combobox\"\n  [attr.aria-haspopup]=\"'listbox'\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n  [attr.tabindex]=\"isDisabled() ? '-1' : '0'\"\n  (click)=\"toggleOpen()\"\n>\n  <!--\n    Left decoration (Figma Select[1.1] Type variant). Prioridad:\n      1. slot proyectado [slot=leading] (custom total)\n      2. imageUrl (avatar/logo del filled state)\n      3. flag (type=country)\n      4. RemixIcon por type (leadingIcon=true) o custom (leadingIcon=string)\n    Solo se renderea si leadingIcon est\u00E1 activo O hay imageUrl/flag.\n  -->\n  @if (showLeading()) {\n    <span class=\"sui-select__leading\">\n      <ng-content select=\"[slot=leading]\" />\n      @if (showLeadingImage()) {\n        @if (type() === 'avatar') {\n          <sui-avatar size=\"xs\" [src]=\"imageUrl()\" />\n        } @else {\n          <img class=\"sui-select__leading-img\" [src]=\"imageUrl()\" alt=\"\" />\n        }\n      } @else if (type() === 'country' && flag()) {\n        <sui-flag class=\"sui-select__leading-flag\" [name]=\"flag()!\" size=\"md\" />\n      } @else {\n        <sui-icon class=\"sui-select__leading-icon\" [name]=\"leadingIconName()\" [size]=\"20\" />\n      }\n    </span>\n  }\n\n  <span class=\"sui-select__value\">\n    @if (selectedLabel()) {\n      {{ selectedLabel() }}\n    } @else {\n      <span class=\"sui-select__placeholder\">{{ placeholder() }}</span>\n    }\n  </span>\n\n  <!-- Badge inline opcional (Figma: entre value y chevron). sui-badge real \u2014\n       defaults orange/lighter/medium replican el chip del Figma (brand naranja). -->\n  @if (badgeCfg(); as bcfg) {\n    <sui-badge\n      class=\"sui-select__badge\"\n      [color]=\"bcfg.color ?? 'orange'\"\n      [variant]=\"bcfg.variant ?? 'lighter'\"\n      [size]=\"bcfg.size ?? 'medium'\"\n    >{{ bcfg.label }}</sui-badge>\n  }\n\n  <!-- Figma: arrow-down-s-line at 20\u00D720 (size-[20px]) \u2014 verified nodeId 270:1091 -->\n  <sui-icon\n    class=\"sui-select__chevron\"\n    name=\"arrow-down-s-line\"\n    [size]=\"20\"\n    aria-hidden=\"true\"\n  />\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n  <sui-form-hint\n    [message]=\"error() ? errorMessage() : hint()\"\n    [variant]=\"error() ? 'error' : 'neutral'\"\n    [size]=\"size()\"\n    class=\"sui-select__hint-host\"\n  />\n}\n\n<!--\n  Overlay menu \u2014 delegado a sui-dropdown-menu via [origin]=triggerEl.\n  El sui-dropdown-menu encapsula CDK Overlay, positioning, backdrop,\n  ResizeObserver y detachments. El trigger lo maneja este componente.\n-->\n<sui-dropdown-menu\n  [origin]=\"triggerEl\"\n  [disabled]=\"isDisabled()\"\n  [matchWidth]=\"true\"\n  panelClass=\"sui-select__overlay-pane\"\n  (openedChange)=\"onMenuOpenedChange($event)\"\n>\n  <ng-template suiDropdownPanel>\n    <div\n      class=\"sui-select__panel\"\n      [class.sui-select__panel--xsmall]=\"size() === 'xsmall'\"\n      [class.sui-select__panel--small]=\"size() === 'small'\"\n      [class.sui-select__panel--medium]=\"size() === 'medium'\"\n      role=\"listbox\"\n      [attr.aria-label]=\"label() || placeholder()\"\n    >\n      @for (option of options(); track option.value; let i = $index) {\n        <sui-dropdown-item\n          mode=\"option\"\n          [label]=\"option.label\"\n          [selected]=\"option.value === value()\"\n          [highlighted]=\"highlightedIndex() === i\"\n          [disabled]=\"!!option.disabled\"\n          (clicked)=\"select(option)\"\n          (mouseenter)=\"highlightedIndex.set(i)\"\n        />\n      }\n    </div>\n  </ng-template>\n</sui-dropdown-menu>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-select__label-host{display:block;margin-bottom:4px;cursor:default}.sui-select__trigger{display:flex;align-items:center;max-width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=xsmall]) .sui-select__trigger{gap:6px;padding:5px 6px 5px 8px;border-radius:var(--sui-radius-8)}:host([data-sui-size=small]) .sui-select__trigger{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8)}:host([data-sui-size=medium]) .sui-select__trigger,:host(:not([data-sui-size])) .sui-select__trigger{gap:8px;padding:9px 10px 9px 12px;border-radius:var(--sui-radius-10)}.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error):hover{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error):focus,.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error).sui-select__trigger--open{outline:none;border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-select__trigger--error{border-color:var(--sui-state-error-base);box-shadow:none}.sui-select__trigger--error:not(.sui-select__trigger--disabled):hover{border-color:var(--sui-state-error-base)}.sui-select__trigger--error:not(.sui-select__trigger--disabled):focus,.sui-select__trigger--error:not(.sui-select__trigger--disabled).sui-select__trigger--open{border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-16)}.sui-select__trigger--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-select__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600)}:host([data-sui-disabled]) .sui-select__leading{color:var(--sui-icon-disabled-300);opacity:.48}.sui-select__leading-icon{display:inline-flex}.sui-select__leading-img{width:100%;height:100%;object-fit:cover;border-radius:var(--sui-radius-full)}.sui-select__leading-flag,.sui-select__badge{flex-shrink:0}:host([data-sui-disabled]) .sui-select__badge{opacity:.48}.sui-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950)}:host([data-sui-disabled]) .sui-select__value{color:var(--sui-text-disabled-300)}.sui-select__placeholder{color:var(--sui-text-sub-600)}:host([data-sui-disabled]) .sui-select__placeholder{color:var(--sui-text-disabled-300)}.sui-select__chevron{flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);transition:transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-open]) .sui-select__chevron{transform:rotate(180deg)}:host([data-sui-disabled]) .sui-select__chevron{color:var(--sui-icon-disabled-300)}.sui-select__hint-host{display:block;margin-top:4px}\n"], dependencies: [{ kind: "component", type: SuiFormLabel, selector: "sui-form-label", inputs: ["label", "sublabel", "required", "tooltip", "link", "size", "disabled", "for"], outputs: ["linkClick"] }, { kind: "component", type: SuiFormHint, selector: "sui-form-hint", inputs: ["message", "variant", "icon", "size"] }, { kind: "component", type: SuiDropdownMenu, selector: "sui-dropdown-menu", inputs: ["matchWidth", "flexibleDimensions", "push", "minWidth", "position", "viewportMargin", "panelClass", "disabled", "popupRole", "origin"], outputs: ["openedChange"], exportAs: ["suiDropdownMenu"] }, { kind: "directive", type: SuiDropdownPanel, selector: "ng-template[suiDropdownPanel]" }, { kind: "component", type: SuiDropdownItem, selector: "sui-dropdown-item", inputs: ["label", "sublabel", "description", "size", "leadingFramed", "mode", "selected", "highlighted", "disabled", "shortcut"], outputs: ["clicked"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiFlag, selector: "sui-flag", inputs: ["name", "size", "ariaLabel"] }, { kind: "component", type: SuiAvatar, selector: "sui-avatar", inputs: ["size", "src", "alt", "initials", "color", "status", "memojiSrc", "illustrationSrc", "icon", "companyLogoSrc", "topBadge", "bgColor"] }, { kind: "component", type: SuiBadge, selector: "sui-badge", inputs: ["color", "variant", "size", "type", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "_menu", first: true, predicate: SuiDropdownMenu, descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <sui-form-label\n    [label]=\"label()!\"\n    [sublabel]=\"sublabel()\"\n    [required]=\"required()\"\n    [tooltip]=\"tooltip()\"\n    [size]=\"size()\"\n    class=\"sui-select__label-host\"\n    (click)=\"toggleOpen()\"\n  />\n}\n\n<div\n  #triggerEl\n  class=\"sui-select__trigger\"\n  [class.sui-select__trigger--error]=\"error()\"\n  [class.sui-select__trigger--disabled]=\"isDisabled()\"\n  [class.sui-select__trigger--open]=\"isOpen()\"\n  [class.sui-select__trigger--filled]=\"selectedLabel() !== null\"\n  role=\"combobox\"\n  [attr.aria-haspopup]=\"'listbox'\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n  [attr.tabindex]=\"isDisabled() ? '-1' : '0'\"\n  (click)=\"toggleOpen()\"\n>\n  <!--\n    Left decoration (Figma Select[1.1] Type variant). Prioridad:\n      1. slot proyectado [slot=leading] (custom total)\n      2. imageUrl (avatar/logo del filled state)\n      3. flag (type=country)\n      4. RemixIcon por type (leadingIcon=true) o custom (leadingIcon=string)\n    Solo se renderea si leadingIcon est\u00E1 activo O hay imageUrl/flag.\n  -->\n  @if (showLeading()) {\n    <span class=\"sui-select__leading\">\n      <ng-content select=\"[slot=leading]\" />\n      @if (showLeadingImage()) {\n        @if (type() === 'avatar') {\n          <sui-avatar size=\"xs\" [src]=\"imageUrl()\" />\n        } @else {\n          <img class=\"sui-select__leading-img\" [src]=\"imageUrl()\" alt=\"\" />\n        }\n      } @else if (type() === 'country' && flag()) {\n        <sui-flag class=\"sui-select__leading-flag\" [name]=\"flag()!\" size=\"md\" />\n      } @else {\n        <sui-icon class=\"sui-select__leading-icon\" [name]=\"leadingIconName()\" [size]=\"20\" />\n      }\n    </span>\n  }\n\n  <span class=\"sui-select__value\">\n    @if (selectedLabel()) {\n      {{ selectedLabel() }}\n    } @else {\n      <span class=\"sui-select__placeholder\">{{ placeholder() }}</span>\n    }\n  </span>\n\n  <!-- Badge inline opcional (Figma: entre value y chevron). sui-badge real \u2014\n       defaults orange/lighter/medium replican el chip del Figma (brand naranja). -->\n  @if (badgeCfg(); as bcfg) {\n    <sui-badge\n      class=\"sui-select__badge\"\n      [color]=\"bcfg.color ?? 'orange'\"\n      [variant]=\"bcfg.variant ?? 'lighter'\"\n      [size]=\"bcfg.size ?? 'medium'\"\n    >{{ bcfg.label }}</sui-badge>\n  }\n\n  <!-- Figma: arrow-down-s-line at 20\u00D720 (size-[20px]) \u2014 verified nodeId 270:1091 -->\n  <sui-icon\n    class=\"sui-select__chevron\"\n    name=\"arrow-down-s-line\"\n    [size]=\"20\"\n    aria-hidden=\"true\"\n  />\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n  <sui-form-hint\n    [message]=\"error() ? errorMessage() : hint()\"\n    [variant]=\"error() ? 'error' : 'neutral'\"\n    class=\"sui-select__hint-host\"\n  />\n}\n\n<!--\n  Overlay menu \u2014 delegado a sui-dropdown-menu via [origin]=triggerEl.\n  El sui-dropdown-menu encapsula CDK Overlay, positioning, backdrop,\n  ResizeObserver y detachments. El trigger lo maneja este componente.\n-->\n<sui-dropdown-menu\n  [origin]=\"triggerEl\"\n  [disabled]=\"isDisabled()\"\n  [matchWidth]=\"true\"\n  panelClass=\"sui-select__overlay-pane\"\n  (openedChange)=\"onMenuOpenedChange($event)\"\n>\n  <ng-template suiDropdownPanel>\n    <div\n      class=\"sui-select__panel\"\n      [class.sui-select__panel--xsmall]=\"size() === 'xsmall'\"\n      [class.sui-select__panel--small]=\"size() === 'small'\"\n      [class.sui-select__panel--medium]=\"size() === 'medium'\"\n      role=\"listbox\"\n      [attr.aria-label]=\"label() || placeholder()\"\n    >\n      @for (option of options(); track option.value; let i = $index) {\n        <sui-dropdown-item\n          mode=\"option\"\n          [label]=\"option.label\"\n          [selected]=\"option.value === value()\"\n          [highlighted]=\"highlightedIndex() === i\"\n          [disabled]=\"!!option.disabled\"\n          (clicked)=\"select(option)\"\n          (mouseenter)=\"highlightedIndex.set(i)\"\n        />\n      }\n    </div>\n  </ng-template>\n</sui-dropdown-menu>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-select__label-host{display:block;margin-bottom:4px;cursor:default}.sui-select__trigger{display:flex;align-items:center;max-width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=xsmall]) .sui-select__trigger{gap:6px;padding:5px 6px 5px 8px;border-radius:var(--sui-radius-8)}:host([data-sui-size=small]) .sui-select__trigger{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8)}:host([data-sui-size=medium]) .sui-select__trigger,:host(:not([data-sui-size])) .sui-select__trigger{gap:8px;padding:9px 10px 9px 12px;border-radius:var(--sui-radius-10)}.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error):hover{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error):focus,.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error).sui-select__trigger--open{outline:none;border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-select__trigger--error{border-color:var(--sui-state-error-base);box-shadow:none}.sui-select__trigger--error:not(.sui-select__trigger--disabled):hover{border-color:var(--sui-state-error-base)}.sui-select__trigger--error:not(.sui-select__trigger--disabled):focus,.sui-select__trigger--error:not(.sui-select__trigger--disabled).sui-select__trigger--open{border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-16)}.sui-select__trigger--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-select__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600)}:host([data-sui-disabled]) .sui-select__leading{color:var(--sui-icon-disabled-300);opacity:.48}.sui-select__leading-icon{display:inline-flex}.sui-select__leading-img{width:100%;height:100%;object-fit:cover;border-radius:var(--sui-radius-full)}.sui-select__leading-flag,.sui-select__badge{flex-shrink:0}:host([data-sui-disabled]) .sui-select__badge{opacity:.48}.sui-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950)}:host([data-sui-disabled]) .sui-select__value{color:var(--sui-text-disabled-300)}.sui-select__placeholder{color:var(--sui-text-sub-600)}:host([data-sui-disabled]) .sui-select__placeholder{color:var(--sui-text-disabled-300)}.sui-select__chevron{flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);transition:transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-open]) .sui-select__chevron{transform:rotate(180deg)}:host([data-sui-disabled]) .sui-select__chevron{color:var(--sui-icon-disabled-300)}.sui-select__hint-host{display:block;margin-top:4px}\n"], dependencies: [{ kind: "component", type: SuiFormLabel, selector: "sui-form-label", inputs: ["label", "sublabel", "required", "tooltip", "link", "size", "disabled", "for"], outputs: ["linkClick"] }, { kind: "component", type: SuiFormHint, selector: "sui-form-hint", inputs: ["message", "variant", "icon"] }, { kind: "component", type: SuiDropdownMenu, selector: "sui-dropdown-menu", inputs: ["matchWidth", "flexibleDimensions", "push", "minWidth", "position", "viewportMargin", "panelClass", "disabled", "popupRole", "origin"], outputs: ["openedChange"], exportAs: ["suiDropdownMenu"] }, { kind: "directive", type: SuiDropdownPanel, selector: "ng-template[suiDropdownPanel]" }, { kind: "component", type: SuiDropdownItem, selector: "sui-dropdown-item", inputs: ["label", "sublabel", "description", "size", "leadingFramed", "mode", "selected", "highlighted", "disabled", "shortcut"], outputs: ["clicked"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiFlag, selector: "sui-flag", inputs: ["name", "size", "ariaLabel"] }, { kind: "component", type: SuiAvatar, selector: "sui-avatar", inputs: ["size", "src", "alt", "initials", "color", "status", "memojiSrc", "illustrationSrc", "icon", "companyLogoSrc", "topBadge", "bgColor"] }, { kind: "component", type: SuiBadge, selector: "sui-badge", inputs: ["color", "variant", "size", "type", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiSelect, decorators: [{
             type: Component,
@@ -13635,7 +13639,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[attr.data-sui-error]': 'error() ? "" : null',
                         '[attr.data-sui-disabled]': 'isDisabled() ? "" : null',
                         '[attr.data-sui-open]': 'isOpen() ? "" : null',
-                    }, template: "@if (label()) {\n  <sui-form-label\n    [label]=\"label()!\"\n    [sublabel]=\"sublabel()\"\n    [required]=\"required()\"\n    [tooltip]=\"tooltip()\"\n    [size]=\"size()\"\n    class=\"sui-select__label-host\"\n    (click)=\"toggleOpen()\"\n  />\n}\n\n<div\n  #triggerEl\n  class=\"sui-select__trigger\"\n  [class.sui-select__trigger--error]=\"error()\"\n  [class.sui-select__trigger--disabled]=\"isDisabled()\"\n  [class.sui-select__trigger--open]=\"isOpen()\"\n  [class.sui-select__trigger--filled]=\"selectedLabel() !== null\"\n  role=\"combobox\"\n  [attr.aria-haspopup]=\"'listbox'\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n  [attr.tabindex]=\"isDisabled() ? '-1' : '0'\"\n  (click)=\"toggleOpen()\"\n>\n  <!--\n    Left decoration (Figma Select[1.1] Type variant). Prioridad:\n      1. slot proyectado [slot=leading] (custom total)\n      2. imageUrl (avatar/logo del filled state)\n      3. flag (type=country)\n      4. RemixIcon por type (leadingIcon=true) o custom (leadingIcon=string)\n    Solo se renderea si leadingIcon est\u00E1 activo O hay imageUrl/flag.\n  -->\n  @if (showLeading()) {\n    <span class=\"sui-select__leading\">\n      <ng-content select=\"[slot=leading]\" />\n      @if (showLeadingImage()) {\n        @if (type() === 'avatar') {\n          <sui-avatar size=\"xs\" [src]=\"imageUrl()\" />\n        } @else {\n          <img class=\"sui-select__leading-img\" [src]=\"imageUrl()\" alt=\"\" />\n        }\n      } @else if (type() === 'country' && flag()) {\n        <sui-flag class=\"sui-select__leading-flag\" [name]=\"flag()!\" size=\"md\" />\n      } @else {\n        <sui-icon class=\"sui-select__leading-icon\" [name]=\"leadingIconName()\" [size]=\"20\" />\n      }\n    </span>\n  }\n\n  <span class=\"sui-select__value\">\n    @if (selectedLabel()) {\n      {{ selectedLabel() }}\n    } @else {\n      <span class=\"sui-select__placeholder\">{{ placeholder() }}</span>\n    }\n  </span>\n\n  <!-- Badge inline opcional (Figma: entre value y chevron). sui-badge real \u2014\n       defaults orange/lighter/medium replican el chip del Figma (brand naranja). -->\n  @if (badgeCfg(); as bcfg) {\n    <sui-badge\n      class=\"sui-select__badge\"\n      [color]=\"bcfg.color ?? 'orange'\"\n      [variant]=\"bcfg.variant ?? 'lighter'\"\n      [size]=\"bcfg.size ?? 'medium'\"\n    >{{ bcfg.label }}</sui-badge>\n  }\n\n  <!-- Figma: arrow-down-s-line at 20\u00D720 (size-[20px]) \u2014 verified nodeId 270:1091 -->\n  <sui-icon\n    class=\"sui-select__chevron\"\n    name=\"arrow-down-s-line\"\n    [size]=\"20\"\n    aria-hidden=\"true\"\n  />\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n  <sui-form-hint\n    [message]=\"error() ? errorMessage() : hint()\"\n    [variant]=\"error() ? 'error' : 'neutral'\"\n    [size]=\"size()\"\n    class=\"sui-select__hint-host\"\n  />\n}\n\n<!--\n  Overlay menu \u2014 delegado a sui-dropdown-menu via [origin]=triggerEl.\n  El sui-dropdown-menu encapsula CDK Overlay, positioning, backdrop,\n  ResizeObserver y detachments. El trigger lo maneja este componente.\n-->\n<sui-dropdown-menu\n  [origin]=\"triggerEl\"\n  [disabled]=\"isDisabled()\"\n  [matchWidth]=\"true\"\n  panelClass=\"sui-select__overlay-pane\"\n  (openedChange)=\"onMenuOpenedChange($event)\"\n>\n  <ng-template suiDropdownPanel>\n    <div\n      class=\"sui-select__panel\"\n      [class.sui-select__panel--xsmall]=\"size() === 'xsmall'\"\n      [class.sui-select__panel--small]=\"size() === 'small'\"\n      [class.sui-select__panel--medium]=\"size() === 'medium'\"\n      role=\"listbox\"\n      [attr.aria-label]=\"label() || placeholder()\"\n    >\n      @for (option of options(); track option.value; let i = $index) {\n        <sui-dropdown-item\n          mode=\"option\"\n          [label]=\"option.label\"\n          [selected]=\"option.value === value()\"\n          [highlighted]=\"highlightedIndex() === i\"\n          [disabled]=\"!!option.disabled\"\n          (clicked)=\"select(option)\"\n          (mouseenter)=\"highlightedIndex.set(i)\"\n        />\n      }\n    </div>\n  </ng-template>\n</sui-dropdown-menu>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-select__label-host{display:block;margin-bottom:4px;cursor:default}.sui-select__trigger{display:flex;align-items:center;max-width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=xsmall]) .sui-select__trigger{gap:6px;padding:5px 6px 5px 8px;border-radius:var(--sui-radius-8)}:host([data-sui-size=small]) .sui-select__trigger{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8)}:host([data-sui-size=medium]) .sui-select__trigger,:host(:not([data-sui-size])) .sui-select__trigger{gap:8px;padding:9px 10px 9px 12px;border-radius:var(--sui-radius-10)}.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error):hover{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error):focus,.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error).sui-select__trigger--open{outline:none;border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-select__trigger--error{border-color:var(--sui-state-error-base);box-shadow:none}.sui-select__trigger--error:not(.sui-select__trigger--disabled):hover{border-color:var(--sui-state-error-base)}.sui-select__trigger--error:not(.sui-select__trigger--disabled):focus,.sui-select__trigger--error:not(.sui-select__trigger--disabled).sui-select__trigger--open{border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-16)}.sui-select__trigger--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-select__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600)}:host([data-sui-disabled]) .sui-select__leading{color:var(--sui-icon-disabled-300);opacity:.48}.sui-select__leading-icon{display:inline-flex}.sui-select__leading-img{width:100%;height:100%;object-fit:cover;border-radius:var(--sui-radius-full)}.sui-select__leading-flag,.sui-select__badge{flex-shrink:0}:host([data-sui-disabled]) .sui-select__badge{opacity:.48}.sui-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950)}:host([data-sui-disabled]) .sui-select__value{color:var(--sui-text-disabled-300)}.sui-select__placeholder{color:var(--sui-text-sub-600)}:host([data-sui-disabled]) .sui-select__placeholder{color:var(--sui-text-disabled-300)}.sui-select__chevron{flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);transition:transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-open]) .sui-select__chevron{transform:rotate(180deg)}:host([data-sui-disabled]) .sui-select__chevron{color:var(--sui-icon-disabled-300)}.sui-select__hint-host{display:block;margin-top:4px}\n"] }]
+                    }, template: "@if (label()) {\n  <sui-form-label\n    [label]=\"label()!\"\n    [sublabel]=\"sublabel()\"\n    [required]=\"required()\"\n    [tooltip]=\"tooltip()\"\n    [size]=\"size()\"\n    class=\"sui-select__label-host\"\n    (click)=\"toggleOpen()\"\n  />\n}\n\n<div\n  #triggerEl\n  class=\"sui-select__trigger\"\n  [class.sui-select__trigger--error]=\"error()\"\n  [class.sui-select__trigger--disabled]=\"isDisabled()\"\n  [class.sui-select__trigger--open]=\"isOpen()\"\n  [class.sui-select__trigger--filled]=\"selectedLabel() !== null\"\n  role=\"combobox\"\n  [attr.aria-haspopup]=\"'listbox'\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n  [attr.tabindex]=\"isDisabled() ? '-1' : '0'\"\n  (click)=\"toggleOpen()\"\n>\n  <!--\n    Left decoration (Figma Select[1.1] Type variant). Prioridad:\n      1. slot proyectado [slot=leading] (custom total)\n      2. imageUrl (avatar/logo del filled state)\n      3. flag (type=country)\n      4. RemixIcon por type (leadingIcon=true) o custom (leadingIcon=string)\n    Solo se renderea si leadingIcon est\u00E1 activo O hay imageUrl/flag.\n  -->\n  @if (showLeading()) {\n    <span class=\"sui-select__leading\">\n      <ng-content select=\"[slot=leading]\" />\n      @if (showLeadingImage()) {\n        @if (type() === 'avatar') {\n          <sui-avatar size=\"xs\" [src]=\"imageUrl()\" />\n        } @else {\n          <img class=\"sui-select__leading-img\" [src]=\"imageUrl()\" alt=\"\" />\n        }\n      } @else if (type() === 'country' && flag()) {\n        <sui-flag class=\"sui-select__leading-flag\" [name]=\"flag()!\" size=\"md\" />\n      } @else {\n        <sui-icon class=\"sui-select__leading-icon\" [name]=\"leadingIconName()\" [size]=\"20\" />\n      }\n    </span>\n  }\n\n  <span class=\"sui-select__value\">\n    @if (selectedLabel()) {\n      {{ selectedLabel() }}\n    } @else {\n      <span class=\"sui-select__placeholder\">{{ placeholder() }}</span>\n    }\n  </span>\n\n  <!-- Badge inline opcional (Figma: entre value y chevron). sui-badge real \u2014\n       defaults orange/lighter/medium replican el chip del Figma (brand naranja). -->\n  @if (badgeCfg(); as bcfg) {\n    <sui-badge\n      class=\"sui-select__badge\"\n      [color]=\"bcfg.color ?? 'orange'\"\n      [variant]=\"bcfg.variant ?? 'lighter'\"\n      [size]=\"bcfg.size ?? 'medium'\"\n    >{{ bcfg.label }}</sui-badge>\n  }\n\n  <!-- Figma: arrow-down-s-line at 20\u00D720 (size-[20px]) \u2014 verified nodeId 270:1091 -->\n  <sui-icon\n    class=\"sui-select__chevron\"\n    name=\"arrow-down-s-line\"\n    [size]=\"20\"\n    aria-hidden=\"true\"\n  />\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n  <sui-form-hint\n    [message]=\"error() ? errorMessage() : hint()\"\n    [variant]=\"error() ? 'error' : 'neutral'\"\n    class=\"sui-select__hint-host\"\n  />\n}\n\n<!--\n  Overlay menu \u2014 delegado a sui-dropdown-menu via [origin]=triggerEl.\n  El sui-dropdown-menu encapsula CDK Overlay, positioning, backdrop,\n  ResizeObserver y detachments. El trigger lo maneja este componente.\n-->\n<sui-dropdown-menu\n  [origin]=\"triggerEl\"\n  [disabled]=\"isDisabled()\"\n  [matchWidth]=\"true\"\n  panelClass=\"sui-select__overlay-pane\"\n  (openedChange)=\"onMenuOpenedChange($event)\"\n>\n  <ng-template suiDropdownPanel>\n    <div\n      class=\"sui-select__panel\"\n      [class.sui-select__panel--xsmall]=\"size() === 'xsmall'\"\n      [class.sui-select__panel--small]=\"size() === 'small'\"\n      [class.sui-select__panel--medium]=\"size() === 'medium'\"\n      role=\"listbox\"\n      [attr.aria-label]=\"label() || placeholder()\"\n    >\n      @for (option of options(); track option.value; let i = $index) {\n        <sui-dropdown-item\n          mode=\"option\"\n          [label]=\"option.label\"\n          [selected]=\"option.value === value()\"\n          [highlighted]=\"highlightedIndex() === i\"\n          [disabled]=\"!!option.disabled\"\n          (clicked)=\"select(option)\"\n          (mouseenter)=\"highlightedIndex.set(i)\"\n        />\n      }\n    </div>\n  </ng-template>\n</sui-dropdown-menu>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-select__label-host{display:block;margin-bottom:4px;cursor:default}.sui-select__trigger{display:flex;align-items:center;max-width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=xsmall]) .sui-select__trigger{gap:6px;padding:5px 6px 5px 8px;border-radius:var(--sui-radius-8)}:host([data-sui-size=small]) .sui-select__trigger{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8)}:host([data-sui-size=medium]) .sui-select__trigger,:host(:not([data-sui-size])) .sui-select__trigger{gap:8px;padding:9px 10px 9px 12px;border-radius:var(--sui-radius-10)}.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error):hover{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error):focus,.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error).sui-select__trigger--open{outline:none;border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-select__trigger--error{border-color:var(--sui-state-error-base);box-shadow:none}.sui-select__trigger--error:not(.sui-select__trigger--disabled):hover{border-color:var(--sui-state-error-base)}.sui-select__trigger--error:not(.sui-select__trigger--disabled):focus,.sui-select__trigger--error:not(.sui-select__trigger--disabled).sui-select__trigger--open{border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-16)}.sui-select__trigger--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-select__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600)}:host([data-sui-disabled]) .sui-select__leading{color:var(--sui-icon-disabled-300);opacity:.48}.sui-select__leading-icon{display:inline-flex}.sui-select__leading-img{width:100%;height:100%;object-fit:cover;border-radius:var(--sui-radius-full)}.sui-select__leading-flag,.sui-select__badge{flex-shrink:0}:host([data-sui-disabled]) .sui-select__badge{opacity:.48}.sui-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950)}:host([data-sui-disabled]) .sui-select__value{color:var(--sui-text-disabled-300)}.sui-select__placeholder{color:var(--sui-text-sub-600)}:host([data-sui-disabled]) .sui-select__placeholder{color:var(--sui-text-disabled-300)}.sui-select__chevron{flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);transition:transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-open]) .sui-select__chevron{transform:rotate(180deg)}:host([data-sui-disabled]) .sui-select__chevron{color:var(--sui-icon-disabled-300)}.sui-select__hint-host{display:block;margin-top:4px}\n"] }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], leadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIcon", required: false }] }], flag: [{ type: i0.Input, args: [{ isSignal: true, alias: "flag", required: false }] }], imageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrl", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], triggerEl: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], _menu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SuiDropdownMenu), { isSignal: true }] }], onKeydown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
@@ -14671,11 +14675,11 @@ class SuiStoreCard {
         this.ratingClicked.emit({ id: s.id, name: s.name, logoUrl: s.logoUrl ?? null });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiStoreCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiStoreCard, isStandalone: true, selector: "sui-store-card", inputs: { store: { classPropertyName: "store", publicName: "store", isSignal: true, isRequired: true, transformFunction: null }, isFavorite: { classPropertyName: "isFavorite", publicName: "isFavorite", isSignal: true, isRequired: false, transformFunction: null }, disableLink: { classPropertyName: "disableLink", publicName: "disableLink", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleFavorite: "toggleFavorite", ratingClicked: "ratingClicked" }, ngImport: i0, template: "<a class=\"store\"\n   [class.store--suspended]=\"store().isSuspended\"\n   [class.store--closed]=\"!store().isOpen && !store().isSuspended && !store().isOwnerPreview\"\n   [class.store--preview]=\"store().isOwnerPreview\"\n   [routerLink]=\"link()\"\n   (click)=\"onCardClick($event)\">\n\n  <div class=\"store__cover\"\n       [class.store__cover--fallback]=\"!store().coverUrl\">\n    <!-- <img> real (no background CSS): permite retry nativo via suiImgRetry\n         cuando un load falla (red flaky) + fade-in al cargar. El fallback\n         oscuro queda debajo como placeholder hasta que la imagen aparece. -->\n    @if (store().coverUrl) {\n      <img class=\"store__cover-img\"\n           suiImgRetry\n           [src]=\"store().coverUrl\"\n           alt=\"\"\n           loading=\"lazy\"\n           decoding=\"async\" />\n    }\n    <div class=\"store__cover-grad\"></div>\n\n    @if (!store().isOwnerPreview) {\n      <button type=\"button\"\n              class=\"store__fav\"\n              [class.store__fav--active]=\"isFavorite()\"\n              (click)=\"onFavClick($event)\"\n              aria-label=\"Favorito\">\n        <sui-icon\n          [name]=\"isFavorite() ? 'heart-fill' : 'heart-line'\"\n          [size]=\"18\"\n          color=\"#fa7319\"\n        ></sui-icon>\n      </button>\n    }\n\n    @if (store().isSuspended) {\n      <span class=\"store__status store__status--suspended\">No disponible</span>\n    } @else if (previewBadge(); as pb) {\n      <span class=\"store__status\"\n            [class.store__status--draft]=\"pb.variant === 'draft'\"\n            [class.store__status--pending]=\"pb.variant === 'pending'\"\n            [class.store__status--rejected]=\"pb.variant === 'rejected'\">\n        {{ pb.label }}\n      </span>\n    } @else {\n      <span class=\"store__status\"\n            [class.store__status--open]=\"store().isOpen\"\n            [class.store__status--closed]=\"!store().isOpen\">\n        {{ store().isOpen ? 'Abierto' : 'Cerrado' }}\n      </span>\n    }\n  </div>\n\n  <div class=\"store__body\">\n    <div class=\"store__logo\">\n      @if (store().logoUrl) {\n        <!-- suiImgRetry reintenta loads fallidos; si muere definitivo, el\n             atributo data-sui-img-dead lo oculta via CSS (queda el fondo). -->\n        <img suiImgRetry [src]=\"store().logoUrl\" [alt]=\"store().name\" />\n      } @else {\n        {{ initial() }}\n      }\n    </div>\n    <div class=\"store__info\">\n      <h3 class=\"store__name\">{{ store().name }}</h3>\n      <p class=\"store__type\">{{ store().businessType }}</p>\n\n      @if (store().isOwnerPreview) {\n        <!-- Modo preview (owner viendo borrador/revisi\u00F3n, super-admin revisando):\n             solo Ubicaci\u00F3n + Env\u00EDo. Rating + Distancia no aplican antes de aprobar. -->\n        <div class=\"store__meta store__meta--preview\">\n          <div class=\"store__stat\">\n            <span class=\"store__stat-label\">Ubicaci\u00F3n</span>\n            <span class=\"store__stat-value\">\n              <sui-icon name=\"map-pin-line\" [size]=\"13\" color=\"var(--brand-500, #fa7319)\"></sui-icon>\n              {{ store().district || '\u2014' }}\n            </span>\n          </div>\n          <div class=\"store__stat\">\n            <span class=\"store__stat-label\">Env\u00EDo</span>\n            <span class=\"store__stat-value\">{{ deliveryLabel() }}</span>\n          </div>\n        </div>\n      } @else {\n        <div class=\"store__meta\">\n          <button\n            type=\"button\"\n            class=\"store__stat store__stat--clickable\"\n            (click)=\"onRatingClick($event)\"\n            (touchstart)=\"$event.currentTarget\"\n            (touchend)=\"$any($event.currentTarget).blur()\"\n            [attr.aria-label]=\"'Ver calificaciones del local'\"\n          >\n            <span class=\"store__stat-label\">Calificaci\u00F3n</span>\n            <span class=\"store__stat-value\">\n              <sui-icon name=\"star-fill\" [size]=\"13\" color=\"var(--brand-500, #fa7319)\"></sui-icon>\n              {{ ratingLabel() }}\n            </span>\n          </button>\n          <div class=\"store__stat\">\n            <span class=\"store__stat-label\">Ubicaci\u00F3n</span>\n            <span class=\"store__stat-value\">\n              <sui-icon name=\"map-pin-line\" [size]=\"13\" color=\"var(--brand-500, #fa7319)\"></sui-icon>\n              {{ store().district || '\u2014' }}\n            </span>\n          </div>\n          <div class=\"store__stat\">\n            <span class=\"store__stat-label\">Env\u00EDo</span>\n            <span class=\"store__stat-value\">{{ deliveryLabel() }}</span>\n          </div>\n          <div class=\"store__stat\">\n            <span class=\"store__stat-label\">Distancia</span>\n            <span class=\"store__stat-value\">{{ distanceLabel() }}</span>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n</a>\n", styles: ["@charset \"UTF-8\";.mp-badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid transparent;line-height:1}.mp-badge--green{background:var(--admin-success-bg, #dcfce7);color:var(--admin-success, #16a34a)}.mp-badge--red{background:var(--admin-error-bg, #fee2e2);color:var(--admin-error, #ef4444)}.mp-badge--orange{background:#fff7ed;color:#c2410c;border-color:#fed7aa}.mp-badge--blue{background:var(--admin-info-bg, #dbeafe);color:#2563eb}.mp-badge--gray{background:var(--admin-bg-tertiary, #f3f4f6);color:var(--admin-text-tertiary, #6b7280)}.mp-badge--sm{height:20px;padding:0 8px;font-size:11px}.mp-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 12px;border-radius:6px;border:1px solid transparent;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s ease}.mp-action-btn:disabled{opacity:.5;cursor:not-allowed}.mp-action-btn--activate{background:var(--admin-success, #16a34a);color:#fff}.mp-action-btn--activate:hover{background:#15803d}.mp-action-btn--renew{background:var(--admin-info, #3b82f6);color:#fff}.mp-action-btn--renew:hover{background:#2563eb}.mp-action-btn--suspend{background:var(--admin-bg-primary, #fff);color:var(--admin-error, #ef4444);border-color:#fca5a5}.mp-action-btn--suspend:hover{background:var(--admin-error-bg, #fee2e2)}.mp-action-btn--danger{background:#dc2626;color:#fff;border:none}.mp-action-btn--danger:hover{background:#b91c1c}.mp-action-btn--outline{background:var(--admin-bg-primary, #fff);color:var(--admin-text-secondary, #374151);border-color:var(--admin-border-primary, #e5e7eb)}.mp-action-btn--outline:hover{background:var(--admin-bg-hover, #f9fafb)}.mp-action-btn--icon{width:28px;height:28px;padding:0;background:transparent;color:var(--admin-text-muted, #9ca3af);border:none}.mp-action-btn--icon:hover{background:var(--admin-bg-hover, #f9fafb);color:var(--admin-text-primary, #171717)}.mp-action-btn--icon-danger{width:28px;height:28px;padding:0;background:transparent;color:#dc2626;border:none}.mp-action-btn--icon-danger:hover{background:var(--admin-error-bg, #fee2e2);color:#dc2626}:host{display:block}.store{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}.store img{-webkit-user-drag:none;pointer-events:none}.store{display:block;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .2s ease,transform .2s ease;cursor:pointer}.store:active{transform:scale(.995);box-shadow:0 4px 14px #00000014}.store--suspended{cursor:not-allowed;opacity:.6}.store--closed .store__cover{filter:grayscale(1) brightness(.92);transition:filter .2s ease}.store--preview{cursor:default}.store--preview:active{transform:none;box-shadow:none}.store__cover{height:120px;position:relative;overflow:hidden;background:linear-gradient(135deg,#3a3a3a,#171717)}.store__cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s ease-out}.store__cover-img.sui-img-loaded{opacity:1}.store__cover-img[data-sui-img-dead]{display:none}.store__cover-grad{position:absolute;inset:0;background:linear-gradient(180deg,#0000 40%,#00000059);pointer-events:none}.store__fav{position:absolute;top:10px;left:10px;width:36px;height:36px;border-radius:999px;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1;transition:background .15s ease}.store__fav:active{background:#fff}.store__status{position:absolute;top:10px;right:10px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:inline-flex;align-items:center;gap:4px;z-index:1;letter-spacing:.01em}.store__status:before{content:\"\";width:6px;height:6px;border-radius:50%;background:var(--sui-state-success-base, #22c55e)}.store__status--open{color:var(--sui-state-success-base, #16a34a)}.store__status--open:before{background:var(--sui-state-success-base, #22c55e)}.store__status--closed{color:var(--sui-state-faded-base, #94a3b8)}.store__status--closed:before{background:var(--sui-state-faded-base, #94a3b8)}.store__status--suspended{color:var(--sui-state-error-base, #dc2626)}.store__status--suspended:before{background:var(--sui-state-error-base, #dc2626)}.store__status--draft{color:var(--sui-state-faded-base, #475569);background:#fffffff5}.store__status--draft:before{background:var(--sui-state-faded-base, #94a3b8)}.store__status--pending{color:#c2530b;background:#fffffff5}.store__status--pending:before{background:var(--sui-primary-base, #fa7319);animation:store-pulse 1.6s ease-in-out infinite}.store__status--rejected{color:var(--sui-state-error-base, #b91c1c);background:#fffffff5}.store__status--rejected:before{background:var(--sui-state-error-base, #dc2626)}@keyframes store-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.4)}}.store__body{padding:12px 14px 14px;display:flex;gap:12px;align-items:flex-start}.store__logo img[data-sui-img-dead]{display:none}.store__logo{width:48px;height:48px;border-radius:10px;background:var(--sui-bg-white-0, #fff);border:2px solid var(--sui-bg-white-0, #fff);box-shadow:0 1px 4px #0000001f;flex-shrink:0;margin-top:-32px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:var(--sui-primary-base, #fa7319);overflow:hidden;position:relative;z-index:2}.store__logo img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.store__info{flex:1;min-width:0}.store__name{font-size:20px;line-height:26px;font-weight:700;color:var(--sui-text-strong-950, #171717);margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.store__type{font-size:14px;line-height:20px;font-weight:500;color:var(--sui-text-sub-600, #5c5c5c);margin:0 0 8px}.store__meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb)}.store__meta--preview{justify-content:flex-start;gap:32px}.store__stat{display:flex;flex-direction:column;gap:2px;min-width:0}.store__stat--clickable{background:transparent;border:none;padding:4px 6px;margin:-4px -6px;border-radius:8px;cursor:pointer;text-align:left;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;transition:background-color .15s}.store__stat--clickable:hover{background:var(--sui-bg-weak-50, #f5f7fa)}.store__stat--clickable:active{background:var(--sui-bg-soft-200, #ebeef2)}.store__stat-label{font-size:10px;color:var(--sui-text-soft-400, #a3a3a3);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.store__stat-value{font-size:13px;font-weight:700;color:var(--sui-text-strong-950, #171717);display:inline-flex;align-items:center;gap:3px;white-space:nowrap}.store__stat-value svg{color:var(--sui-primary-base, #fa7319);flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "directive", type: SuiImgRetry, selector: "img[suiImgRetry]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiStoreCard, isStandalone: true, selector: "sui-store-card", inputs: { store: { classPropertyName: "store", publicName: "store", isSignal: true, isRequired: true, transformFunction: null }, isFavorite: { classPropertyName: "isFavorite", publicName: "isFavorite", isSignal: true, isRequired: false, transformFunction: null }, disableLink: { classPropertyName: "disableLink", publicName: "disableLink", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleFavorite: "toggleFavorite", ratingClicked: "ratingClicked" }, ngImport: i0, template: "<a class=\"store\"\n   [class.store--suspended]=\"store().isSuspended\"\n   [class.store--closed]=\"!store().isOpen && !store().isSuspended && !store().isOwnerPreview\"\n   [class.store--preview]=\"store().isOwnerPreview\"\n   [routerLink]=\"link()\"\n   (click)=\"onCardClick($event)\">\n\n  <div class=\"store__cover\"\n       [class.store__cover--fallback]=\"!store().coverUrl\">\n    <!-- <img> real (no background CSS): permite retry nativo via suiImgRetry\n         cuando un load falla (red flaky) + fade-in al cargar. El fallback\n         oscuro queda debajo como placeholder hasta que la imagen aparece. -->\n    @if (store().coverUrl) {\n      <img class=\"store__cover-img\"\n           suiImgRetry\n           [src]=\"store().coverUrl\"\n           alt=\"\"\n           loading=\"lazy\"\n           decoding=\"async\" />\n    }\n    <div class=\"store__cover-grad\"></div>\n\n    @if (!store().isOwnerPreview) {\n      <button type=\"button\"\n              class=\"store__fav\"\n              [class.store__fav--active]=\"isFavorite()\"\n              (click)=\"onFavClick($event)\"\n              aria-label=\"Favorito\">\n        <sui-icon\n          [name]=\"isFavorite() ? 'heart-fill' : 'heart-line'\"\n          [size]=\"18\"\n          color=\"#fa7319\"\n        ></sui-icon>\n      </button>\n    }\n\n    @if (store().isSuspended) {\n      <span class=\"store__status store__status--suspended\">No disponible</span>\n    } @else if (previewBadge(); as pb) {\n      <span class=\"store__status\"\n            [class.store__status--draft]=\"pb.variant === 'draft'\"\n            [class.store__status--pending]=\"pb.variant === 'pending'\"\n            [class.store__status--rejected]=\"pb.variant === 'rejected'\">\n        {{ pb.label }}\n      </span>\n    } @else {\n      <span class=\"store__status\"\n            [class.store__status--open]=\"store().isOpen\"\n            [class.store__status--closed]=\"!store().isOpen\">\n        {{ store().isOpen ? 'Abierto' : 'Cerrado' }}\n      </span>\n    }\n  </div>\n\n  <div class=\"store__body\">\n    <div class=\"store__logo\">\n      @if (store().logoUrl) {\n        <!-- suiImgRetry reintenta loads fallidos; si muere definitivo, el\n             atributo data-sui-img-dead lo oculta via CSS (queda el fondo). -->\n        <img suiImgRetry [src]=\"store().logoUrl\" [alt]=\"store().name\" />\n      } @else {\n        {{ initial() }}\n      }\n    </div>\n    <div class=\"store__info\">\n      <h3 class=\"store__name\">{{ store().name }}</h3>\n      <p class=\"store__type\">{{ store().businessType }}</p>\n    </div>\n\n    <!-- Meta a ANCHO COMPLETO de la card (hijo directo del body con wrap):\n         antes viv\u00EDa dentro de store__info y heredaba el sangrado del logo\n         (60px muertos a la izquierda). -->\n    @if (store().isOwnerPreview) {\n        <!-- Modo preview (owner viendo borrador/revisi\u00F3n, super-admin revisando):\n             solo Ubicaci\u00F3n + Env\u00EDo. Rating + Distancia no aplican antes de aprobar. -->\n        <div class=\"store__meta store__meta--preview\">\n          <div class=\"store__stat\">\n            <span class=\"store__stat-label\">Ubicaci\u00F3n</span>\n            <span class=\"store__stat-value\">\n              <sui-icon name=\"map-pin-line\" [size]=\"13\" color=\"var(--brand-500, #fa7319)\"></sui-icon>\n              {{ store().district || '\u2014' }}\n            </span>\n          </div>\n          <div class=\"store__stat\">\n            <span class=\"store__stat-label\">Env\u00EDo</span>\n            <span class=\"store__stat-value\">{{ deliveryLabel() }}</span>\n          </div>\n        </div>\n      } @else {\n        <div class=\"store__meta\">\n          <button\n            type=\"button\"\n            class=\"store__stat store__stat--clickable\"\n            (click)=\"onRatingClick($event)\"\n            (touchstart)=\"$event.currentTarget\"\n            (touchend)=\"$any($event.currentTarget).blur()\"\n            [attr.aria-label]=\"'Ver calificaciones del local'\"\n          >\n            <span class=\"store__stat-label\">Calificaci\u00F3n</span>\n            <span class=\"store__stat-value\">\n              <sui-icon name=\"star-fill\" [size]=\"13\" color=\"var(--brand-500, #fa7319)\"></sui-icon>\n              {{ ratingLabel() }}\n            </span>\n          </button>\n          <div class=\"store__stat\">\n            <span class=\"store__stat-label\">Ubicaci\u00F3n</span>\n            <span class=\"store__stat-value\">\n              <sui-icon name=\"map-pin-line\" [size]=\"13\" color=\"var(--brand-500, #fa7319)\"></sui-icon>\n              {{ store().district || '\u2014' }}\n            </span>\n          </div>\n          <div class=\"store__stat\">\n            <span class=\"store__stat-label\">Env\u00EDo</span>\n            <span class=\"store__stat-value\">{{ deliveryLabel() }}</span>\n          </div>\n          <div class=\"store__stat\">\n            <span class=\"store__stat-label\">Distancia</span>\n            <span class=\"store__stat-value\">{{ distanceLabel() }}</span>\n          </div>\n        </div>\n      }\n  </div>\n</a>\n", styles: ["@charset \"UTF-8\";.mp-badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid transparent;line-height:1}.mp-badge--green{background:var(--admin-success-bg, #dcfce7);color:var(--admin-success, #16a34a)}.mp-badge--red{background:var(--admin-error-bg, #fee2e2);color:var(--admin-error, #ef4444)}.mp-badge--orange{background:#fff7ed;color:#c2410c;border-color:#fed7aa}.mp-badge--blue{background:var(--admin-info-bg, #dbeafe);color:#2563eb}.mp-badge--gray{background:var(--admin-bg-tertiary, #f3f4f6);color:var(--admin-text-tertiary, #6b7280)}.mp-badge--sm{height:20px;padding:0 8px;font-size:11px}.mp-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 12px;border-radius:6px;border:1px solid transparent;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s ease}.mp-action-btn:disabled{opacity:.5;cursor:not-allowed}.mp-action-btn--activate{background:var(--admin-success, #16a34a);color:#fff}.mp-action-btn--activate:hover{background:#15803d}.mp-action-btn--renew{background:var(--admin-info, #3b82f6);color:#fff}.mp-action-btn--renew:hover{background:#2563eb}.mp-action-btn--suspend{background:var(--admin-bg-primary, #fff);color:var(--admin-error, #ef4444);border-color:#fca5a5}.mp-action-btn--suspend:hover{background:var(--admin-error-bg, #fee2e2)}.mp-action-btn--danger{background:#dc2626;color:#fff;border:none}.mp-action-btn--danger:hover{background:#b91c1c}.mp-action-btn--outline{background:var(--admin-bg-primary, #fff);color:var(--admin-text-secondary, #374151);border-color:var(--admin-border-primary, #e5e7eb)}.mp-action-btn--outline:hover{background:var(--admin-bg-hover, #f9fafb)}.mp-action-btn--icon{width:28px;height:28px;padding:0;background:transparent;color:var(--admin-text-muted, #9ca3af);border:none}.mp-action-btn--icon:hover{background:var(--admin-bg-hover, #f9fafb);color:var(--admin-text-primary, #171717)}.mp-action-btn--icon-danger{width:28px;height:28px;padding:0;background:transparent;color:#dc2626;border:none}.mp-action-btn--icon-danger:hover{background:var(--admin-error-bg, #fee2e2);color:#dc2626}:host{display:block}.store{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}.store img{-webkit-user-drag:none;pointer-events:none}.store{display:block;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .2s ease,transform .2s ease;cursor:pointer}.store:active{transform:scale(.995);box-shadow:0 4px 14px #00000014}.store--suspended{cursor:not-allowed;opacity:.6}.store--closed .store__cover{filter:grayscale(1) brightness(.92);transition:filter .2s ease}.store--preview{cursor:default}.store--preview:active{transform:none;box-shadow:none}.store__cover{height:120px;position:relative;overflow:hidden;background:linear-gradient(135deg,#3a3a3a,#171717)}.store__cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s ease-out}.store__cover-img.sui-img-loaded{opacity:1}.store__cover-img[data-sui-img-dead]{display:none}.store__cover-grad{position:absolute;inset:0;background:linear-gradient(180deg,#0000 40%,#00000059);pointer-events:none}.store__fav{position:absolute;top:10px;left:10px;width:36px;height:36px;border-radius:999px;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1;transition:background .15s ease}.store__fav:active{background:#fff}.store__status{position:absolute;top:10px;right:10px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:inline-flex;align-items:center;gap:4px;z-index:1;letter-spacing:.01em}.store__status:before{content:\"\";width:6px;height:6px;border-radius:50%;background:var(--sui-state-success-base, #22c55e)}.store__status--open{color:var(--sui-state-success-base, #16a34a)}.store__status--open:before{background:var(--sui-state-success-base, #22c55e)}.store__status--closed{color:var(--sui-state-faded-base, #94a3b8)}.store__status--closed:before{background:var(--sui-state-faded-base, #94a3b8)}.store__status--suspended{color:var(--sui-state-error-base, #dc2626)}.store__status--suspended:before{background:var(--sui-state-error-base, #dc2626)}.store__status--draft{color:var(--sui-state-faded-base, #475569);background:#fffffff5}.store__status--draft:before{background:var(--sui-state-faded-base, #94a3b8)}.store__status--pending{color:#c2530b;background:#fffffff5}.store__status--pending:before{background:var(--sui-primary-base, #fa7319);animation:store-pulse 1.6s ease-in-out infinite}.store__status--rejected{color:var(--sui-state-error-base, #b91c1c);background:#fffffff5}.store__status--rejected:before{background:var(--sui-state-error-base, #dc2626)}@keyframes store-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.4)}}.store__body{padding:12px 14px 14px;display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}.store__logo img[data-sui-img-dead]{display:none}.store__logo{width:48px;height:48px;border-radius:10px;background:var(--sui-bg-white-0, #fff);border:2px solid var(--sui-bg-white-0, #fff);box-shadow:0 1px 4px #0000001f;flex-shrink:0;margin-top:-32px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:var(--sui-primary-base, #fa7319);overflow:hidden;position:relative;z-index:2}.store__logo img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.store__info{flex:1;min-width:0}.store__name{font-size:20px;line-height:26px;font-weight:700;color:var(--sui-text-strong-950, #171717);margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.store__type{font-size:14px;line-height:20px;font-weight:500;color:var(--sui-text-sub-600, #5c5c5c);margin:0 0 8px}.store__meta{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:2px;padding-top:14px;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb)}.store__meta--preview{justify-content:flex-start;gap:32px}.store__stat{display:flex;flex-direction:column;gap:2px;min-width:0}.store__stat--clickable{background:transparent;border:none;padding:4px 6px;margin:-4px -6px;border-radius:8px;cursor:pointer;text-align:left;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;transition:background-color .15s}.store__stat--clickable:hover{background:var(--sui-bg-weak-50, #f5f7fa)}.store__stat--clickable:active{background:var(--sui-bg-soft-200, #ebeef2)}.store__stat-label{font-size:10px;color:var(--sui-text-soft-400, #a3a3a3);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.store__stat-value{font-size:13px;font-weight:700;color:var(--sui-text-strong-950, #171717);display:inline-flex;align-items:center;gap:3px;white-space:nowrap}.store__stat-value svg{color:var(--sui-primary-base, #fa7319);flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "directive", type: SuiImgRetry, selector: "img[suiImgRetry]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiStoreCard, decorators: [{
             type: Component,
-            args: [{ selector: 'sui-store-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLink, SuiIcon, SuiImgRetry], template: "<a class=\"store\"\n   [class.store--suspended]=\"store().isSuspended\"\n   [class.store--closed]=\"!store().isOpen && !store().isSuspended && !store().isOwnerPreview\"\n   [class.store--preview]=\"store().isOwnerPreview\"\n   [routerLink]=\"link()\"\n   (click)=\"onCardClick($event)\">\n\n  <div class=\"store__cover\"\n       [class.store__cover--fallback]=\"!store().coverUrl\">\n    <!-- <img> real (no background CSS): permite retry nativo via suiImgRetry\n         cuando un load falla (red flaky) + fade-in al cargar. El fallback\n         oscuro queda debajo como placeholder hasta que la imagen aparece. -->\n    @if (store().coverUrl) {\n      <img class=\"store__cover-img\"\n           suiImgRetry\n           [src]=\"store().coverUrl\"\n           alt=\"\"\n           loading=\"lazy\"\n           decoding=\"async\" />\n    }\n    <div class=\"store__cover-grad\"></div>\n\n    @if (!store().isOwnerPreview) {\n      <button type=\"button\"\n              class=\"store__fav\"\n              [class.store__fav--active]=\"isFavorite()\"\n              (click)=\"onFavClick($event)\"\n              aria-label=\"Favorito\">\n        <sui-icon\n          [name]=\"isFavorite() ? 'heart-fill' : 'heart-line'\"\n          [size]=\"18\"\n          color=\"#fa7319\"\n        ></sui-icon>\n      </button>\n    }\n\n    @if (store().isSuspended) {\n      <span class=\"store__status store__status--suspended\">No disponible</span>\n    } @else if (previewBadge(); as pb) {\n      <span class=\"store__status\"\n            [class.store__status--draft]=\"pb.variant === 'draft'\"\n            [class.store__status--pending]=\"pb.variant === 'pending'\"\n            [class.store__status--rejected]=\"pb.variant === 'rejected'\">\n        {{ pb.label }}\n      </span>\n    } @else {\n      <span class=\"store__status\"\n            [class.store__status--open]=\"store().isOpen\"\n            [class.store__status--closed]=\"!store().isOpen\">\n        {{ store().isOpen ? 'Abierto' : 'Cerrado' }}\n      </span>\n    }\n  </div>\n\n  <div class=\"store__body\">\n    <div class=\"store__logo\">\n      @if (store().logoUrl) {\n        <!-- suiImgRetry reintenta loads fallidos; si muere definitivo, el\n             atributo data-sui-img-dead lo oculta via CSS (queda el fondo). -->\n        <img suiImgRetry [src]=\"store().logoUrl\" [alt]=\"store().name\" />\n      } @else {\n        {{ initial() }}\n      }\n    </div>\n    <div class=\"store__info\">\n      <h3 class=\"store__name\">{{ store().name }}</h3>\n      <p class=\"store__type\">{{ store().businessType }}</p>\n\n      @if (store().isOwnerPreview) {\n        <!-- Modo preview (owner viendo borrador/revisi\u00F3n, super-admin revisando):\n             solo Ubicaci\u00F3n + Env\u00EDo. Rating + Distancia no aplican antes de aprobar. -->\n        <div class=\"store__meta store__meta--preview\">\n          <div class=\"store__stat\">\n            <span class=\"store__stat-label\">Ubicaci\u00F3n</span>\n            <span class=\"store__stat-value\">\n              <sui-icon name=\"map-pin-line\" [size]=\"13\" color=\"var(--brand-500, #fa7319)\"></sui-icon>\n              {{ store().district || '\u2014' }}\n            </span>\n          </div>\n          <div class=\"store__stat\">\n            <span class=\"store__stat-label\">Env\u00EDo</span>\n            <span class=\"store__stat-value\">{{ deliveryLabel() }}</span>\n          </div>\n        </div>\n      } @else {\n        <div class=\"store__meta\">\n          <button\n            type=\"button\"\n            class=\"store__stat store__stat--clickable\"\n            (click)=\"onRatingClick($event)\"\n            (touchstart)=\"$event.currentTarget\"\n            (touchend)=\"$any($event.currentTarget).blur()\"\n            [attr.aria-label]=\"'Ver calificaciones del local'\"\n          >\n            <span class=\"store__stat-label\">Calificaci\u00F3n</span>\n            <span class=\"store__stat-value\">\n              <sui-icon name=\"star-fill\" [size]=\"13\" color=\"var(--brand-500, #fa7319)\"></sui-icon>\n              {{ ratingLabel() }}\n            </span>\n          </button>\n          <div class=\"store__stat\">\n            <span class=\"store__stat-label\">Ubicaci\u00F3n</span>\n            <span class=\"store__stat-value\">\n              <sui-icon name=\"map-pin-line\" [size]=\"13\" color=\"var(--brand-500, #fa7319)\"></sui-icon>\n              {{ store().district || '\u2014' }}\n            </span>\n          </div>\n          <div class=\"store__stat\">\n            <span class=\"store__stat-label\">Env\u00EDo</span>\n            <span class=\"store__stat-value\">{{ deliveryLabel() }}</span>\n          </div>\n          <div class=\"store__stat\">\n            <span class=\"store__stat-label\">Distancia</span>\n            <span class=\"store__stat-value\">{{ distanceLabel() }}</span>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n</a>\n", styles: ["@charset \"UTF-8\";.mp-badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid transparent;line-height:1}.mp-badge--green{background:var(--admin-success-bg, #dcfce7);color:var(--admin-success, #16a34a)}.mp-badge--red{background:var(--admin-error-bg, #fee2e2);color:var(--admin-error, #ef4444)}.mp-badge--orange{background:#fff7ed;color:#c2410c;border-color:#fed7aa}.mp-badge--blue{background:var(--admin-info-bg, #dbeafe);color:#2563eb}.mp-badge--gray{background:var(--admin-bg-tertiary, #f3f4f6);color:var(--admin-text-tertiary, #6b7280)}.mp-badge--sm{height:20px;padding:0 8px;font-size:11px}.mp-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 12px;border-radius:6px;border:1px solid transparent;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s ease}.mp-action-btn:disabled{opacity:.5;cursor:not-allowed}.mp-action-btn--activate{background:var(--admin-success, #16a34a);color:#fff}.mp-action-btn--activate:hover{background:#15803d}.mp-action-btn--renew{background:var(--admin-info, #3b82f6);color:#fff}.mp-action-btn--renew:hover{background:#2563eb}.mp-action-btn--suspend{background:var(--admin-bg-primary, #fff);color:var(--admin-error, #ef4444);border-color:#fca5a5}.mp-action-btn--suspend:hover{background:var(--admin-error-bg, #fee2e2)}.mp-action-btn--danger{background:#dc2626;color:#fff;border:none}.mp-action-btn--danger:hover{background:#b91c1c}.mp-action-btn--outline{background:var(--admin-bg-primary, #fff);color:var(--admin-text-secondary, #374151);border-color:var(--admin-border-primary, #e5e7eb)}.mp-action-btn--outline:hover{background:var(--admin-bg-hover, #f9fafb)}.mp-action-btn--icon{width:28px;height:28px;padding:0;background:transparent;color:var(--admin-text-muted, #9ca3af);border:none}.mp-action-btn--icon:hover{background:var(--admin-bg-hover, #f9fafb);color:var(--admin-text-primary, #171717)}.mp-action-btn--icon-danger{width:28px;height:28px;padding:0;background:transparent;color:#dc2626;border:none}.mp-action-btn--icon-danger:hover{background:var(--admin-error-bg, #fee2e2);color:#dc2626}:host{display:block}.store{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}.store img{-webkit-user-drag:none;pointer-events:none}.store{display:block;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .2s ease,transform .2s ease;cursor:pointer}.store:active{transform:scale(.995);box-shadow:0 4px 14px #00000014}.store--suspended{cursor:not-allowed;opacity:.6}.store--closed .store__cover{filter:grayscale(1) brightness(.92);transition:filter .2s ease}.store--preview{cursor:default}.store--preview:active{transform:none;box-shadow:none}.store__cover{height:120px;position:relative;overflow:hidden;background:linear-gradient(135deg,#3a3a3a,#171717)}.store__cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s ease-out}.store__cover-img.sui-img-loaded{opacity:1}.store__cover-img[data-sui-img-dead]{display:none}.store__cover-grad{position:absolute;inset:0;background:linear-gradient(180deg,#0000 40%,#00000059);pointer-events:none}.store__fav{position:absolute;top:10px;left:10px;width:36px;height:36px;border-radius:999px;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1;transition:background .15s ease}.store__fav:active{background:#fff}.store__status{position:absolute;top:10px;right:10px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:inline-flex;align-items:center;gap:4px;z-index:1;letter-spacing:.01em}.store__status:before{content:\"\";width:6px;height:6px;border-radius:50%;background:var(--sui-state-success-base, #22c55e)}.store__status--open{color:var(--sui-state-success-base, #16a34a)}.store__status--open:before{background:var(--sui-state-success-base, #22c55e)}.store__status--closed{color:var(--sui-state-faded-base, #94a3b8)}.store__status--closed:before{background:var(--sui-state-faded-base, #94a3b8)}.store__status--suspended{color:var(--sui-state-error-base, #dc2626)}.store__status--suspended:before{background:var(--sui-state-error-base, #dc2626)}.store__status--draft{color:var(--sui-state-faded-base, #475569);background:#fffffff5}.store__status--draft:before{background:var(--sui-state-faded-base, #94a3b8)}.store__status--pending{color:#c2530b;background:#fffffff5}.store__status--pending:before{background:var(--sui-primary-base, #fa7319);animation:store-pulse 1.6s ease-in-out infinite}.store__status--rejected{color:var(--sui-state-error-base, #b91c1c);background:#fffffff5}.store__status--rejected:before{background:var(--sui-state-error-base, #dc2626)}@keyframes store-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.4)}}.store__body{padding:12px 14px 14px;display:flex;gap:12px;align-items:flex-start}.store__logo img[data-sui-img-dead]{display:none}.store__logo{width:48px;height:48px;border-radius:10px;background:var(--sui-bg-white-0, #fff);border:2px solid var(--sui-bg-white-0, #fff);box-shadow:0 1px 4px #0000001f;flex-shrink:0;margin-top:-32px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:var(--sui-primary-base, #fa7319);overflow:hidden;position:relative;z-index:2}.store__logo img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.store__info{flex:1;min-width:0}.store__name{font-size:20px;line-height:26px;font-weight:700;color:var(--sui-text-strong-950, #171717);margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.store__type{font-size:14px;line-height:20px;font-weight:500;color:var(--sui-text-sub-600, #5c5c5c);margin:0 0 8px}.store__meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb)}.store__meta--preview{justify-content:flex-start;gap:32px}.store__stat{display:flex;flex-direction:column;gap:2px;min-width:0}.store__stat--clickable{background:transparent;border:none;padding:4px 6px;margin:-4px -6px;border-radius:8px;cursor:pointer;text-align:left;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;transition:background-color .15s}.store__stat--clickable:hover{background:var(--sui-bg-weak-50, #f5f7fa)}.store__stat--clickable:active{background:var(--sui-bg-soft-200, #ebeef2)}.store__stat-label{font-size:10px;color:var(--sui-text-soft-400, #a3a3a3);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.store__stat-value{font-size:13px;font-weight:700;color:var(--sui-text-strong-950, #171717);display:inline-flex;align-items:center;gap:3px;white-space:nowrap}.store__stat-value svg{color:var(--sui-primary-base, #fa7319);flex-shrink:0}\n"] }]
+            args: [{ selector: 'sui-store-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLink, SuiIcon, SuiImgRetry], template: "<a class=\"store\"\n   [class.store--suspended]=\"store().isSuspended\"\n   [class.store--closed]=\"!store().isOpen && !store().isSuspended && !store().isOwnerPreview\"\n   [class.store--preview]=\"store().isOwnerPreview\"\n   [routerLink]=\"link()\"\n   (click)=\"onCardClick($event)\">\n\n  <div class=\"store__cover\"\n       [class.store__cover--fallback]=\"!store().coverUrl\">\n    <!-- <img> real (no background CSS): permite retry nativo via suiImgRetry\n         cuando un load falla (red flaky) + fade-in al cargar. El fallback\n         oscuro queda debajo como placeholder hasta que la imagen aparece. -->\n    @if (store().coverUrl) {\n      <img class=\"store__cover-img\"\n           suiImgRetry\n           [src]=\"store().coverUrl\"\n           alt=\"\"\n           loading=\"lazy\"\n           decoding=\"async\" />\n    }\n    <div class=\"store__cover-grad\"></div>\n\n    @if (!store().isOwnerPreview) {\n      <button type=\"button\"\n              class=\"store__fav\"\n              [class.store__fav--active]=\"isFavorite()\"\n              (click)=\"onFavClick($event)\"\n              aria-label=\"Favorito\">\n        <sui-icon\n          [name]=\"isFavorite() ? 'heart-fill' : 'heart-line'\"\n          [size]=\"18\"\n          color=\"#fa7319\"\n        ></sui-icon>\n      </button>\n    }\n\n    @if (store().isSuspended) {\n      <span class=\"store__status store__status--suspended\">No disponible</span>\n    } @else if (previewBadge(); as pb) {\n      <span class=\"store__status\"\n            [class.store__status--draft]=\"pb.variant === 'draft'\"\n            [class.store__status--pending]=\"pb.variant === 'pending'\"\n            [class.store__status--rejected]=\"pb.variant === 'rejected'\">\n        {{ pb.label }}\n      </span>\n    } @else {\n      <span class=\"store__status\"\n            [class.store__status--open]=\"store().isOpen\"\n            [class.store__status--closed]=\"!store().isOpen\">\n        {{ store().isOpen ? 'Abierto' : 'Cerrado' }}\n      </span>\n    }\n  </div>\n\n  <div class=\"store__body\">\n    <div class=\"store__logo\">\n      @if (store().logoUrl) {\n        <!-- suiImgRetry reintenta loads fallidos; si muere definitivo, el\n             atributo data-sui-img-dead lo oculta via CSS (queda el fondo). -->\n        <img suiImgRetry [src]=\"store().logoUrl\" [alt]=\"store().name\" />\n      } @else {\n        {{ initial() }}\n      }\n    </div>\n    <div class=\"store__info\">\n      <h3 class=\"store__name\">{{ store().name }}</h3>\n      <p class=\"store__type\">{{ store().businessType }}</p>\n    </div>\n\n    <!-- Meta a ANCHO COMPLETO de la card (hijo directo del body con wrap):\n         antes viv\u00EDa dentro de store__info y heredaba el sangrado del logo\n         (60px muertos a la izquierda). -->\n    @if (store().isOwnerPreview) {\n        <!-- Modo preview (owner viendo borrador/revisi\u00F3n, super-admin revisando):\n             solo Ubicaci\u00F3n + Env\u00EDo. Rating + Distancia no aplican antes de aprobar. -->\n        <div class=\"store__meta store__meta--preview\">\n          <div class=\"store__stat\">\n            <span class=\"store__stat-label\">Ubicaci\u00F3n</span>\n            <span class=\"store__stat-value\">\n              <sui-icon name=\"map-pin-line\" [size]=\"13\" color=\"var(--brand-500, #fa7319)\"></sui-icon>\n              {{ store().district || '\u2014' }}\n            </span>\n          </div>\n          <div class=\"store__stat\">\n            <span class=\"store__stat-label\">Env\u00EDo</span>\n            <span class=\"store__stat-value\">{{ deliveryLabel() }}</span>\n          </div>\n        </div>\n      } @else {\n        <div class=\"store__meta\">\n          <button\n            type=\"button\"\n            class=\"store__stat store__stat--clickable\"\n            (click)=\"onRatingClick($event)\"\n            (touchstart)=\"$event.currentTarget\"\n            (touchend)=\"$any($event.currentTarget).blur()\"\n            [attr.aria-label]=\"'Ver calificaciones del local'\"\n          >\n            <span class=\"store__stat-label\">Calificaci\u00F3n</span>\n            <span class=\"store__stat-value\">\n              <sui-icon name=\"star-fill\" [size]=\"13\" color=\"var(--brand-500, #fa7319)\"></sui-icon>\n              {{ ratingLabel() }}\n            </span>\n          </button>\n          <div class=\"store__stat\">\n            <span class=\"store__stat-label\">Ubicaci\u00F3n</span>\n            <span class=\"store__stat-value\">\n              <sui-icon name=\"map-pin-line\" [size]=\"13\" color=\"var(--brand-500, #fa7319)\"></sui-icon>\n              {{ store().district || '\u2014' }}\n            </span>\n          </div>\n          <div class=\"store__stat\">\n            <span class=\"store__stat-label\">Env\u00EDo</span>\n            <span class=\"store__stat-value\">{{ deliveryLabel() }}</span>\n          </div>\n          <div class=\"store__stat\">\n            <span class=\"store__stat-label\">Distancia</span>\n            <span class=\"store__stat-value\">{{ distanceLabel() }}</span>\n          </div>\n        </div>\n      }\n  </div>\n</a>\n", styles: ["@charset \"UTF-8\";.mp-badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid transparent;line-height:1}.mp-badge--green{background:var(--admin-success-bg, #dcfce7);color:var(--admin-success, #16a34a)}.mp-badge--red{background:var(--admin-error-bg, #fee2e2);color:var(--admin-error, #ef4444)}.mp-badge--orange{background:#fff7ed;color:#c2410c;border-color:#fed7aa}.mp-badge--blue{background:var(--admin-info-bg, #dbeafe);color:#2563eb}.mp-badge--gray{background:var(--admin-bg-tertiary, #f3f4f6);color:var(--admin-text-tertiary, #6b7280)}.mp-badge--sm{height:20px;padding:0 8px;font-size:11px}.mp-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 12px;border-radius:6px;border:1px solid transparent;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s ease}.mp-action-btn:disabled{opacity:.5;cursor:not-allowed}.mp-action-btn--activate{background:var(--admin-success, #16a34a);color:#fff}.mp-action-btn--activate:hover{background:#15803d}.mp-action-btn--renew{background:var(--admin-info, #3b82f6);color:#fff}.mp-action-btn--renew:hover{background:#2563eb}.mp-action-btn--suspend{background:var(--admin-bg-primary, #fff);color:var(--admin-error, #ef4444);border-color:#fca5a5}.mp-action-btn--suspend:hover{background:var(--admin-error-bg, #fee2e2)}.mp-action-btn--danger{background:#dc2626;color:#fff;border:none}.mp-action-btn--danger:hover{background:#b91c1c}.mp-action-btn--outline{background:var(--admin-bg-primary, #fff);color:var(--admin-text-secondary, #374151);border-color:var(--admin-border-primary, #e5e7eb)}.mp-action-btn--outline:hover{background:var(--admin-bg-hover, #f9fafb)}.mp-action-btn--icon{width:28px;height:28px;padding:0;background:transparent;color:var(--admin-text-muted, #9ca3af);border:none}.mp-action-btn--icon:hover{background:var(--admin-bg-hover, #f9fafb);color:var(--admin-text-primary, #171717)}.mp-action-btn--icon-danger{width:28px;height:28px;padding:0;background:transparent;color:#dc2626;border:none}.mp-action-btn--icon-danger:hover{background:var(--admin-error-bg, #fee2e2);color:#dc2626}:host{display:block}.store{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}.store img{-webkit-user-drag:none;pointer-events:none}.store{display:block;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .2s ease,transform .2s ease;cursor:pointer}.store:active{transform:scale(.995);box-shadow:0 4px 14px #00000014}.store--suspended{cursor:not-allowed;opacity:.6}.store--closed .store__cover{filter:grayscale(1) brightness(.92);transition:filter .2s ease}.store--preview{cursor:default}.store--preview:active{transform:none;box-shadow:none}.store__cover{height:120px;position:relative;overflow:hidden;background:linear-gradient(135deg,#3a3a3a,#171717)}.store__cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s ease-out}.store__cover-img.sui-img-loaded{opacity:1}.store__cover-img[data-sui-img-dead]{display:none}.store__cover-grad{position:absolute;inset:0;background:linear-gradient(180deg,#0000 40%,#00000059);pointer-events:none}.store__fav{position:absolute;top:10px;left:10px;width:36px;height:36px;border-radius:999px;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1;transition:background .15s ease}.store__fav:active{background:#fff}.store__status{position:absolute;top:10px;right:10px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:inline-flex;align-items:center;gap:4px;z-index:1;letter-spacing:.01em}.store__status:before{content:\"\";width:6px;height:6px;border-radius:50%;background:var(--sui-state-success-base, #22c55e)}.store__status--open{color:var(--sui-state-success-base, #16a34a)}.store__status--open:before{background:var(--sui-state-success-base, #22c55e)}.store__status--closed{color:var(--sui-state-faded-base, #94a3b8)}.store__status--closed:before{background:var(--sui-state-faded-base, #94a3b8)}.store__status--suspended{color:var(--sui-state-error-base, #dc2626)}.store__status--suspended:before{background:var(--sui-state-error-base, #dc2626)}.store__status--draft{color:var(--sui-state-faded-base, #475569);background:#fffffff5}.store__status--draft:before{background:var(--sui-state-faded-base, #94a3b8)}.store__status--pending{color:#c2530b;background:#fffffff5}.store__status--pending:before{background:var(--sui-primary-base, #fa7319);animation:store-pulse 1.6s ease-in-out infinite}.store__status--rejected{color:var(--sui-state-error-base, #b91c1c);background:#fffffff5}.store__status--rejected:before{background:var(--sui-state-error-base, #dc2626)}@keyframes store-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.4)}}.store__body{padding:12px 14px 14px;display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}.store__logo img[data-sui-img-dead]{display:none}.store__logo{width:48px;height:48px;border-radius:10px;background:var(--sui-bg-white-0, #fff);border:2px solid var(--sui-bg-white-0, #fff);box-shadow:0 1px 4px #0000001f;flex-shrink:0;margin-top:-32px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:var(--sui-primary-base, #fa7319);overflow:hidden;position:relative;z-index:2}.store__logo img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.store__info{flex:1;min-width:0}.store__name{font-size:20px;line-height:26px;font-weight:700;color:var(--sui-text-strong-950, #171717);margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.store__type{font-size:14px;line-height:20px;font-weight:500;color:var(--sui-text-sub-600, #5c5c5c);margin:0 0 8px}.store__meta{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:2px;padding-top:14px;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb)}.store__meta--preview{justify-content:flex-start;gap:32px}.store__stat{display:flex;flex-direction:column;gap:2px;min-width:0}.store__stat--clickable{background:transparent;border:none;padding:4px 6px;margin:-4px -6px;border-radius:8px;cursor:pointer;text-align:left;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;transition:background-color .15s}.store__stat--clickable:hover{background:var(--sui-bg-weak-50, #f5f7fa)}.store__stat--clickable:active{background:var(--sui-bg-soft-200, #ebeef2)}.store__stat-label{font-size:10px;color:var(--sui-text-soft-400, #a3a3a3);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.store__stat-value{font-size:13px;font-weight:700;color:var(--sui-text-strong-950, #171717);display:inline-flex;align-items:center;gap:3px;white-space:nowrap}.store__stat-value svg{color:var(--sui-primary-base, #fa7319);flex-shrink:0}\n"] }]
         }], propDecorators: { store: [{ type: i0.Input, args: [{ isSignal: true, alias: "store", required: true }] }], isFavorite: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFavorite", required: false }] }], disableLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableLink", required: false }] }], toggleFavorite: [{ type: i0.Output, args: ["toggleFavorite"] }], ratingClicked: [{ type: i0.Output, args: ["ratingClicked"] }] } });
 
 /**
@@ -16336,7 +16340,7 @@ class SuiTagInput {
                 useExisting: forwardRef(() => SuiTagInput),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true }], ngImport: i0, template: "<!-- Label (Figma \"Label [1.1]\" arriba del field) \u2014 delegado a sui-form-label. -->\n@if (label()) {\n  <sui-form-label\n    [label]=\"label()!\"\n    [sublabel]=\"sublabel()\"\n    [required]=\"required()\"\n    [tooltip]=\"tooltip()\"\n    [size]=\"size()\"\n    class=\"sui-tag-input__label-host\"\n  />\n}\n\n<!-- Input box \"Basic\" \u2014 texto libre. Click en cualquier zona enfoca el input. -->\n<div\n  class=\"sui-tag-input__field\"\n  [class.sui-tag-input__field--error]=\"error()\"\n  [class.sui-tag-input__field--disabled]=\"isDisabled()\"\n  (mousedown)=\"onFieldPointerDown($event)\"\n>\n  <input\n    #inputEl\n    class=\"sui-tag-input__control\"\n    type=\"text\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [value]=\"draft()\"\n    autocomplete=\"off\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onKeydown($event)\"\n    (blur)=\"onBlur()\"\n  />\n\n  <!-- Trailing icon (Figma rightIcon / pickRight, node 428:4819) \u2014 20\u00D720 info-custom-fill\n       (rightIcon=true), un icono custom (rightIcon=\"nombre\"), o el contenido que\n       proyecte el consumer en [slot=right]. -->\n  @if (rightIconCfg(); as rightIconName) {\n    <span class=\"sui-tag-input__right\">\n      <ng-content select=\"[slot=right]\">\n        <sui-icon [name]=\"rightIconName\" [size]=\"20\" />\n      </ng-content>\n    </span>\n  }\n</div>\n\n<!-- Tags row (Figma frame \"Tags\") \u2014 fila aparte debajo del input, pt=4 gap=8, wrap. -->\n@if (hasTags()) {\n  <div class=\"sui-tag-input__tags\" role=\"list\">\n    @for (tag of value(); track $index) {\n      <sui-tag\n        role=\"listitem\"\n        tagStyle=\"stroke\"\n        [dismissible]=\"true\"\n        [disabled]=\"isDisabled()\"\n        [dismissLabel]=\"'Quitar ' + tag\"\n        (dismiss)=\"removeAt($index)\"\n      >\n        {{ tag }}\n      </sui-tag>\n    }\n  </div>\n}\n\n<!-- Hint / error message \u2014 delegado a sui-form-hint.\n     El hint neutral muestra el icono 16\u00D716 `information-fill` (Figma node\n     I428:4900;266:5272); el error conserva su icono default (error-warning-line). -->\n@if (error() ? errorMessage() : hint()) {\n  <sui-form-hint\n    [message]=\"error() ? errorMessage() : hint()\"\n    [variant]=\"error() ? 'error' : 'neutral'\"\n    [icon]=\"error() ? undefined : 'information-fill'\"\n    [size]=\"size()\"\n    class=\"sui-tag-input__hint-host\"\n  />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-tag-input__label-host{display:block;margin-bottom:4px}.sui-tag-input__field{display:flex;align-items:center;width:100%;box-sizing:border-box;overflow:hidden;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);cursor:text;transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=xsmall]) .sui-tag-input__field{gap:6px;padding:6px 6px 6px 10px;border-radius:var(--sui-radius-8);min-height:32px}:host([data-sui-size=small]) .sui-tag-input__field{gap:8px;padding:8px 8px 8px 10px;border-radius:var(--sui-radius-8);min-height:36px}:host([data-sui-size=medium]) .sui-tag-input__field,:host(:not([data-sui-size])) .sui-tag-input__field{gap:8px;padding:10px 10px 10px 12px;border-radius:var(--sui-radius-10);min-height:40px}.sui-tag-input__control{flex:1 0 0;min-width:0;width:100%;margin:0;padding:0;border:0;outline:0;background:transparent;color:var(--sui-text-strong-950);font-family:inherit;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-tag-input__control::placeholder{color:var(--sui-text-soft-400);opacity:1}.sui-tag-input__right{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-soft-400);pointer-events:none}:host([data-sui-disabled]) .sui-tag-input__right{color:var(--sui-icon-disabled-300)}:host(:not([data-sui-disabled]):not([data-sui-error])) .sui-tag-input__field:hover{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}:host(:not([data-sui-disabled]):not([data-sui-error])) .sui-tag-input__field:hover .sui-tag-input__control::placeholder{color:var(--sui-text-sub-600)}:host(:not([data-sui-disabled]):not([data-sui-error])) .sui-tag-input__field:focus-within{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}:host([data-sui-error]) .sui-tag-input__field,.sui-tag-input__field--error{border-color:var(--sui-state-error-base)}:host([data-sui-error]) .sui-tag-input__field:focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-16)}:host([data-sui-disabled]) .sui-tag-input__field,.sui-tag-input__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed}:host([data-sui-disabled]) .sui-tag-input__control{color:var(--sui-text-disabled-300);cursor:not-allowed}:host([data-sui-disabled]) .sui-tag-input__control::placeholder{color:var(--sui-text-disabled-300)}.sui-tag-input__tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:4px;width:100%}.sui-tag-input__hint-host{display:block;margin-top:4px}\n"], dependencies: [{ kind: "component", type: SuiTag, selector: "sui-tag", inputs: ["tagStyle", "leading", "sublabel", "dismissible", "interactive", "disabled", "dismissLabel"], outputs: ["dismiss"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiFormLabel, selector: "sui-form-label", inputs: ["label", "sublabel", "required", "tooltip", "link", "size", "disabled", "for"], outputs: ["linkClick"] }, { kind: "component", type: SuiFormHint, selector: "sui-form-hint", inputs: ["message", "variant", "icon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true }], ngImport: i0, template: "<!-- Label (Figma \"Label [1.1]\" arriba del field) \u2014 delegado a sui-form-label. -->\n@if (label()) {\n  <sui-form-label\n    [label]=\"label()!\"\n    [sublabel]=\"sublabel()\"\n    [required]=\"required()\"\n    [tooltip]=\"tooltip()\"\n    [size]=\"size()\"\n    class=\"sui-tag-input__label-host\"\n  />\n}\n\n<!-- Input box \"Basic\" \u2014 texto libre. Click en cualquier zona enfoca el input. -->\n<div\n  class=\"sui-tag-input__field\"\n  [class.sui-tag-input__field--error]=\"error()\"\n  [class.sui-tag-input__field--disabled]=\"isDisabled()\"\n  (mousedown)=\"onFieldPointerDown($event)\"\n>\n  <input\n    #inputEl\n    class=\"sui-tag-input__control\"\n    type=\"text\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [value]=\"draft()\"\n    autocomplete=\"off\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onKeydown($event)\"\n    (blur)=\"onBlur()\"\n  />\n\n  <!-- Trailing icon (Figma rightIcon / pickRight, node 428:4819) \u2014 20\u00D720 info-custom-fill\n       (rightIcon=true), un icono custom (rightIcon=\"nombre\"), o el contenido que\n       proyecte el consumer en [slot=right]. -->\n  @if (rightIconCfg(); as rightIconName) {\n    <span class=\"sui-tag-input__right\">\n      <ng-content select=\"[slot=right]\">\n        <sui-icon [name]=\"rightIconName\" [size]=\"20\" />\n      </ng-content>\n    </span>\n  }\n</div>\n\n<!-- Tags row (Figma frame \"Tags\") \u2014 fila aparte debajo del input, pt=4 gap=8, wrap. -->\n@if (hasTags()) {\n  <div class=\"sui-tag-input__tags\" role=\"list\">\n    @for (tag of value(); track $index) {\n      <sui-tag\n        role=\"listitem\"\n        tagStyle=\"stroke\"\n        [dismissible]=\"true\"\n        [disabled]=\"isDisabled()\"\n        [dismissLabel]=\"'Quitar ' + tag\"\n        (dismiss)=\"removeAt($index)\"\n      >\n        {{ tag }}\n      </sui-tag>\n    }\n  </div>\n}\n\n<!-- Hint / error message \u2014 delegado a sui-form-hint.\n     El hint neutral muestra el icono 16\u00D716 `information-fill` (Figma node\n     I428:4900;266:5272); el error conserva su icono default (error-warning-line). -->\n@if (error() ? errorMessage() : hint()) {\n  <sui-form-hint\n    [message]=\"error() ? errorMessage() : hint()\"\n    [variant]=\"error() ? 'error' : 'neutral'\"\n    [icon]=\"error() ? undefined : 'information-fill'\"\n    class=\"sui-tag-input__hint-host\"\n  />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-tag-input__label-host{display:block;margin-bottom:4px}.sui-tag-input__field{display:flex;align-items:center;width:100%;box-sizing:border-box;overflow:hidden;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);cursor:text;transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=xsmall]) .sui-tag-input__field{gap:6px;padding:6px 6px 6px 10px;border-radius:var(--sui-radius-8);min-height:32px}:host([data-sui-size=small]) .sui-tag-input__field{gap:8px;padding:8px 8px 8px 10px;border-radius:var(--sui-radius-8);min-height:36px}:host([data-sui-size=medium]) .sui-tag-input__field,:host(:not([data-sui-size])) .sui-tag-input__field{gap:8px;padding:10px 10px 10px 12px;border-radius:var(--sui-radius-10);min-height:40px}.sui-tag-input__control{flex:1 0 0;min-width:0;width:100%;margin:0;padding:0;border:0;outline:0;background:transparent;color:var(--sui-text-strong-950);font-family:inherit;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-tag-input__control::placeholder{color:var(--sui-text-soft-400);opacity:1}.sui-tag-input__right{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-soft-400);pointer-events:none}:host([data-sui-disabled]) .sui-tag-input__right{color:var(--sui-icon-disabled-300)}:host(:not([data-sui-disabled]):not([data-sui-error])) .sui-tag-input__field:hover{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}:host(:not([data-sui-disabled]):not([data-sui-error])) .sui-tag-input__field:hover .sui-tag-input__control::placeholder{color:var(--sui-text-sub-600)}:host(:not([data-sui-disabled]):not([data-sui-error])) .sui-tag-input__field:focus-within{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}:host([data-sui-error]) .sui-tag-input__field,.sui-tag-input__field--error{border-color:var(--sui-state-error-base)}:host([data-sui-error]) .sui-tag-input__field:focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-16)}:host([data-sui-disabled]) .sui-tag-input__field,.sui-tag-input__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed}:host([data-sui-disabled]) .sui-tag-input__control{color:var(--sui-text-disabled-300);cursor:not-allowed}:host([data-sui-disabled]) .sui-tag-input__control::placeholder{color:var(--sui-text-disabled-300)}.sui-tag-input__tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:4px;width:100%}.sui-tag-input__hint-host{display:block;margin-top:4px}\n"], dependencies: [{ kind: "component", type: SuiTag, selector: "sui-tag", inputs: ["tagStyle", "leading", "sublabel", "dismissible", "interactive", "disabled", "dismissLabel"], outputs: ["dismiss"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiFormLabel, selector: "sui-form-label", inputs: ["label", "sublabel", "required", "tooltip", "link", "size", "disabled", "for"], outputs: ["linkClick"] }, { kind: "component", type: SuiFormHint, selector: "sui-form-hint", inputs: ["message", "variant", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTagInput, decorators: [{
             type: Component,
@@ -16352,7 +16356,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[attr.data-sui-size]': 'size()',
                         '[attr.data-sui-error]': 'error() ? "" : null',
                         '[attr.data-sui-disabled]': 'isDisabled() ? "" : null',
-                    }, template: "<!-- Label (Figma \"Label [1.1]\" arriba del field) \u2014 delegado a sui-form-label. -->\n@if (label()) {\n  <sui-form-label\n    [label]=\"label()!\"\n    [sublabel]=\"sublabel()\"\n    [required]=\"required()\"\n    [tooltip]=\"tooltip()\"\n    [size]=\"size()\"\n    class=\"sui-tag-input__label-host\"\n  />\n}\n\n<!-- Input box \"Basic\" \u2014 texto libre. Click en cualquier zona enfoca el input. -->\n<div\n  class=\"sui-tag-input__field\"\n  [class.sui-tag-input__field--error]=\"error()\"\n  [class.sui-tag-input__field--disabled]=\"isDisabled()\"\n  (mousedown)=\"onFieldPointerDown($event)\"\n>\n  <input\n    #inputEl\n    class=\"sui-tag-input__control\"\n    type=\"text\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [value]=\"draft()\"\n    autocomplete=\"off\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onKeydown($event)\"\n    (blur)=\"onBlur()\"\n  />\n\n  <!-- Trailing icon (Figma rightIcon / pickRight, node 428:4819) \u2014 20\u00D720 info-custom-fill\n       (rightIcon=true), un icono custom (rightIcon=\"nombre\"), o el contenido que\n       proyecte el consumer en [slot=right]. -->\n  @if (rightIconCfg(); as rightIconName) {\n    <span class=\"sui-tag-input__right\">\n      <ng-content select=\"[slot=right]\">\n        <sui-icon [name]=\"rightIconName\" [size]=\"20\" />\n      </ng-content>\n    </span>\n  }\n</div>\n\n<!-- Tags row (Figma frame \"Tags\") \u2014 fila aparte debajo del input, pt=4 gap=8, wrap. -->\n@if (hasTags()) {\n  <div class=\"sui-tag-input__tags\" role=\"list\">\n    @for (tag of value(); track $index) {\n      <sui-tag\n        role=\"listitem\"\n        tagStyle=\"stroke\"\n        [dismissible]=\"true\"\n        [disabled]=\"isDisabled()\"\n        [dismissLabel]=\"'Quitar ' + tag\"\n        (dismiss)=\"removeAt($index)\"\n      >\n        {{ tag }}\n      </sui-tag>\n    }\n  </div>\n}\n\n<!-- Hint / error message \u2014 delegado a sui-form-hint.\n     El hint neutral muestra el icono 16\u00D716 `information-fill` (Figma node\n     I428:4900;266:5272); el error conserva su icono default (error-warning-line). -->\n@if (error() ? errorMessage() : hint()) {\n  <sui-form-hint\n    [message]=\"error() ? errorMessage() : hint()\"\n    [variant]=\"error() ? 'error' : 'neutral'\"\n    [icon]=\"error() ? undefined : 'information-fill'\"\n    [size]=\"size()\"\n    class=\"sui-tag-input__hint-host\"\n  />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-tag-input__label-host{display:block;margin-bottom:4px}.sui-tag-input__field{display:flex;align-items:center;width:100%;box-sizing:border-box;overflow:hidden;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);cursor:text;transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=xsmall]) .sui-tag-input__field{gap:6px;padding:6px 6px 6px 10px;border-radius:var(--sui-radius-8);min-height:32px}:host([data-sui-size=small]) .sui-tag-input__field{gap:8px;padding:8px 8px 8px 10px;border-radius:var(--sui-radius-8);min-height:36px}:host([data-sui-size=medium]) .sui-tag-input__field,:host(:not([data-sui-size])) .sui-tag-input__field{gap:8px;padding:10px 10px 10px 12px;border-radius:var(--sui-radius-10);min-height:40px}.sui-tag-input__control{flex:1 0 0;min-width:0;width:100%;margin:0;padding:0;border:0;outline:0;background:transparent;color:var(--sui-text-strong-950);font-family:inherit;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-tag-input__control::placeholder{color:var(--sui-text-soft-400);opacity:1}.sui-tag-input__right{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-soft-400);pointer-events:none}:host([data-sui-disabled]) .sui-tag-input__right{color:var(--sui-icon-disabled-300)}:host(:not([data-sui-disabled]):not([data-sui-error])) .sui-tag-input__field:hover{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}:host(:not([data-sui-disabled]):not([data-sui-error])) .sui-tag-input__field:hover .sui-tag-input__control::placeholder{color:var(--sui-text-sub-600)}:host(:not([data-sui-disabled]):not([data-sui-error])) .sui-tag-input__field:focus-within{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}:host([data-sui-error]) .sui-tag-input__field,.sui-tag-input__field--error{border-color:var(--sui-state-error-base)}:host([data-sui-error]) .sui-tag-input__field:focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-16)}:host([data-sui-disabled]) .sui-tag-input__field,.sui-tag-input__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed}:host([data-sui-disabled]) .sui-tag-input__control{color:var(--sui-text-disabled-300);cursor:not-allowed}:host([data-sui-disabled]) .sui-tag-input__control::placeholder{color:var(--sui-text-disabled-300)}.sui-tag-input__tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:4px;width:100%}.sui-tag-input__hint-host{display:block;margin-top:4px}\n"] }]
+                    }, template: "<!-- Label (Figma \"Label [1.1]\" arriba del field) \u2014 delegado a sui-form-label. -->\n@if (label()) {\n  <sui-form-label\n    [label]=\"label()!\"\n    [sublabel]=\"sublabel()\"\n    [required]=\"required()\"\n    [tooltip]=\"tooltip()\"\n    [size]=\"size()\"\n    class=\"sui-tag-input__label-host\"\n  />\n}\n\n<!-- Input box \"Basic\" \u2014 texto libre. Click en cualquier zona enfoca el input. -->\n<div\n  class=\"sui-tag-input__field\"\n  [class.sui-tag-input__field--error]=\"error()\"\n  [class.sui-tag-input__field--disabled]=\"isDisabled()\"\n  (mousedown)=\"onFieldPointerDown($event)\"\n>\n  <input\n    #inputEl\n    class=\"sui-tag-input__control\"\n    type=\"text\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [value]=\"draft()\"\n    autocomplete=\"off\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onKeydown($event)\"\n    (blur)=\"onBlur()\"\n  />\n\n  <!-- Trailing icon (Figma rightIcon / pickRight, node 428:4819) \u2014 20\u00D720 info-custom-fill\n       (rightIcon=true), un icono custom (rightIcon=\"nombre\"), o el contenido que\n       proyecte el consumer en [slot=right]. -->\n  @if (rightIconCfg(); as rightIconName) {\n    <span class=\"sui-tag-input__right\">\n      <ng-content select=\"[slot=right]\">\n        <sui-icon [name]=\"rightIconName\" [size]=\"20\" />\n      </ng-content>\n    </span>\n  }\n</div>\n\n<!-- Tags row (Figma frame \"Tags\") \u2014 fila aparte debajo del input, pt=4 gap=8, wrap. -->\n@if (hasTags()) {\n  <div class=\"sui-tag-input__tags\" role=\"list\">\n    @for (tag of value(); track $index) {\n      <sui-tag\n        role=\"listitem\"\n        tagStyle=\"stroke\"\n        [dismissible]=\"true\"\n        [disabled]=\"isDisabled()\"\n        [dismissLabel]=\"'Quitar ' + tag\"\n        (dismiss)=\"removeAt($index)\"\n      >\n        {{ tag }}\n      </sui-tag>\n    }\n  </div>\n}\n\n<!-- Hint / error message \u2014 delegado a sui-form-hint.\n     El hint neutral muestra el icono 16\u00D716 `information-fill` (Figma node\n     I428:4900;266:5272); el error conserva su icono default (error-warning-line). -->\n@if (error() ? errorMessage() : hint()) {\n  <sui-form-hint\n    [message]=\"error() ? errorMessage() : hint()\"\n    [variant]=\"error() ? 'error' : 'neutral'\"\n    [icon]=\"error() ? undefined : 'information-fill'\"\n    class=\"sui-tag-input__hint-host\"\n  />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-tag-input__label-host{display:block;margin-bottom:4px}.sui-tag-input__field{display:flex;align-items:center;width:100%;box-sizing:border-box;overflow:hidden;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);cursor:text;transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=xsmall]) .sui-tag-input__field{gap:6px;padding:6px 6px 6px 10px;border-radius:var(--sui-radius-8);min-height:32px}:host([data-sui-size=small]) .sui-tag-input__field{gap:8px;padding:8px 8px 8px 10px;border-radius:var(--sui-radius-8);min-height:36px}:host([data-sui-size=medium]) .sui-tag-input__field,:host(:not([data-sui-size])) .sui-tag-input__field{gap:8px;padding:10px 10px 10px 12px;border-radius:var(--sui-radius-10);min-height:40px}.sui-tag-input__control{flex:1 0 0;min-width:0;width:100%;margin:0;padding:0;border:0;outline:0;background:transparent;color:var(--sui-text-strong-950);font-family:inherit;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-tag-input__control::placeholder{color:var(--sui-text-soft-400);opacity:1}.sui-tag-input__right{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-soft-400);pointer-events:none}:host([data-sui-disabled]) .sui-tag-input__right{color:var(--sui-icon-disabled-300)}:host(:not([data-sui-disabled]):not([data-sui-error])) .sui-tag-input__field:hover{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}:host(:not([data-sui-disabled]):not([data-sui-error])) .sui-tag-input__field:hover .sui-tag-input__control::placeholder{color:var(--sui-text-sub-600)}:host(:not([data-sui-disabled]):not([data-sui-error])) .sui-tag-input__field:focus-within{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}:host([data-sui-error]) .sui-tag-input__field,.sui-tag-input__field--error{border-color:var(--sui-state-error-base)}:host([data-sui-error]) .sui-tag-input__field:focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-16)}:host([data-sui-disabled]) .sui-tag-input__field,.sui-tag-input__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed}:host([data-sui-disabled]) .sui-tag-input__control{color:var(--sui-text-disabled-300);cursor:not-allowed}:host([data-sui-disabled]) .sui-tag-input__control::placeholder{color:var(--sui-text-disabled-300)}.sui-tag-input__tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:4px;width:100%}.sui-tag-input__hint-host{display:block;margin-top:4px}\n"] }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], rightIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightIcon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], commaSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "commaSeparator", required: false }] }], allowDuplicates: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDuplicates", required: false }] }], maxTags: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTags", required: false }] }], addOnBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "addOnBlur", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], tagAdded: [{ type: i0.Output, args: ["tagAdded"] }], tagRemoved: [{ type: i0.Output, args: ["tagRemoved"] }], inputEl: [{
                 type: ViewChild,
                 args: ['inputEl']
@@ -16538,7 +16542,7 @@ class SuiTextarea {
                 useExisting: forwardRef(() => SuiTextarea),
                 multi: true,
             },
-        ], ngImport: i0, template: "@if (label()) {\n  <sui-form-label\n    [label]=\"label()!\"\n    [sublabel]=\"sublabel()\"\n    [required]=\"required()\"\n    [tooltip]=\"tooltip()\"\n    size=\"medium\"\n    class=\"sui-textarea__label-host\"\n  />\n}\n\n<div\n  class=\"sui-textarea__field\"\n  [class.sui-textarea__field--error]=\"error()\"\n  [class.sui-textarea__field--disabled]=\"isDisabled()\"\n  [class.sui-textarea__field--readonly]=\"readonly()\"\n>\n  <textarea\n    class=\"sui-textarea__control\"\n    [rows]=\"rows()\"\n    [value]=\"value()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [readOnly]=\"readonly()\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [attr.maxlength]=\"maxLength() && maxLength()! > 0 ? maxLength() : null\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n  ></textarea>\n\n  @if (showCounter() || resizable()) {\n    <!-- Character Counter row [1.1] \u2014 Figma 435:5712.\n         In Figma the \"<n>/<max>\" text and the resize handle live together in a\n         single bottom row (flex, gap 6px, justify-end). The text only renders\n         when [maxLength] is set; the handle renders whenever the textarea is\n         resizable \u2014 independent of maxLength (matches Figma, where every state\n         shows the handle in the bottom-right corner while resizable). -->\n    <div class=\"sui-textarea__counter\" aria-hidden=\"true\">\n      @if (showCounter()) {\n        <span class=\"sui-textarea__counter-text\">{{ counterText() }}</span>\n      }\n      @if (resizable()) {\n        <!-- Resize handle \u2014 Figma 435:5715 (12\u00D712, currentColor).\n             Two diagonal strokes \u2014 SUI v1.2 oficial (doc /ui/textarea + Figma\n             435:5715, mismo path en Default/Error/Disabled, solo cambia el stroke\n             color). El \"M ... M ...\" son las 2 diagonales. -->\n        <svg\n          class=\"sui-textarea__resize-icon\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 12 12\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M9.11111 2L2 9.11111M10 6.44444L6.44444 10\"\n            stroke=\"currentColor\"\n            stroke-width=\"1\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      }\n    </div>\n  }\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n  <!-- Hint Text [1.1] \u2014 Figma 435:5731 (neutral) / 435:7200 (error).\n       Ambos estados usan `information-fill` 16\u00D716 como \u00EDcono del hint\n       (nodos I435:5731;266:5272 y I435:7200;266:5286 \u2014 verificado MCP).\n       El override [icon] fuerza information-fill en los dos casos: neutral\n       (que por default no tiene \u00EDcono) y error (que por default resuelve a\n       error-warning-line). El color sigue del variant (sub-600 / error-base). -->\n  <sui-form-hint\n    [message]=\"error() ? errorMessage() : hint()\"\n    [variant]=\"error() ? 'error' : 'neutral'\"\n    [icon]=\"'information-fill'\"\n    size=\"medium\"\n    class=\"sui-textarea__hint-host\"\n  />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-textarea__label-host{display:block;margin-bottom:4px}.sui-textarea__field{display:flex;flex-direction:column;gap:8px;justify-content:center;width:100%;box-sizing:border-box;padding:10px 10px 10px 12px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-12);box-shadow:var(--sui-regular-shadow-x-small);overflow:clip;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-textarea__field:not(.sui-textarea__field--disabled):not(.sui-textarea__field--readonly):not(.sui-textarea__field--error):hover{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}.sui-textarea__field:not(.sui-textarea__field--disabled):not(.sui-textarea__field--readonly):not(.sui-textarea__field--error):hover .sui-textarea__control::placeholder{color:var(--sui-text-sub-600)}.sui-textarea__field:not(.sui-textarea__field--disabled):not(.sui-textarea__field--readonly):not(.sui-textarea__field--error):focus-within{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-textarea__field--error{border-color:var(--sui-state-error-base);box-shadow:none}.sui-textarea__field--error:not(.sui-textarea__field--disabled):hover{border-color:var(--sui-state-error-base)}.sui-textarea__field--error:not(.sui-textarea__field--disabled):focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 3px var(--sui-red-alpha-10)}.sui-textarea__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-textarea__field--readonly{background:var(--sui-bg-weak-50);border-color:var(--sui-stroke-soft-200);box-shadow:none}.sui-textarea__control{flex:1 1 auto;min-width:0;min-height:0;width:100%;border:none;outline:none;background:transparent;padding:0;margin:0;box-sizing:border-box;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950);-webkit-appearance:none;appearance:none}:host([data-sui-resizable]) .sui-textarea__control{resize:vertical}:host(:not([data-sui-resizable])) .sui-textarea__control{resize:none}.sui-textarea__control::-webkit-resizer{display:none}.sui-textarea__control::placeholder{color:var(--sui-text-soft-400);opacity:1}.sui-textarea__control:disabled{color:var(--sui-text-disabled-300);cursor:not-allowed;-webkit-text-fill-color:var(--sui-text-disabled-300);resize:none}.sui-textarea__control:disabled::placeholder{color:var(--sui-text-disabled-300);-webkit-text-fill-color:var(--sui-text-disabled-300)}.sui-textarea__control[readonly]{color:var(--sui-text-sub-600);cursor:default;resize:none}.sui-textarea__control:focus{outline:none}.sui-textarea__counter{display:flex;align-items:center;justify-content:flex-end;gap:6px;width:100%;flex:0 0 auto;color:var(--sui-text-soft-400)}.sui-textarea__field--error .sui-textarea__counter{color:var(--sui-state-error-base)}.sui-textarea__field--disabled .sui-textarea__counter{color:var(--sui-text-disabled-300)}.sui-textarea__counter-text{font-family:var(--sui-font-sans);font-size:var(--sui-type-subheading-2xs-size);font-weight:var(--sui-type-subheading-2xs-weight);line-height:var(--sui-type-subheading-2xs-line);letter-spacing:var(--sui-type-subheading-2xs-spacing);text-transform:uppercase;text-align:right;white-space:nowrap;color:inherit}.sui-textarea__resize-icon{flex-shrink:0;width:12px;height:12px;display:block;color:inherit}.sui-textarea__hint-host{display:block;margin-top:4px}\n"], dependencies: [{ kind: "component", type: SuiFormLabel, selector: "sui-form-label", inputs: ["label", "sublabel", "required", "tooltip", "link", "size", "disabled", "for"], outputs: ["linkClick"] }, { kind: "component", type: SuiFormHint, selector: "sui-form-hint", inputs: ["message", "variant", "icon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "@if (label()) {\n  <sui-form-label\n    [label]=\"label()!\"\n    [sublabel]=\"sublabel()\"\n    [required]=\"required()\"\n    [tooltip]=\"tooltip()\"\n    size=\"medium\"\n    class=\"sui-textarea__label-host\"\n  />\n}\n\n<div\n  class=\"sui-textarea__field\"\n  [class.sui-textarea__field--error]=\"error()\"\n  [class.sui-textarea__field--disabled]=\"isDisabled()\"\n  [class.sui-textarea__field--readonly]=\"readonly()\"\n>\n  <textarea\n    class=\"sui-textarea__control\"\n    [rows]=\"rows()\"\n    [value]=\"value()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [readOnly]=\"readonly()\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [attr.maxlength]=\"maxLength() && maxLength()! > 0 ? maxLength() : null\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n  ></textarea>\n\n  @if (showCounter() || resizable()) {\n    <!-- Character Counter row [1.1] \u2014 Figma 435:5712.\n         In Figma the \"<n>/<max>\" text and the resize handle live together in a\n         single bottom row (flex, gap 6px, justify-end). The text only renders\n         when [maxLength] is set; the handle renders whenever the textarea is\n         resizable \u2014 independent of maxLength (matches Figma, where every state\n         shows the handle in the bottom-right corner while resizable). -->\n    <div class=\"sui-textarea__counter\" aria-hidden=\"true\">\n      @if (showCounter()) {\n        <span class=\"sui-textarea__counter-text\">{{ counterText() }}</span>\n      }\n      @if (resizable()) {\n        <!-- Resize handle \u2014 Figma 435:5715 (12\u00D712, currentColor).\n             Two diagonal strokes \u2014 SUI v1.2 oficial (doc /ui/textarea + Figma\n             435:5715, mismo path en Default/Error/Disabled, solo cambia el stroke\n             color). El \"M ... M ...\" son las 2 diagonales. -->\n        <svg\n          class=\"sui-textarea__resize-icon\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 12 12\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M9.11111 2L2 9.11111M10 6.44444L6.44444 10\"\n            stroke=\"currentColor\"\n            stroke-width=\"1\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      }\n    </div>\n  }\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n  <!-- Hint Text [1.1] \u2014 Figma 435:5731 (neutral) / 435:7200 (error).\n       Ambos estados usan `information-fill` 16\u00D716 como \u00EDcono del hint\n       (nodos I435:5731;266:5272 y I435:7200;266:5286 \u2014 verificado MCP).\n       El override [icon] fuerza information-fill en los dos casos: neutral\n       (que por default no tiene \u00EDcono) y error (que por default resuelve a\n       error-warning-line). El color sigue del variant (sub-600 / error-base). -->\n  <sui-form-hint\n    [message]=\"error() ? errorMessage() : hint()\"\n    [variant]=\"error() ? 'error' : 'neutral'\"\n    [icon]=\"'information-fill'\"\n    class=\"sui-textarea__hint-host\"\n  />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-textarea__label-host{display:block;margin-bottom:4px}.sui-textarea__field{display:flex;flex-direction:column;gap:8px;justify-content:center;width:100%;box-sizing:border-box;padding:10px 10px 10px 12px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-12);box-shadow:var(--sui-regular-shadow-x-small);overflow:clip;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-textarea__field:not(.sui-textarea__field--disabled):not(.sui-textarea__field--readonly):not(.sui-textarea__field--error):hover{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}.sui-textarea__field:not(.sui-textarea__field--disabled):not(.sui-textarea__field--readonly):not(.sui-textarea__field--error):hover .sui-textarea__control::placeholder{color:var(--sui-text-sub-600)}.sui-textarea__field:not(.sui-textarea__field--disabled):not(.sui-textarea__field--readonly):not(.sui-textarea__field--error):focus-within{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-textarea__field--error{border-color:var(--sui-state-error-base);box-shadow:none}.sui-textarea__field--error:not(.sui-textarea__field--disabled):hover{border-color:var(--sui-state-error-base)}.sui-textarea__field--error:not(.sui-textarea__field--disabled):focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 3px var(--sui-red-alpha-10)}.sui-textarea__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-textarea__field--readonly{background:var(--sui-bg-weak-50);border-color:var(--sui-stroke-soft-200);box-shadow:none}.sui-textarea__control{flex:1 1 auto;min-width:0;min-height:0;width:100%;border:none;outline:none;background:transparent;padding:0;margin:0;box-sizing:border-box;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950);-webkit-appearance:none;appearance:none}:host([data-sui-resizable]) .sui-textarea__control{resize:vertical}:host(:not([data-sui-resizable])) .sui-textarea__control{resize:none}.sui-textarea__control::-webkit-resizer{display:none}.sui-textarea__control::placeholder{color:var(--sui-text-soft-400);opacity:1}.sui-textarea__control:disabled{color:var(--sui-text-disabled-300);cursor:not-allowed;-webkit-text-fill-color:var(--sui-text-disabled-300);resize:none}.sui-textarea__control:disabled::placeholder{color:var(--sui-text-disabled-300);-webkit-text-fill-color:var(--sui-text-disabled-300)}.sui-textarea__control[readonly]{color:var(--sui-text-sub-600);cursor:default;resize:none}.sui-textarea__control:focus{outline:none}.sui-textarea__counter{display:flex;align-items:center;justify-content:flex-end;gap:6px;width:100%;flex:0 0 auto;color:var(--sui-text-soft-400)}.sui-textarea__field--error .sui-textarea__counter{color:var(--sui-state-error-base)}.sui-textarea__field--disabled .sui-textarea__counter{color:var(--sui-text-disabled-300)}.sui-textarea__counter-text{font-family:var(--sui-font-sans);font-size:var(--sui-type-subheading-2xs-size);font-weight:var(--sui-type-subheading-2xs-weight);line-height:var(--sui-type-subheading-2xs-line);letter-spacing:var(--sui-type-subheading-2xs-spacing);text-transform:uppercase;text-align:right;white-space:nowrap;color:inherit}.sui-textarea__resize-icon{flex-shrink:0;width:12px;height:12px;display:block;color:inherit}.sui-textarea__hint-host{display:block;margin-top:4px}\n"], dependencies: [{ kind: "component", type: SuiFormLabel, selector: "sui-form-label", inputs: ["label", "sublabel", "required", "tooltip", "link", "size", "disabled", "for"], outputs: ["linkClick"] }, { kind: "component", type: SuiFormHint, selector: "sui-form-hint", inputs: ["message", "variant", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTextarea, decorators: [{
             type: Component,
@@ -16553,7 +16557,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[attr.data-sui-disabled]': 'isDisabled() ? "" : null',
                         '[attr.data-sui-readonly]': 'readonly() ? "" : null',
                         '[attr.data-sui-resizable]': 'resizable() ? "" : null',
-                    }, template: "@if (label()) {\n  <sui-form-label\n    [label]=\"label()!\"\n    [sublabel]=\"sublabel()\"\n    [required]=\"required()\"\n    [tooltip]=\"tooltip()\"\n    size=\"medium\"\n    class=\"sui-textarea__label-host\"\n  />\n}\n\n<div\n  class=\"sui-textarea__field\"\n  [class.sui-textarea__field--error]=\"error()\"\n  [class.sui-textarea__field--disabled]=\"isDisabled()\"\n  [class.sui-textarea__field--readonly]=\"readonly()\"\n>\n  <textarea\n    class=\"sui-textarea__control\"\n    [rows]=\"rows()\"\n    [value]=\"value()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [readOnly]=\"readonly()\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [attr.maxlength]=\"maxLength() && maxLength()! > 0 ? maxLength() : null\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n  ></textarea>\n\n  @if (showCounter() || resizable()) {\n    <!-- Character Counter row [1.1] \u2014 Figma 435:5712.\n         In Figma the \"<n>/<max>\" text and the resize handle live together in a\n         single bottom row (flex, gap 6px, justify-end). The text only renders\n         when [maxLength] is set; the handle renders whenever the textarea is\n         resizable \u2014 independent of maxLength (matches Figma, where every state\n         shows the handle in the bottom-right corner while resizable). -->\n    <div class=\"sui-textarea__counter\" aria-hidden=\"true\">\n      @if (showCounter()) {\n        <span class=\"sui-textarea__counter-text\">{{ counterText() }}</span>\n      }\n      @if (resizable()) {\n        <!-- Resize handle \u2014 Figma 435:5715 (12\u00D712, currentColor).\n             Two diagonal strokes \u2014 SUI v1.2 oficial (doc /ui/textarea + Figma\n             435:5715, mismo path en Default/Error/Disabled, solo cambia el stroke\n             color). El \"M ... M ...\" son las 2 diagonales. -->\n        <svg\n          class=\"sui-textarea__resize-icon\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 12 12\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M9.11111 2L2 9.11111M10 6.44444L6.44444 10\"\n            stroke=\"currentColor\"\n            stroke-width=\"1\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      }\n    </div>\n  }\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n  <!-- Hint Text [1.1] \u2014 Figma 435:5731 (neutral) / 435:7200 (error).\n       Ambos estados usan `information-fill` 16\u00D716 como \u00EDcono del hint\n       (nodos I435:5731;266:5272 y I435:7200;266:5286 \u2014 verificado MCP).\n       El override [icon] fuerza information-fill en los dos casos: neutral\n       (que por default no tiene \u00EDcono) y error (que por default resuelve a\n       error-warning-line). El color sigue del variant (sub-600 / error-base). -->\n  <sui-form-hint\n    [message]=\"error() ? errorMessage() : hint()\"\n    [variant]=\"error() ? 'error' : 'neutral'\"\n    [icon]=\"'information-fill'\"\n    size=\"medium\"\n    class=\"sui-textarea__hint-host\"\n  />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-textarea__label-host{display:block;margin-bottom:4px}.sui-textarea__field{display:flex;flex-direction:column;gap:8px;justify-content:center;width:100%;box-sizing:border-box;padding:10px 10px 10px 12px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-12);box-shadow:var(--sui-regular-shadow-x-small);overflow:clip;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-textarea__field:not(.sui-textarea__field--disabled):not(.sui-textarea__field--readonly):not(.sui-textarea__field--error):hover{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}.sui-textarea__field:not(.sui-textarea__field--disabled):not(.sui-textarea__field--readonly):not(.sui-textarea__field--error):hover .sui-textarea__control::placeholder{color:var(--sui-text-sub-600)}.sui-textarea__field:not(.sui-textarea__field--disabled):not(.sui-textarea__field--readonly):not(.sui-textarea__field--error):focus-within{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-textarea__field--error{border-color:var(--sui-state-error-base);box-shadow:none}.sui-textarea__field--error:not(.sui-textarea__field--disabled):hover{border-color:var(--sui-state-error-base)}.sui-textarea__field--error:not(.sui-textarea__field--disabled):focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 3px var(--sui-red-alpha-10)}.sui-textarea__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-textarea__field--readonly{background:var(--sui-bg-weak-50);border-color:var(--sui-stroke-soft-200);box-shadow:none}.sui-textarea__control{flex:1 1 auto;min-width:0;min-height:0;width:100%;border:none;outline:none;background:transparent;padding:0;margin:0;box-sizing:border-box;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950);-webkit-appearance:none;appearance:none}:host([data-sui-resizable]) .sui-textarea__control{resize:vertical}:host(:not([data-sui-resizable])) .sui-textarea__control{resize:none}.sui-textarea__control::-webkit-resizer{display:none}.sui-textarea__control::placeholder{color:var(--sui-text-soft-400);opacity:1}.sui-textarea__control:disabled{color:var(--sui-text-disabled-300);cursor:not-allowed;-webkit-text-fill-color:var(--sui-text-disabled-300);resize:none}.sui-textarea__control:disabled::placeholder{color:var(--sui-text-disabled-300);-webkit-text-fill-color:var(--sui-text-disabled-300)}.sui-textarea__control[readonly]{color:var(--sui-text-sub-600);cursor:default;resize:none}.sui-textarea__control:focus{outline:none}.sui-textarea__counter{display:flex;align-items:center;justify-content:flex-end;gap:6px;width:100%;flex:0 0 auto;color:var(--sui-text-soft-400)}.sui-textarea__field--error .sui-textarea__counter{color:var(--sui-state-error-base)}.sui-textarea__field--disabled .sui-textarea__counter{color:var(--sui-text-disabled-300)}.sui-textarea__counter-text{font-family:var(--sui-font-sans);font-size:var(--sui-type-subheading-2xs-size);font-weight:var(--sui-type-subheading-2xs-weight);line-height:var(--sui-type-subheading-2xs-line);letter-spacing:var(--sui-type-subheading-2xs-spacing);text-transform:uppercase;text-align:right;white-space:nowrap;color:inherit}.sui-textarea__resize-icon{flex-shrink:0;width:12px;height:12px;display:block;color:inherit}.sui-textarea__hint-host{display:block;margin-top:4px}\n"] }]
+                    }, template: "@if (label()) {\n  <sui-form-label\n    [label]=\"label()!\"\n    [sublabel]=\"sublabel()\"\n    [required]=\"required()\"\n    [tooltip]=\"tooltip()\"\n    size=\"medium\"\n    class=\"sui-textarea__label-host\"\n  />\n}\n\n<div\n  class=\"sui-textarea__field\"\n  [class.sui-textarea__field--error]=\"error()\"\n  [class.sui-textarea__field--disabled]=\"isDisabled()\"\n  [class.sui-textarea__field--readonly]=\"readonly()\"\n>\n  <textarea\n    class=\"sui-textarea__control\"\n    [rows]=\"rows()\"\n    [value]=\"value()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [readOnly]=\"readonly()\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [attr.maxlength]=\"maxLength() && maxLength()! > 0 ? maxLength() : null\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n  ></textarea>\n\n  @if (showCounter() || resizable()) {\n    <!-- Character Counter row [1.1] \u2014 Figma 435:5712.\n         In Figma the \"<n>/<max>\" text and the resize handle live together in a\n         single bottom row (flex, gap 6px, justify-end). The text only renders\n         when [maxLength] is set; the handle renders whenever the textarea is\n         resizable \u2014 independent of maxLength (matches Figma, where every state\n         shows the handle in the bottom-right corner while resizable). -->\n    <div class=\"sui-textarea__counter\" aria-hidden=\"true\">\n      @if (showCounter()) {\n        <span class=\"sui-textarea__counter-text\">{{ counterText() }}</span>\n      }\n      @if (resizable()) {\n        <!-- Resize handle \u2014 Figma 435:5715 (12\u00D712, currentColor).\n             Two diagonal strokes \u2014 SUI v1.2 oficial (doc /ui/textarea + Figma\n             435:5715, mismo path en Default/Error/Disabled, solo cambia el stroke\n             color). El \"M ... M ...\" son las 2 diagonales. -->\n        <svg\n          class=\"sui-textarea__resize-icon\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 12 12\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M9.11111 2L2 9.11111M10 6.44444L6.44444 10\"\n            stroke=\"currentColor\"\n            stroke-width=\"1\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      }\n    </div>\n  }\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n  <!-- Hint Text [1.1] \u2014 Figma 435:5731 (neutral) / 435:7200 (error).\n       Ambos estados usan `information-fill` 16\u00D716 como \u00EDcono del hint\n       (nodos I435:5731;266:5272 y I435:7200;266:5286 \u2014 verificado MCP).\n       El override [icon] fuerza information-fill en los dos casos: neutral\n       (que por default no tiene \u00EDcono) y error (que por default resuelve a\n       error-warning-line). El color sigue del variant (sub-600 / error-base). -->\n  <sui-form-hint\n    [message]=\"error() ? errorMessage() : hint()\"\n    [variant]=\"error() ? 'error' : 'neutral'\"\n    [icon]=\"'information-fill'\"\n    class=\"sui-textarea__hint-host\"\n  />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-textarea__label-host{display:block;margin-bottom:4px}.sui-textarea__field{display:flex;flex-direction:column;gap:8px;justify-content:center;width:100%;box-sizing:border-box;padding:10px 10px 10px 12px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-12);box-shadow:var(--sui-regular-shadow-x-small);overflow:clip;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-textarea__field:not(.sui-textarea__field--disabled):not(.sui-textarea__field--readonly):not(.sui-textarea__field--error):hover{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}.sui-textarea__field:not(.sui-textarea__field--disabled):not(.sui-textarea__field--readonly):not(.sui-textarea__field--error):hover .sui-textarea__control::placeholder{color:var(--sui-text-sub-600)}.sui-textarea__field:not(.sui-textarea__field--disabled):not(.sui-textarea__field--readonly):not(.sui-textarea__field--error):focus-within{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-textarea__field--error{border-color:var(--sui-state-error-base);box-shadow:none}.sui-textarea__field--error:not(.sui-textarea__field--disabled):hover{border-color:var(--sui-state-error-base)}.sui-textarea__field--error:not(.sui-textarea__field--disabled):focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 3px var(--sui-red-alpha-10)}.sui-textarea__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-textarea__field--readonly{background:var(--sui-bg-weak-50);border-color:var(--sui-stroke-soft-200);box-shadow:none}.sui-textarea__control{flex:1 1 auto;min-width:0;min-height:0;width:100%;border:none;outline:none;background:transparent;padding:0;margin:0;box-sizing:border-box;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950);-webkit-appearance:none;appearance:none}:host([data-sui-resizable]) .sui-textarea__control{resize:vertical}:host(:not([data-sui-resizable])) .sui-textarea__control{resize:none}.sui-textarea__control::-webkit-resizer{display:none}.sui-textarea__control::placeholder{color:var(--sui-text-soft-400);opacity:1}.sui-textarea__control:disabled{color:var(--sui-text-disabled-300);cursor:not-allowed;-webkit-text-fill-color:var(--sui-text-disabled-300);resize:none}.sui-textarea__control:disabled::placeholder{color:var(--sui-text-disabled-300);-webkit-text-fill-color:var(--sui-text-disabled-300)}.sui-textarea__control[readonly]{color:var(--sui-text-sub-600);cursor:default;resize:none}.sui-textarea__control:focus{outline:none}.sui-textarea__counter{display:flex;align-items:center;justify-content:flex-end;gap:6px;width:100%;flex:0 0 auto;color:var(--sui-text-soft-400)}.sui-textarea__field--error .sui-textarea__counter{color:var(--sui-state-error-base)}.sui-textarea__field--disabled .sui-textarea__counter{color:var(--sui-text-disabled-300)}.sui-textarea__counter-text{font-family:var(--sui-font-sans);font-size:var(--sui-type-subheading-2xs-size);font-weight:var(--sui-type-subheading-2xs-weight);line-height:var(--sui-type-subheading-2xs-line);letter-spacing:var(--sui-type-subheading-2xs-spacing);text-transform:uppercase;text-align:right;white-space:nowrap;color:inherit}.sui-textarea__resize-icon{flex-shrink:0;width:12px;height:12px;display:block;color:inherit}.sui-textarea__hint-host{display:block;margin-top:4px}\n"] }]
         }], propDecorators: { rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 /**
@@ -17182,7 +17186,7 @@ class SuiTimePicker {
                 useExisting: forwardRef(() => SuiTimePicker),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "_menu", first: true, predicate: SuiDropdownMenu, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Label (slot superior) \u2014 mismo patr\u00F3n que sui-input/sui-select. -->\n@if (label()) {\n  <sui-form-label\n    [label]=\"label()!\"\n    [sublabel]=\"sublabel()\"\n    [required]=\"required()\"\n    [tooltip]=\"tooltip()\"\n    [size]=\"size()\"\n    class=\"sui-time-picker__label-host\"\n    (click)=\"toggle()\"\n  />\n}\n\n<!-- Trigger (input + icono reloj) \u2014 solo si no es inline. -->\n@if (!inline()) {\n  <button\n    #triggerEl\n    type=\"button\"\n    class=\"sui-time-picker__trigger\"\n    [class.sui-time-picker__trigger--error]=\"error()\"\n    [class.sui-time-picker__trigger--open]=\"open()\"\n    [class.sui-time-picker__trigger--filled]=\"value() !== null\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-expanded]=\"open()\"\n    (click)=\"toggle()\"\n  >\n    <sui-icon class=\"sui-time-picker__trigger-icon\" name=\"time-line\" [size]=\"20\" />\n    <span\n      class=\"sui-time-picker__trigger-text\"\n      [class.sui-time-picker__trigger-text--placeholder]=\"!value()\"\n    >\n      {{ triggerText() }}\n    </span>\n    <sui-icon class=\"sui-time-picker__trigger-chevron\" name=\"arrow-down-s-line\" [size]=\"20\" />\n  </button>\n}\n\n<!-- Hint / error message \u2014 mismo slot que sui-input/sui-select. -->\n@if (!inline() && (error() ? errorMessage() : hint())) {\n  <sui-form-hint\n    [message]=\"error() ? errorMessage() : hint()\"\n    [variant]=\"error() ? 'error' : 'neutral'\"\n    [size]=\"size()\"\n    class=\"sui-time-picker__hint-host\"\n  />\n}\n\n<!--\n  Panel (popover) \u2014 el contenido vive en un ng-template reutilizado por:\n    \u00B7 inline() \u2192 render directo (sin overlay, sin trigger)\n    \u00B7 !inline() \u2192 proyectado al sui-dropdown-menu (CDK Overlay con flip\n      arriba/abajo, reposici\u00F3n en scroll, backdrop, Escape, disposeOnNavigation).\n  As\u00ED el panel NO se corta abajo y abre donde hay m\u00E1s espacio (igual que sui-select).\n-->\n<ng-template #panelTpl>\n  <div\n    class=\"sui-time-picker__panel\"\n    [class.sui-time-picker__panel--inline]=\"inline()\"\n    role=\"dialog\"\n    [attr.aria-label]=\"label() || placeholder()\"\n  >\n    <!-- Columnas scrollables: hora / minuto / (periodo en 12h). -->\n    <div class=\"sui-time-picker__columns\">\n      <!-- Columna HORA -->\n      <div\n        class=\"sui-time-picker__column\"\n        role=\"listbox\"\n        aria-label=\"Hora\"\n      >\n        @for (item of hourItems(); track trackColumn($index, item)) {\n          <sui-time-picker-item\n            class=\"sui-time-picker__option\"\n            [time]=\"hourLabelOf(item)\"\n            [active]=\"isHourActive(item)\"\n            (clicked)=\"selectHour(item)\"\n          />\n        }\n      </div>\n\n      <!-- Columna MINUTO -->\n      <div\n        class=\"sui-time-picker__column\"\n        role=\"listbox\"\n        aria-label=\"Minuto\"\n      >\n        @for (item of minuteItems(); track trackColumn($index, item)) {\n          <sui-time-picker-item\n            class=\"sui-time-picker__option\"\n            [time]=\"item.label\"\n            [active]=\"isMinuteActive(item)\"\n            (clicked)=\"selectMinute(item)\"\n          />\n        }\n      </div>\n\n      <!-- Columna PERIODO (solo 12h) -->\n      @if (showPeriod()) {\n        <div\n          class=\"sui-time-picker__column sui-time-picker__column--period\"\n          role=\"listbox\"\n          aria-label=\"AM/PM\"\n        >\n          @for (p of periods; track p) {\n            <sui-time-picker-item\n              class=\"sui-time-picker__option\"\n              [time]=\"p\"\n              [active]=\"isPeriodActive(p)\"\n              (clicked)=\"selectPeriod(p)\"\n            />\n          }\n        </div>\n      }\n    </div>\n\n    <!-- Presets de duraci\u00F3n (pills) \u2014 Figma TimePickerSelectDuration. -->\n    @if (durationPresets().length) {\n      <div class=\"sui-time-picker__presets\" role=\"group\" aria-label=\"Duraci\u00F3n r\u00E1pida\">\n        @for (p of durationPresets(); track trackPreset($index, p)) {\n          <sui-time-picker-duration\n            [label]=\"p.label\"\n            [active]=\"isPresetActive($index)\"\n            (clicked)=\"selectPreset(p, $index)\"\n          />\n        }\n      </div>\n    }\n\n    <!-- Footer Cancel/Apply. -->\n    @if (showFooter()) {\n      <footer class=\"sui-time-picker__footer\">\n        <sui-button\n          variant=\"stroke\"\n          color=\"neutral\"\n          size=\"small\"\n          type=\"button\"\n          (click)=\"cancel()\"\n        >\n          Cancelar\n        </sui-button>\n        <sui-button\n          variant=\"filled\"\n          color=\"primary\"\n          size=\"small\"\n          type=\"button\"\n          (click)=\"apply()\"\n        >\n          Aplicar\n        </sui-button>\n      </footer>\n    }\n  </div>\n</ng-template>\n\n<!-- Inline mode \u2014 render directo del panel (sin overlay ni trigger). -->\n@if (inline()) {\n  <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n}\n\n<!--\n  Popover mode \u2014 el panel flota v\u00EDa sui-dropdown-menu anclado al trigger\n  (igual que sui-select). Hereda flip arriba/abajo, reposici\u00F3n en scroll,\n  backdrop transparent (outside-click), Escape y disposeOnNavigation.\n  El componente abre/cierra el menu desde openPopover()/cancel()/apply();\n  (openedChange) re-sincroniza open() en los closes del overlay.\n-->\n@if (!inline()) {\n  <sui-dropdown-menu\n    [origin]=\"triggerEl() ?? null\"\n    [disabled]=\"isDisabled()\"\n    [matchWidth]=\"false\"\n    [minWidth]=\"240\"\n    panelClass=\"sui-time-picker__overlay-pane\"\n    (openedChange)=\"onMenuOpenedChange($event)\"\n  >\n    <ng-template suiDropdownPanel>\n      <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n    </ng-template>\n  </sui-dropdown-menu>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;position:relative;font-family:var(--sui-font-sans, var(--font-sans, sans-serif))}.sui-time-picker__trigger{display:inline-flex;align-items:center;gap:8px;width:100%;min-width:180px;height:40px;padding:0 12px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-10, 10px);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));cursor:pointer;outline:none;font:inherit;color:var(--sui-text-strong-950, #171717);transition:border-color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)),box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1))}.sui-time-picker__trigger:hover:not(:disabled){border-color:var(--sui-stroke-sub-300, #d1d1d1)}.sui-time-picker__trigger:focus-visible:not(:disabled){border-color:var(--sui-stroke-strong-950, #171717);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px color-mix(in oklab,var(--sui-stroke-strong-950, #171717) 16%,transparent)}.sui-time-picker__trigger--error{border-color:var(--sui-state-error-base, #fb3748)}.sui-time-picker__trigger--open{border-color:var(--sui-stroke-strong-950, #171717)}.sui-time-picker__trigger:disabled{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-disabled-300, #d1d1d1);cursor:not-allowed;border:none}:host([data-sui-size=small]) .sui-time-picker__trigger{height:36px;border-radius:var(--sui-radius-8, 8px)}.sui-time-picker__trigger-icon,.sui-time-picker__trigger-chevron{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-time-picker__trigger-text{flex:1 1 auto;text-align:left;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.084px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-time-picker__trigger-text--placeholder{color:var(--sui-text-soft-400, #a3a3a3);font-weight:400}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiButton, selector: "sui-button", inputs: ["variant", "color", "size", "onlyIcon", "disabled", "leftIcon", "rightIcon", "type"] }, { kind: "component", type: SuiFormLabel, selector: "sui-form-label", inputs: ["label", "sublabel", "required", "tooltip", "link", "size", "disabled", "for"], outputs: ["linkClick"] }, { kind: "component", type: SuiFormHint, selector: "sui-form-hint", inputs: ["message", "variant", "icon", "size"] }, { kind: "component", type: SuiDropdownMenu, selector: "sui-dropdown-menu", inputs: ["matchWidth", "flexibleDimensions", "push", "minWidth", "position", "viewportMargin", "panelClass", "disabled", "popupRole", "origin"], outputs: ["openedChange"], exportAs: ["suiDropdownMenu"] }, { kind: "directive", type: SuiDropdownPanel, selector: "ng-template[suiDropdownPanel]" }, { kind: "component", type: SuiTimePickerItem, selector: "sui-time-picker-item", inputs: ["time", "meridiem", "rightTime", "rightMeridiem", "direction", "active", "highlighted", "disabled"], outputs: ["clicked"] }, { kind: "component", type: SuiTimePickerDuration, selector: "sui-time-picker-duration", inputs: ["label", "active", "disabled"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "_menu", first: true, predicate: SuiDropdownMenu, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Label (slot superior) \u2014 mismo patr\u00F3n que sui-input/sui-select. -->\n@if (label()) {\n  <sui-form-label\n    [label]=\"label()!\"\n    [sublabel]=\"sublabel()\"\n    [required]=\"required()\"\n    [tooltip]=\"tooltip()\"\n    [size]=\"size()\"\n    class=\"sui-time-picker__label-host\"\n    (click)=\"toggle()\"\n  />\n}\n\n<!-- Trigger (input + icono reloj) \u2014 solo si no es inline. -->\n@if (!inline()) {\n  <button\n    #triggerEl\n    type=\"button\"\n    class=\"sui-time-picker__trigger\"\n    [class.sui-time-picker__trigger--error]=\"error()\"\n    [class.sui-time-picker__trigger--open]=\"open()\"\n    [class.sui-time-picker__trigger--filled]=\"value() !== null\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-expanded]=\"open()\"\n    (click)=\"toggle()\"\n  >\n    <sui-icon class=\"sui-time-picker__trigger-icon\" name=\"time-line\" [size]=\"20\" />\n    <span\n      class=\"sui-time-picker__trigger-text\"\n      [class.sui-time-picker__trigger-text--placeholder]=\"!value()\"\n    >\n      {{ triggerText() }}\n    </span>\n    <sui-icon class=\"sui-time-picker__trigger-chevron\" name=\"arrow-down-s-line\" [size]=\"20\" />\n  </button>\n}\n\n<!-- Hint / error message \u2014 mismo slot que sui-input/sui-select. -->\n@if (!inline() && (error() ? errorMessage() : hint())) {\n  <sui-form-hint\n    [message]=\"error() ? errorMessage() : hint()\"\n    [variant]=\"error() ? 'error' : 'neutral'\"\n    class=\"sui-time-picker__hint-host\"\n  />\n}\n\n<!--\n  Panel (popover) \u2014 el contenido vive en un ng-template reutilizado por:\n    \u00B7 inline() \u2192 render directo (sin overlay, sin trigger)\n    \u00B7 !inline() \u2192 proyectado al sui-dropdown-menu (CDK Overlay con flip\n      arriba/abajo, reposici\u00F3n en scroll, backdrop, Escape, disposeOnNavigation).\n  As\u00ED el panel NO se corta abajo y abre donde hay m\u00E1s espacio (igual que sui-select).\n-->\n<ng-template #panelTpl>\n  <div\n    class=\"sui-time-picker__panel\"\n    [class.sui-time-picker__panel--inline]=\"inline()\"\n    role=\"dialog\"\n    [attr.aria-label]=\"label() || placeholder()\"\n  >\n    <!-- Columnas scrollables: hora / minuto / (periodo en 12h). -->\n    <div class=\"sui-time-picker__columns\">\n      <!-- Columna HORA -->\n      <div\n        class=\"sui-time-picker__column\"\n        role=\"listbox\"\n        aria-label=\"Hora\"\n      >\n        @for (item of hourItems(); track trackColumn($index, item)) {\n          <sui-time-picker-item\n            class=\"sui-time-picker__option\"\n            [time]=\"hourLabelOf(item)\"\n            [active]=\"isHourActive(item)\"\n            (clicked)=\"selectHour(item)\"\n          />\n        }\n      </div>\n\n      <!-- Columna MINUTO -->\n      <div\n        class=\"sui-time-picker__column\"\n        role=\"listbox\"\n        aria-label=\"Minuto\"\n      >\n        @for (item of minuteItems(); track trackColumn($index, item)) {\n          <sui-time-picker-item\n            class=\"sui-time-picker__option\"\n            [time]=\"item.label\"\n            [active]=\"isMinuteActive(item)\"\n            (clicked)=\"selectMinute(item)\"\n          />\n        }\n      </div>\n\n      <!-- Columna PERIODO (solo 12h) -->\n      @if (showPeriod()) {\n        <div\n          class=\"sui-time-picker__column sui-time-picker__column--period\"\n          role=\"listbox\"\n          aria-label=\"AM/PM\"\n        >\n          @for (p of periods; track p) {\n            <sui-time-picker-item\n              class=\"sui-time-picker__option\"\n              [time]=\"p\"\n              [active]=\"isPeriodActive(p)\"\n              (clicked)=\"selectPeriod(p)\"\n            />\n          }\n        </div>\n      }\n    </div>\n\n    <!-- Presets de duraci\u00F3n (pills) \u2014 Figma TimePickerSelectDuration. -->\n    @if (durationPresets().length) {\n      <div class=\"sui-time-picker__presets\" role=\"group\" aria-label=\"Duraci\u00F3n r\u00E1pida\">\n        @for (p of durationPresets(); track trackPreset($index, p)) {\n          <sui-time-picker-duration\n            [label]=\"p.label\"\n            [active]=\"isPresetActive($index)\"\n            (clicked)=\"selectPreset(p, $index)\"\n          />\n        }\n      </div>\n    }\n\n    <!-- Footer Cancel/Apply. -->\n    @if (showFooter()) {\n      <footer class=\"sui-time-picker__footer\">\n        <sui-button\n          variant=\"stroke\"\n          color=\"neutral\"\n          size=\"small\"\n          type=\"button\"\n          (click)=\"cancel()\"\n        >\n          Cancelar\n        </sui-button>\n        <sui-button\n          variant=\"filled\"\n          color=\"primary\"\n          size=\"small\"\n          type=\"button\"\n          (click)=\"apply()\"\n        >\n          Aplicar\n        </sui-button>\n      </footer>\n    }\n  </div>\n</ng-template>\n\n<!-- Inline mode \u2014 render directo del panel (sin overlay ni trigger). -->\n@if (inline()) {\n  <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n}\n\n<!--\n  Popover mode \u2014 el panel flota v\u00EDa sui-dropdown-menu anclado al trigger\n  (igual que sui-select). Hereda flip arriba/abajo, reposici\u00F3n en scroll,\n  backdrop transparent (outside-click), Escape y disposeOnNavigation.\n  El componente abre/cierra el menu desde openPopover()/cancel()/apply();\n  (openedChange) re-sincroniza open() en los closes del overlay.\n-->\n@if (!inline()) {\n  <sui-dropdown-menu\n    [origin]=\"triggerEl() ?? null\"\n    [disabled]=\"isDisabled()\"\n    [matchWidth]=\"false\"\n    [minWidth]=\"240\"\n    panelClass=\"sui-time-picker__overlay-pane\"\n    (openedChange)=\"onMenuOpenedChange($event)\"\n  >\n    <ng-template suiDropdownPanel>\n      <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n    </ng-template>\n  </sui-dropdown-menu>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;position:relative;font-family:var(--sui-font-sans, var(--font-sans, sans-serif))}.sui-time-picker__trigger{display:inline-flex;align-items:center;gap:8px;width:100%;min-width:180px;height:40px;padding:0 12px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-10, 10px);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));cursor:pointer;outline:none;font:inherit;color:var(--sui-text-strong-950, #171717);transition:border-color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)),box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1))}.sui-time-picker__trigger:hover:not(:disabled){border-color:var(--sui-stroke-sub-300, #d1d1d1)}.sui-time-picker__trigger:focus-visible:not(:disabled){border-color:var(--sui-stroke-strong-950, #171717);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px color-mix(in oklab,var(--sui-stroke-strong-950, #171717) 16%,transparent)}.sui-time-picker__trigger--error{border-color:var(--sui-state-error-base, #fb3748)}.sui-time-picker__trigger--open{border-color:var(--sui-stroke-strong-950, #171717)}.sui-time-picker__trigger:disabled{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-disabled-300, #d1d1d1);cursor:not-allowed;border:none}:host([data-sui-size=small]) .sui-time-picker__trigger{height:36px;border-radius:var(--sui-radius-8, 8px)}.sui-time-picker__trigger-icon,.sui-time-picker__trigger-chevron{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-time-picker__trigger-text{flex:1 1 auto;text-align:left;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.084px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-time-picker__trigger-text--placeholder{color:var(--sui-text-soft-400, #a3a3a3);font-weight:400}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiButton, selector: "sui-button", inputs: ["variant", "color", "size", "onlyIcon", "disabled", "leftIcon", "rightIcon", "type"] }, { kind: "component", type: SuiFormLabel, selector: "sui-form-label", inputs: ["label", "sublabel", "required", "tooltip", "link", "size", "disabled", "for"], outputs: ["linkClick"] }, { kind: "component", type: SuiFormHint, selector: "sui-form-hint", inputs: ["message", "variant", "icon"] }, { kind: "component", type: SuiDropdownMenu, selector: "sui-dropdown-menu", inputs: ["matchWidth", "flexibleDimensions", "push", "minWidth", "position", "viewportMargin", "panelClass", "disabled", "popupRole", "origin"], outputs: ["openedChange"], exportAs: ["suiDropdownMenu"] }, { kind: "directive", type: SuiDropdownPanel, selector: "ng-template[suiDropdownPanel]" }, { kind: "component", type: SuiTimePickerItem, selector: "sui-time-picker-item", inputs: ["time", "meridiem", "rightTime", "rightMeridiem", "direction", "active", "highlighted", "disabled"], outputs: ["clicked"] }, { kind: "component", type: SuiTimePickerDuration, selector: "sui-time-picker-duration", inputs: ["label", "active", "disabled"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTimePicker, decorators: [{
             type: Component,
@@ -17208,7 +17212,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[attr.data-sui-open]': 'open() ? "" : null',
                         '[attr.data-sui-format]': 'format()',
                         '[attr.data-sui-size]': 'size()',
-                    }, template: "<!-- Label (slot superior) \u2014 mismo patr\u00F3n que sui-input/sui-select. -->\n@if (label()) {\n  <sui-form-label\n    [label]=\"label()!\"\n    [sublabel]=\"sublabel()\"\n    [required]=\"required()\"\n    [tooltip]=\"tooltip()\"\n    [size]=\"size()\"\n    class=\"sui-time-picker__label-host\"\n    (click)=\"toggle()\"\n  />\n}\n\n<!-- Trigger (input + icono reloj) \u2014 solo si no es inline. -->\n@if (!inline()) {\n  <button\n    #triggerEl\n    type=\"button\"\n    class=\"sui-time-picker__trigger\"\n    [class.sui-time-picker__trigger--error]=\"error()\"\n    [class.sui-time-picker__trigger--open]=\"open()\"\n    [class.sui-time-picker__trigger--filled]=\"value() !== null\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-expanded]=\"open()\"\n    (click)=\"toggle()\"\n  >\n    <sui-icon class=\"sui-time-picker__trigger-icon\" name=\"time-line\" [size]=\"20\" />\n    <span\n      class=\"sui-time-picker__trigger-text\"\n      [class.sui-time-picker__trigger-text--placeholder]=\"!value()\"\n    >\n      {{ triggerText() }}\n    </span>\n    <sui-icon class=\"sui-time-picker__trigger-chevron\" name=\"arrow-down-s-line\" [size]=\"20\" />\n  </button>\n}\n\n<!-- Hint / error message \u2014 mismo slot que sui-input/sui-select. -->\n@if (!inline() && (error() ? errorMessage() : hint())) {\n  <sui-form-hint\n    [message]=\"error() ? errorMessage() : hint()\"\n    [variant]=\"error() ? 'error' : 'neutral'\"\n    [size]=\"size()\"\n    class=\"sui-time-picker__hint-host\"\n  />\n}\n\n<!--\n  Panel (popover) \u2014 el contenido vive en un ng-template reutilizado por:\n    \u00B7 inline() \u2192 render directo (sin overlay, sin trigger)\n    \u00B7 !inline() \u2192 proyectado al sui-dropdown-menu (CDK Overlay con flip\n      arriba/abajo, reposici\u00F3n en scroll, backdrop, Escape, disposeOnNavigation).\n  As\u00ED el panel NO se corta abajo y abre donde hay m\u00E1s espacio (igual que sui-select).\n-->\n<ng-template #panelTpl>\n  <div\n    class=\"sui-time-picker__panel\"\n    [class.sui-time-picker__panel--inline]=\"inline()\"\n    role=\"dialog\"\n    [attr.aria-label]=\"label() || placeholder()\"\n  >\n    <!-- Columnas scrollables: hora / minuto / (periodo en 12h). -->\n    <div class=\"sui-time-picker__columns\">\n      <!-- Columna HORA -->\n      <div\n        class=\"sui-time-picker__column\"\n        role=\"listbox\"\n        aria-label=\"Hora\"\n      >\n        @for (item of hourItems(); track trackColumn($index, item)) {\n          <sui-time-picker-item\n            class=\"sui-time-picker__option\"\n            [time]=\"hourLabelOf(item)\"\n            [active]=\"isHourActive(item)\"\n            (clicked)=\"selectHour(item)\"\n          />\n        }\n      </div>\n\n      <!-- Columna MINUTO -->\n      <div\n        class=\"sui-time-picker__column\"\n        role=\"listbox\"\n        aria-label=\"Minuto\"\n      >\n        @for (item of minuteItems(); track trackColumn($index, item)) {\n          <sui-time-picker-item\n            class=\"sui-time-picker__option\"\n            [time]=\"item.label\"\n            [active]=\"isMinuteActive(item)\"\n            (clicked)=\"selectMinute(item)\"\n          />\n        }\n      </div>\n\n      <!-- Columna PERIODO (solo 12h) -->\n      @if (showPeriod()) {\n        <div\n          class=\"sui-time-picker__column sui-time-picker__column--period\"\n          role=\"listbox\"\n          aria-label=\"AM/PM\"\n        >\n          @for (p of periods; track p) {\n            <sui-time-picker-item\n              class=\"sui-time-picker__option\"\n              [time]=\"p\"\n              [active]=\"isPeriodActive(p)\"\n              (clicked)=\"selectPeriod(p)\"\n            />\n          }\n        </div>\n      }\n    </div>\n\n    <!-- Presets de duraci\u00F3n (pills) \u2014 Figma TimePickerSelectDuration. -->\n    @if (durationPresets().length) {\n      <div class=\"sui-time-picker__presets\" role=\"group\" aria-label=\"Duraci\u00F3n r\u00E1pida\">\n        @for (p of durationPresets(); track trackPreset($index, p)) {\n          <sui-time-picker-duration\n            [label]=\"p.label\"\n            [active]=\"isPresetActive($index)\"\n            (clicked)=\"selectPreset(p, $index)\"\n          />\n        }\n      </div>\n    }\n\n    <!-- Footer Cancel/Apply. -->\n    @if (showFooter()) {\n      <footer class=\"sui-time-picker__footer\">\n        <sui-button\n          variant=\"stroke\"\n          color=\"neutral\"\n          size=\"small\"\n          type=\"button\"\n          (click)=\"cancel()\"\n        >\n          Cancelar\n        </sui-button>\n        <sui-button\n          variant=\"filled\"\n          color=\"primary\"\n          size=\"small\"\n          type=\"button\"\n          (click)=\"apply()\"\n        >\n          Aplicar\n        </sui-button>\n      </footer>\n    }\n  </div>\n</ng-template>\n\n<!-- Inline mode \u2014 render directo del panel (sin overlay ni trigger). -->\n@if (inline()) {\n  <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n}\n\n<!--\n  Popover mode \u2014 el panel flota v\u00EDa sui-dropdown-menu anclado al trigger\n  (igual que sui-select). Hereda flip arriba/abajo, reposici\u00F3n en scroll,\n  backdrop transparent (outside-click), Escape y disposeOnNavigation.\n  El componente abre/cierra el menu desde openPopover()/cancel()/apply();\n  (openedChange) re-sincroniza open() en los closes del overlay.\n-->\n@if (!inline()) {\n  <sui-dropdown-menu\n    [origin]=\"triggerEl() ?? null\"\n    [disabled]=\"isDisabled()\"\n    [matchWidth]=\"false\"\n    [minWidth]=\"240\"\n    panelClass=\"sui-time-picker__overlay-pane\"\n    (openedChange)=\"onMenuOpenedChange($event)\"\n  >\n    <ng-template suiDropdownPanel>\n      <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n    </ng-template>\n  </sui-dropdown-menu>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;position:relative;font-family:var(--sui-font-sans, var(--font-sans, sans-serif))}.sui-time-picker__trigger{display:inline-flex;align-items:center;gap:8px;width:100%;min-width:180px;height:40px;padding:0 12px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-10, 10px);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));cursor:pointer;outline:none;font:inherit;color:var(--sui-text-strong-950, #171717);transition:border-color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)),box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1))}.sui-time-picker__trigger:hover:not(:disabled){border-color:var(--sui-stroke-sub-300, #d1d1d1)}.sui-time-picker__trigger:focus-visible:not(:disabled){border-color:var(--sui-stroke-strong-950, #171717);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px color-mix(in oklab,var(--sui-stroke-strong-950, #171717) 16%,transparent)}.sui-time-picker__trigger--error{border-color:var(--sui-state-error-base, #fb3748)}.sui-time-picker__trigger--open{border-color:var(--sui-stroke-strong-950, #171717)}.sui-time-picker__trigger:disabled{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-disabled-300, #d1d1d1);cursor:not-allowed;border:none}:host([data-sui-size=small]) .sui-time-picker__trigger{height:36px;border-radius:var(--sui-radius-8, 8px)}.sui-time-picker__trigger-icon,.sui-time-picker__trigger-chevron{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-time-picker__trigger-text{flex:1 1 auto;text-align:left;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.084px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-time-picker__trigger-text--placeholder{color:var(--sui-text-soft-400, #a3a3a3);font-weight:400}\n"] }]
+                    }, template: "<!-- Label (slot superior) \u2014 mismo patr\u00F3n que sui-input/sui-select. -->\n@if (label()) {\n  <sui-form-label\n    [label]=\"label()!\"\n    [sublabel]=\"sublabel()\"\n    [required]=\"required()\"\n    [tooltip]=\"tooltip()\"\n    [size]=\"size()\"\n    class=\"sui-time-picker__label-host\"\n    (click)=\"toggle()\"\n  />\n}\n\n<!-- Trigger (input + icono reloj) \u2014 solo si no es inline. -->\n@if (!inline()) {\n  <button\n    #triggerEl\n    type=\"button\"\n    class=\"sui-time-picker__trigger\"\n    [class.sui-time-picker__trigger--error]=\"error()\"\n    [class.sui-time-picker__trigger--open]=\"open()\"\n    [class.sui-time-picker__trigger--filled]=\"value() !== null\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-expanded]=\"open()\"\n    (click)=\"toggle()\"\n  >\n    <sui-icon class=\"sui-time-picker__trigger-icon\" name=\"time-line\" [size]=\"20\" />\n    <span\n      class=\"sui-time-picker__trigger-text\"\n      [class.sui-time-picker__trigger-text--placeholder]=\"!value()\"\n    >\n      {{ triggerText() }}\n    </span>\n    <sui-icon class=\"sui-time-picker__trigger-chevron\" name=\"arrow-down-s-line\" [size]=\"20\" />\n  </button>\n}\n\n<!-- Hint / error message \u2014 mismo slot que sui-input/sui-select. -->\n@if (!inline() && (error() ? errorMessage() : hint())) {\n  <sui-form-hint\n    [message]=\"error() ? errorMessage() : hint()\"\n    [variant]=\"error() ? 'error' : 'neutral'\"\n    class=\"sui-time-picker__hint-host\"\n  />\n}\n\n<!--\n  Panel (popover) \u2014 el contenido vive en un ng-template reutilizado por:\n    \u00B7 inline() \u2192 render directo (sin overlay, sin trigger)\n    \u00B7 !inline() \u2192 proyectado al sui-dropdown-menu (CDK Overlay con flip\n      arriba/abajo, reposici\u00F3n en scroll, backdrop, Escape, disposeOnNavigation).\n  As\u00ED el panel NO se corta abajo y abre donde hay m\u00E1s espacio (igual que sui-select).\n-->\n<ng-template #panelTpl>\n  <div\n    class=\"sui-time-picker__panel\"\n    [class.sui-time-picker__panel--inline]=\"inline()\"\n    role=\"dialog\"\n    [attr.aria-label]=\"label() || placeholder()\"\n  >\n    <!-- Columnas scrollables: hora / minuto / (periodo en 12h). -->\n    <div class=\"sui-time-picker__columns\">\n      <!-- Columna HORA -->\n      <div\n        class=\"sui-time-picker__column\"\n        role=\"listbox\"\n        aria-label=\"Hora\"\n      >\n        @for (item of hourItems(); track trackColumn($index, item)) {\n          <sui-time-picker-item\n            class=\"sui-time-picker__option\"\n            [time]=\"hourLabelOf(item)\"\n            [active]=\"isHourActive(item)\"\n            (clicked)=\"selectHour(item)\"\n          />\n        }\n      </div>\n\n      <!-- Columna MINUTO -->\n      <div\n        class=\"sui-time-picker__column\"\n        role=\"listbox\"\n        aria-label=\"Minuto\"\n      >\n        @for (item of minuteItems(); track trackColumn($index, item)) {\n          <sui-time-picker-item\n            class=\"sui-time-picker__option\"\n            [time]=\"item.label\"\n            [active]=\"isMinuteActive(item)\"\n            (clicked)=\"selectMinute(item)\"\n          />\n        }\n      </div>\n\n      <!-- Columna PERIODO (solo 12h) -->\n      @if (showPeriod()) {\n        <div\n          class=\"sui-time-picker__column sui-time-picker__column--period\"\n          role=\"listbox\"\n          aria-label=\"AM/PM\"\n        >\n          @for (p of periods; track p) {\n            <sui-time-picker-item\n              class=\"sui-time-picker__option\"\n              [time]=\"p\"\n              [active]=\"isPeriodActive(p)\"\n              (clicked)=\"selectPeriod(p)\"\n            />\n          }\n        </div>\n      }\n    </div>\n\n    <!-- Presets de duraci\u00F3n (pills) \u2014 Figma TimePickerSelectDuration. -->\n    @if (durationPresets().length) {\n      <div class=\"sui-time-picker__presets\" role=\"group\" aria-label=\"Duraci\u00F3n r\u00E1pida\">\n        @for (p of durationPresets(); track trackPreset($index, p)) {\n          <sui-time-picker-duration\n            [label]=\"p.label\"\n            [active]=\"isPresetActive($index)\"\n            (clicked)=\"selectPreset(p, $index)\"\n          />\n        }\n      </div>\n    }\n\n    <!-- Footer Cancel/Apply. -->\n    @if (showFooter()) {\n      <footer class=\"sui-time-picker__footer\">\n        <sui-button\n          variant=\"stroke\"\n          color=\"neutral\"\n          size=\"small\"\n          type=\"button\"\n          (click)=\"cancel()\"\n        >\n          Cancelar\n        </sui-button>\n        <sui-button\n          variant=\"filled\"\n          color=\"primary\"\n          size=\"small\"\n          type=\"button\"\n          (click)=\"apply()\"\n        >\n          Aplicar\n        </sui-button>\n      </footer>\n    }\n  </div>\n</ng-template>\n\n<!-- Inline mode \u2014 render directo del panel (sin overlay ni trigger). -->\n@if (inline()) {\n  <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n}\n\n<!--\n  Popover mode \u2014 el panel flota v\u00EDa sui-dropdown-menu anclado al trigger\n  (igual que sui-select). Hereda flip arriba/abajo, reposici\u00F3n en scroll,\n  backdrop transparent (outside-click), Escape y disposeOnNavigation.\n  El componente abre/cierra el menu desde openPopover()/cancel()/apply();\n  (openedChange) re-sincroniza open() en los closes del overlay.\n-->\n@if (!inline()) {\n  <sui-dropdown-menu\n    [origin]=\"triggerEl() ?? null\"\n    [disabled]=\"isDisabled()\"\n    [matchWidth]=\"false\"\n    [minWidth]=\"240\"\n    panelClass=\"sui-time-picker__overlay-pane\"\n    (openedChange)=\"onMenuOpenedChange($event)\"\n  >\n    <ng-template suiDropdownPanel>\n      <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n    </ng-template>\n  </sui-dropdown-menu>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;position:relative;font-family:var(--sui-font-sans, var(--font-sans, sans-serif))}.sui-time-picker__trigger{display:inline-flex;align-items:center;gap:8px;width:100%;min-width:180px;height:40px;padding:0 12px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-10, 10px);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));cursor:pointer;outline:none;font:inherit;color:var(--sui-text-strong-950, #171717);transition:border-color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)),box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1))}.sui-time-picker__trigger:hover:not(:disabled){border-color:var(--sui-stroke-sub-300, #d1d1d1)}.sui-time-picker__trigger:focus-visible:not(:disabled){border-color:var(--sui-stroke-strong-950, #171717);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px color-mix(in oklab,var(--sui-stroke-strong-950, #171717) 16%,transparent)}.sui-time-picker__trigger--error{border-color:var(--sui-state-error-base, #fb3748)}.sui-time-picker__trigger--open{border-color:var(--sui-stroke-strong-950, #171717)}.sui-time-picker__trigger:disabled{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-disabled-300, #d1d1d1);cursor:not-allowed;border:none}:host([data-sui-size=small]) .sui-time-picker__trigger{height:36px;border-radius:var(--sui-radius-8, 8px)}.sui-time-picker__trigger-icon,.sui-time-picker__trigger-chevron{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-time-picker__trigger-text{flex:1 1 auto;text-align:left;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.084px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-time-picker__trigger-text--placeholder{color:var(--sui-text-soft-400, #a3a3a3);font-weight:400}\n"] }]
         }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], durationPresets: [{ type: i0.Input, args: [{ isSignal: true, alias: "durationPresets", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], triggerEl: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], _menu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SuiDropdownMenu), { isSignal: true }] }] } });
 
 /**