@ajuarezso/sui-design-system 0.21.0 → 0.22.0

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

@@ -5145,7 +5145,7 @@ class SuiDropdownItem {
         this.clicked.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiDropdownItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiDropdownItem, isStandalone: true, selector: "sui-dropdown-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, leadingFramed: { classPropertyName: "leadingFramed", publicName: "leadingFramed", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, highlighted: { classPropertyName: "highlighted", publicName: "highlighted", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, shortcut: { classPropertyName: "shortcut", publicName: "shortcut", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { listeners: { "click": "onClick($event)", "keydown.enter": "onClick($event)", "keydown.space": "onClick($event)", "touchstart": "$event.currentTarget", "touchend": "$any($event.currentTarget).blur()" }, properties: { "attr.role": "mode() === \"option\" ? \"option\" : \"menuitem\"", "attr.data-sui-mode": "mode()", "attr.data-sui-size": "size()", "attr.data-sui-framed": "leadingFramed() ? \"\" : null", "attr.data-sui-selected": "selected() ? \"\" : null", "attr.data-sui-highlighted": "highlighted() ? \"\" : null", "attr.data-sui-disabled": "disabled() ? \"\" : null", "attr.aria-selected": "mode() === \"option\" ? (selected() ? \"true\" : \"false\") : null", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.tabindex": "disabled() ? \"-1\" : \"0\"" } }, ngImport: i0, template: "<div class=\"sui-dropdown-item__leading\">\n  <ng-content select=\"[slot=leading]\" />\n</div>\n\n<div class=\"sui-dropdown-item__text\">\n  <span class=\"sui-dropdown-item__label\">{{ label() }}</span>\n  @if (hasSublabel()) {\n    <span class=\"sui-dropdown-item__sublabel\">{{ sublabel() }}</span>\n  }\n  @if (hasDescription()) {\n    <span class=\"sui-dropdown-item__description\">{{ description() }}</span>\n  }\n</div>\n\n<div class=\"sui-dropdown-item__trailing\">\n  <!-- Canon trailing-slot (Figma 405:6432): el consumer proyecta en este orden DOM\n       fijo \u2192 badge primero, luego shortcut (provisto por el input shortcut() abajo),\n       luego toggle/button al final. El gap del flex (8px) los separa.\n       Pill button (variante Large): bg primary-alpha-10, p-6, radius-8, label primary\n       Inter Medium 14/20. Link button (variante Small): texto primary sin bg.\n       El componente no fija sublots \u2014 el orden lo controla el consumer seg\u00FAn este\n       patr\u00F3n para mantener consistencia visual vs Figma. -->\n  <ng-content select=\"[slot=trailing]\" />\n  @if (shortcut()) {\n    <span class=\"sui-dropdown-item__shortcut\">{{ shortcut() }}</span>\n  }\n  @if (showCheck()) {\n    <!-- Check icon autom\u00E1tico en mode='option' cuando selected=true.\n         Remixicon check-line (ri-check-line) v\u00EDa sui-icon \u2014 mismo glyph que\n         el resto del proyecto, color heredado de .sui-dropdown-item__check. -->\n    <sui-icon class=\"sui-dropdown-item__check\" name=\"check-line\" [size]=\"20\" />\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:8px;padding:8px;background:var(--sui-bg-white-0);border-radius:var(--sui-radius-8, 8px);cursor:pointer;outline:none;width:100%;box-sizing:border-box;font-family:var(--sui-font-sans);transition:background .1s ease-out,box-shadow .1s ease-out;-webkit-user-select:none;user-select:none}:host:hover{background:var(--sui-bg-weak-50)}:host:active:not([data-sui-disabled]),:host:focus-visible{box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-size=small]){min-height:36px;padding:8px;gap:8px}:host([data-sui-size=large]){min-height:56px;padding:8px;gap:12px;border-radius:var(--sui-radius-10, 10px)}:host([data-sui-size=large]) .sui-dropdown-item__text{flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-size=large]) .sui-dropdown-item__label{font-weight:var(--sui-type-label-sm-weight, 500)}:host([data-sui-size=xlarge]){min-height:76px;padding:8px;gap:16px;border-radius:var(--sui-radius-12, 12px)}:host([data-sui-size=xlarge]) .sui-dropdown-item__text{flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-size=xlarge]) .sui-dropdown-item__label{font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em);font-weight:var(--sui-type-label-md-weight, 500)}:host([data-sui-size=xlarge]) .sui-dropdown-item__description{font-size:var(--sui-type-paragraph-sm-size, 14px);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em)}.sui-dropdown-item__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}.sui-dropdown-item__leading:empty{display:none}:host([data-sui-size=large][data-sui-framed]) .sui-dropdown-item__leading,:host([data-sui-size=xlarge][data-sui-framed]) .sui-dropdown-item__leading{padding:10px;border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-full, 999px);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));box-sizing:border-box}:host([data-sui-size=xlarge][data-sui-framed]) .sui-dropdown-item__leading{padding:12px}.sui-dropdown-item__text{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:4px;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-dropdown-item__label{font-size:var(--sui-type-paragraph-sm-size, 14px);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);font-weight:var(--sui-type-paragraph-sm-weight, 400);color:var(--sui-text-strong-950);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-dropdown-item__sublabel{font-size:var(--sui-type-paragraph-xs-size, 12px);line-height:var(--sui-type-paragraph-xs-line, 16px);letter-spacing:var(--sui-type-paragraph-xs-spacing, 0);font-weight:var(--sui-type-paragraph-xs-weight, 400);color:var(--sui-text-soft-400);flex-shrink:0}.sui-dropdown-item__description{font-size:var(--sui-type-paragraph-xs-size, 12px);line-height:var(--sui-type-paragraph-xs-line, 16px);letter-spacing:var(--sui-type-paragraph-xs-spacing, 0);font-weight:var(--sui-type-paragraph-xs-weight, 400);color:var(--sui-text-sub-600);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-dropdown-item__trailing{flex-shrink:0;display:inline-flex;align-items:center;gap:8px}.sui-dropdown-item__trailing:empty{display:none}.sui-dropdown-item__shortcut{display:inline-flex;align-items:center;padding:2px 6px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-4, 4px);font-family:var(--sui-font-sans);font-size:12px;line-height:16px;font-weight:500;color:var(--sui-text-sub-600);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;flex-shrink:0}:host([data-sui-mode=option][data-sui-selected]){background:var(--sui-primary-alpha-10)}:host([data-sui-mode=option][data-sui-selected]) .sui-dropdown-item__label,:host([data-sui-mode=option][data-sui-selected]) .sui-dropdown-item__sublabel,:host([data-sui-mode=option][data-sui-selected]) .sui-dropdown-item__check{color:var(--sui-primary-base)}:host([data-sui-mode=option][data-sui-selected]):hover{background:var(--sui-primary-alpha-16)}.sui-dropdown-item__check{width:20px;height:20px;flex-shrink:0;color:var(--sui-primary-base)}:host([data-sui-highlighted]:not([data-sui-selected])){background:var(--sui-bg-weak-50)}:host([data-sui-disabled]){cursor:not-allowed;pointer-events:none}:host([data-sui-disabled]) .sui-dropdown-item__label,:host([data-sui-disabled]) .sui-dropdown-item__sublabel,:host([data-sui-disabled]) .sui-dropdown-item__description{color:var(--sui-text-disabled-300)}:host([data-sui-disabled]) .sui-dropdown-item__leading{color:var(--sui-icon-disabled-300, #d1d1d1)}:host([data-sui-disabled]) .sui-dropdown-item__leading>:not(sui-icon){opacity:.48}:host([data-sui-disabled]):hover{background:var(--sui-bg-white-0)}\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: SuiDropdownItem, isStandalone: true, selector: "sui-dropdown-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, leadingFramed: { classPropertyName: "leadingFramed", publicName: "leadingFramed", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, highlighted: { classPropertyName: "highlighted", publicName: "highlighted", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, shortcut: { classPropertyName: "shortcut", publicName: "shortcut", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { listeners: { "click": "onClick($event)", "keydown.enter": "onClick($event)", "keydown.space": "onClick($event)", "touchstart": "$event.currentTarget", "touchend": "$any($event.currentTarget).blur()" }, properties: { "attr.role": "mode() === \"option\" ? \"option\" : \"menuitem\"", "attr.data-sui-mode": "mode()", "attr.data-sui-size": "size()", "attr.data-sui-framed": "leadingFramed() ? \"\" : null", "attr.data-sui-selected": "selected() ? \"\" : null", "attr.data-sui-highlighted": "highlighted() ? \"\" : null", "attr.data-sui-disabled": "disabled() ? \"\" : null", "attr.aria-selected": "mode() === \"option\" ? (selected() ? \"true\" : \"false\") : null", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.tabindex": "disabled() ? \"-1\" : \"0\"" } }, ngImport: i0, template: "<div class=\"sui-dropdown-item__leading\">\n  <ng-content select=\"[slot=leading]\" />\n</div>\n\n<div class=\"sui-dropdown-item__text\">\n  <span class=\"sui-dropdown-item__label\">{{ label() }}</span>\n  @if (hasSublabel()) {\n    <span class=\"sui-dropdown-item__sublabel\">{{ sublabel() }}</span>\n  }\n  @if (hasDescription()) {\n    <span class=\"sui-dropdown-item__description\">{{ description() }}</span>\n  }\n</div>\n\n<div class=\"sui-dropdown-item__trailing\">\n  <!-- Canon trailing-slot (Figma 405:6432): el consumer proyecta en este orden DOM\n       fijo \u2192 badge primero, luego shortcut (provisto por el input shortcut() abajo),\n       luego toggle/button al final. El gap del flex (8px) los separa.\n       Pill button (variante Large): bg primary-alpha-10, p-6, radius-8, label primary\n       Inter Medium 14/20. Link button (variante Small): texto primary sin bg.\n       El componente no fija sublots \u2014 el orden lo controla el consumer seg\u00FAn este\n       patr\u00F3n para mantener consistencia visual vs Figma. -->\n  <ng-content select=\"[slot=trailing]\" />\n  @if (shortcut()) {\n    <span class=\"sui-dropdown-item__shortcut\">{{ shortcut() }}</span>\n  }\n  @if (showCheck()) {\n    <!-- Check icon autom\u00E1tico en mode='option' cuando selected=true.\n         Remixicon check-line (ri-check-line) v\u00EDa sui-icon \u2014 mismo glyph que\n         el resto del proyecto, color heredado de .sui-dropdown-item__check. -->\n    <sui-icon class=\"sui-dropdown-item__check\" name=\"check-line\" [size]=\"20\" />\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:8px;padding:8px;background:var(--sui-bg-white-0);border-radius:var(--sui-radius-8, 8px);cursor:pointer;outline:none;width:100%;box-sizing:border-box;font-family:var(--sui-font-sans);transition:background .1s ease-out,box-shadow .1s ease-out;-webkit-user-select:none;user-select:none}:host:hover{background:var(--sui-bg-weak-50)}:host:active:not([data-sui-disabled]),:host:focus-visible{box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-size=small]){min-height:36px;padding:8px;gap:8px}:host([data-sui-size=large]){min-height:56px;padding:6px 8px;gap:12px;border-radius:var(--sui-radius-10, 10px)}:host([data-sui-size=large]) .sui-dropdown-item__text{flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-size=large]) .sui-dropdown-item__label{font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em);font-weight:var(--sui-type-label-md-weight, 500)}:host([data-sui-size=xlarge]){min-height:76px;padding:8px;gap:16px;border-radius:var(--sui-radius-12, 12px)}:host([data-sui-size=xlarge]) .sui-dropdown-item__text{flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-size=xlarge]) .sui-dropdown-item__label{font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em);font-weight:var(--sui-type-label-md-weight, 500)}:host([data-sui-size=xlarge]) .sui-dropdown-item__description{font-size:var(--sui-type-paragraph-sm-size, 14px);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em)}.sui-dropdown-item__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}.sui-dropdown-item__leading:empty{display:none}:host([data-sui-size=large][data-sui-framed]) .sui-dropdown-item__leading,:host([data-sui-size=xlarge][data-sui-framed]) .sui-dropdown-item__leading{padding:10px;border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-full, 999px);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));box-sizing:border-box}:host([data-sui-size=xlarge][data-sui-framed]) .sui-dropdown-item__leading{padding:12px}.sui-dropdown-item__text{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:4px;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-dropdown-item__label{font-size:var(--sui-type-paragraph-sm-size, 14px);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);font-weight:var(--sui-type-paragraph-sm-weight, 400);color:var(--sui-text-strong-950);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-dropdown-item__sublabel{font-size:var(--sui-type-paragraph-xs-size, 12px);line-height:var(--sui-type-paragraph-xs-line, 16px);letter-spacing:var(--sui-type-paragraph-xs-spacing, 0);font-weight:var(--sui-type-paragraph-xs-weight, 400);color:var(--sui-text-soft-400);flex-shrink:0}.sui-dropdown-item__description{font-size:var(--sui-type-paragraph-xs-size, 12px);line-height:var(--sui-type-paragraph-xs-line, 16px);letter-spacing:var(--sui-type-paragraph-xs-spacing, 0);font-weight:var(--sui-type-paragraph-xs-weight, 400);color:var(--sui-text-sub-600);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-dropdown-item__trailing{flex-shrink:0;display:inline-flex;align-items:center;gap:8px}.sui-dropdown-item__trailing:empty{display:none}.sui-dropdown-item__shortcut{display:inline-flex;align-items:center;padding:2px 6px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-4, 4px);font-family:var(--sui-font-sans);font-size:12px;line-height:16px;font-weight:500;color:var(--sui-text-sub-600);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;flex-shrink:0}:host([data-sui-mode=option][data-sui-selected]){background:var(--sui-primary-alpha-10)}:host([data-sui-mode=option][data-sui-selected]) .sui-dropdown-item__label,:host([data-sui-mode=option][data-sui-selected]) .sui-dropdown-item__sublabel,:host([data-sui-mode=option][data-sui-selected]) .sui-dropdown-item__check{color:var(--sui-primary-base)}:host([data-sui-mode=option][data-sui-selected]):hover{background:var(--sui-primary-alpha-16)}.sui-dropdown-item__check{width:20px;height:20px;flex-shrink:0;color:var(--sui-primary-base)}:host([data-sui-highlighted]:not([data-sui-selected])){background:var(--sui-bg-weak-50)}:host([data-sui-disabled]){cursor:not-allowed;pointer-events:none}:host([data-sui-disabled]) .sui-dropdown-item__label,:host([data-sui-disabled]) .sui-dropdown-item__sublabel,:host([data-sui-disabled]) .sui-dropdown-item__description{color:var(--sui-text-disabled-300)}:host([data-sui-disabled]) .sui-dropdown-item__leading{color:var(--sui-icon-disabled-300, #d1d1d1)}:host([data-sui-disabled]) .sui-dropdown-item__leading>:not(sui-icon){opacity:.48}:host([data-sui-disabled]):hover{background:var(--sui-bg-white-0)}\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: SuiDropdownItem, decorators: [{
             type: Component,
@@ -5165,7 +5165,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '(keydown.space)': 'onClick($event)',
                         '(touchstart)': '$event.currentTarget',
                         '(touchend)': '$any($event.currentTarget).blur()',
-                    }, template: "<div class=\"sui-dropdown-item__leading\">\n  <ng-content select=\"[slot=leading]\" />\n</div>\n\n<div class=\"sui-dropdown-item__text\">\n  <span class=\"sui-dropdown-item__label\">{{ label() }}</span>\n  @if (hasSublabel()) {\n    <span class=\"sui-dropdown-item__sublabel\">{{ sublabel() }}</span>\n  }\n  @if (hasDescription()) {\n    <span class=\"sui-dropdown-item__description\">{{ description() }}</span>\n  }\n</div>\n\n<div class=\"sui-dropdown-item__trailing\">\n  <!-- Canon trailing-slot (Figma 405:6432): el consumer proyecta en este orden DOM\n       fijo \u2192 badge primero, luego shortcut (provisto por el input shortcut() abajo),\n       luego toggle/button al final. El gap del flex (8px) los separa.\n       Pill button (variante Large): bg primary-alpha-10, p-6, radius-8, label primary\n       Inter Medium 14/20. Link button (variante Small): texto primary sin bg.\n       El componente no fija sublots \u2014 el orden lo controla el consumer seg\u00FAn este\n       patr\u00F3n para mantener consistencia visual vs Figma. -->\n  <ng-content select=\"[slot=trailing]\" />\n  @if (shortcut()) {\n    <span class=\"sui-dropdown-item__shortcut\">{{ shortcut() }}</span>\n  }\n  @if (showCheck()) {\n    <!-- Check icon autom\u00E1tico en mode='option' cuando selected=true.\n         Remixicon check-line (ri-check-line) v\u00EDa sui-icon \u2014 mismo glyph que\n         el resto del proyecto, color heredado de .sui-dropdown-item__check. -->\n    <sui-icon class=\"sui-dropdown-item__check\" name=\"check-line\" [size]=\"20\" />\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:8px;padding:8px;background:var(--sui-bg-white-0);border-radius:var(--sui-radius-8, 8px);cursor:pointer;outline:none;width:100%;box-sizing:border-box;font-family:var(--sui-font-sans);transition:background .1s ease-out,box-shadow .1s ease-out;-webkit-user-select:none;user-select:none}:host:hover{background:var(--sui-bg-weak-50)}:host:active:not([data-sui-disabled]),:host:focus-visible{box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-size=small]){min-height:36px;padding:8px;gap:8px}:host([data-sui-size=large]){min-height:56px;padding:8px;gap:12px;border-radius:var(--sui-radius-10, 10px)}:host([data-sui-size=large]) .sui-dropdown-item__text{flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-size=large]) .sui-dropdown-item__label{font-weight:var(--sui-type-label-sm-weight, 500)}:host([data-sui-size=xlarge]){min-height:76px;padding:8px;gap:16px;border-radius:var(--sui-radius-12, 12px)}:host([data-sui-size=xlarge]) .sui-dropdown-item__text{flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-size=xlarge]) .sui-dropdown-item__label{font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em);font-weight:var(--sui-type-label-md-weight, 500)}:host([data-sui-size=xlarge]) .sui-dropdown-item__description{font-size:var(--sui-type-paragraph-sm-size, 14px);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em)}.sui-dropdown-item__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}.sui-dropdown-item__leading:empty{display:none}:host([data-sui-size=large][data-sui-framed]) .sui-dropdown-item__leading,:host([data-sui-size=xlarge][data-sui-framed]) .sui-dropdown-item__leading{padding:10px;border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-full, 999px);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));box-sizing:border-box}:host([data-sui-size=xlarge][data-sui-framed]) .sui-dropdown-item__leading{padding:12px}.sui-dropdown-item__text{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:4px;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-dropdown-item__label{font-size:var(--sui-type-paragraph-sm-size, 14px);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);font-weight:var(--sui-type-paragraph-sm-weight, 400);color:var(--sui-text-strong-950);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-dropdown-item__sublabel{font-size:var(--sui-type-paragraph-xs-size, 12px);line-height:var(--sui-type-paragraph-xs-line, 16px);letter-spacing:var(--sui-type-paragraph-xs-spacing, 0);font-weight:var(--sui-type-paragraph-xs-weight, 400);color:var(--sui-text-soft-400);flex-shrink:0}.sui-dropdown-item__description{font-size:var(--sui-type-paragraph-xs-size, 12px);line-height:var(--sui-type-paragraph-xs-line, 16px);letter-spacing:var(--sui-type-paragraph-xs-spacing, 0);font-weight:var(--sui-type-paragraph-xs-weight, 400);color:var(--sui-text-sub-600);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-dropdown-item__trailing{flex-shrink:0;display:inline-flex;align-items:center;gap:8px}.sui-dropdown-item__trailing:empty{display:none}.sui-dropdown-item__shortcut{display:inline-flex;align-items:center;padding:2px 6px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-4, 4px);font-family:var(--sui-font-sans);font-size:12px;line-height:16px;font-weight:500;color:var(--sui-text-sub-600);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;flex-shrink:0}:host([data-sui-mode=option][data-sui-selected]){background:var(--sui-primary-alpha-10)}:host([data-sui-mode=option][data-sui-selected]) .sui-dropdown-item__label,:host([data-sui-mode=option][data-sui-selected]) .sui-dropdown-item__sublabel,:host([data-sui-mode=option][data-sui-selected]) .sui-dropdown-item__check{color:var(--sui-primary-base)}:host([data-sui-mode=option][data-sui-selected]):hover{background:var(--sui-primary-alpha-16)}.sui-dropdown-item__check{width:20px;height:20px;flex-shrink:0;color:var(--sui-primary-base)}:host([data-sui-highlighted]:not([data-sui-selected])){background:var(--sui-bg-weak-50)}:host([data-sui-disabled]){cursor:not-allowed;pointer-events:none}:host([data-sui-disabled]) .sui-dropdown-item__label,:host([data-sui-disabled]) .sui-dropdown-item__sublabel,:host([data-sui-disabled]) .sui-dropdown-item__description{color:var(--sui-text-disabled-300)}:host([data-sui-disabled]) .sui-dropdown-item__leading{color:var(--sui-icon-disabled-300, #d1d1d1)}:host([data-sui-disabled]) .sui-dropdown-item__leading>:not(sui-icon){opacity:.48}:host([data-sui-disabled]):hover{background:var(--sui-bg-white-0)}\n"] }]
+                    }, template: "<div class=\"sui-dropdown-item__leading\">\n  <ng-content select=\"[slot=leading]\" />\n</div>\n\n<div class=\"sui-dropdown-item__text\">\n  <span class=\"sui-dropdown-item__label\">{{ label() }}</span>\n  @if (hasSublabel()) {\n    <span class=\"sui-dropdown-item__sublabel\">{{ sublabel() }}</span>\n  }\n  @if (hasDescription()) {\n    <span class=\"sui-dropdown-item__description\">{{ description() }}</span>\n  }\n</div>\n\n<div class=\"sui-dropdown-item__trailing\">\n  <!-- Canon trailing-slot (Figma 405:6432): el consumer proyecta en este orden DOM\n       fijo \u2192 badge primero, luego shortcut (provisto por el input shortcut() abajo),\n       luego toggle/button al final. El gap del flex (8px) los separa.\n       Pill button (variante Large): bg primary-alpha-10, p-6, radius-8, label primary\n       Inter Medium 14/20. Link button (variante Small): texto primary sin bg.\n       El componente no fija sublots \u2014 el orden lo controla el consumer seg\u00FAn este\n       patr\u00F3n para mantener consistencia visual vs Figma. -->\n  <ng-content select=\"[slot=trailing]\" />\n  @if (shortcut()) {\n    <span class=\"sui-dropdown-item__shortcut\">{{ shortcut() }}</span>\n  }\n  @if (showCheck()) {\n    <!-- Check icon autom\u00E1tico en mode='option' cuando selected=true.\n         Remixicon check-line (ri-check-line) v\u00EDa sui-icon \u2014 mismo glyph que\n         el resto del proyecto, color heredado de .sui-dropdown-item__check. -->\n    <sui-icon class=\"sui-dropdown-item__check\" name=\"check-line\" [size]=\"20\" />\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:8px;padding:8px;background:var(--sui-bg-white-0);border-radius:var(--sui-radius-8, 8px);cursor:pointer;outline:none;width:100%;box-sizing:border-box;font-family:var(--sui-font-sans);transition:background .1s ease-out,box-shadow .1s ease-out;-webkit-user-select:none;user-select:none}:host:hover{background:var(--sui-bg-weak-50)}:host:active:not([data-sui-disabled]),:host:focus-visible{box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-size=small]){min-height:36px;padding:8px;gap:8px}:host([data-sui-size=large]){min-height:56px;padding:6px 8px;gap:12px;border-radius:var(--sui-radius-10, 10px)}:host([data-sui-size=large]) .sui-dropdown-item__text{flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-size=large]) .sui-dropdown-item__label{font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em);font-weight:var(--sui-type-label-md-weight, 500)}:host([data-sui-size=xlarge]){min-height:76px;padding:8px;gap:16px;border-radius:var(--sui-radius-12, 12px)}:host([data-sui-size=xlarge]) .sui-dropdown-item__text{flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-size=xlarge]) .sui-dropdown-item__label{font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em);font-weight:var(--sui-type-label-md-weight, 500)}:host([data-sui-size=xlarge]) .sui-dropdown-item__description{font-size:var(--sui-type-paragraph-sm-size, 14px);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em)}.sui-dropdown-item__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}.sui-dropdown-item__leading:empty{display:none}:host([data-sui-size=large][data-sui-framed]) .sui-dropdown-item__leading,:host([data-sui-size=xlarge][data-sui-framed]) .sui-dropdown-item__leading{padding:10px;border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-full, 999px);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));box-sizing:border-box}:host([data-sui-size=xlarge][data-sui-framed]) .sui-dropdown-item__leading{padding:12px}.sui-dropdown-item__text{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:4px;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-dropdown-item__label{font-size:var(--sui-type-paragraph-sm-size, 14px);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);font-weight:var(--sui-type-paragraph-sm-weight, 400);color:var(--sui-text-strong-950);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-dropdown-item__sublabel{font-size:var(--sui-type-paragraph-xs-size, 12px);line-height:var(--sui-type-paragraph-xs-line, 16px);letter-spacing:var(--sui-type-paragraph-xs-spacing, 0);font-weight:var(--sui-type-paragraph-xs-weight, 400);color:var(--sui-text-soft-400);flex-shrink:0}.sui-dropdown-item__description{font-size:var(--sui-type-paragraph-xs-size, 12px);line-height:var(--sui-type-paragraph-xs-line, 16px);letter-spacing:var(--sui-type-paragraph-xs-spacing, 0);font-weight:var(--sui-type-paragraph-xs-weight, 400);color:var(--sui-text-sub-600);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-dropdown-item__trailing{flex-shrink:0;display:inline-flex;align-items:center;gap:8px}.sui-dropdown-item__trailing:empty{display:none}.sui-dropdown-item__shortcut{display:inline-flex;align-items:center;padding:2px 6px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-4, 4px);font-family:var(--sui-font-sans);font-size:12px;line-height:16px;font-weight:500;color:var(--sui-text-sub-600);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;flex-shrink:0}:host([data-sui-mode=option][data-sui-selected]){background:var(--sui-primary-alpha-10)}:host([data-sui-mode=option][data-sui-selected]) .sui-dropdown-item__label,:host([data-sui-mode=option][data-sui-selected]) .sui-dropdown-item__sublabel,:host([data-sui-mode=option][data-sui-selected]) .sui-dropdown-item__check{color:var(--sui-primary-base)}:host([data-sui-mode=option][data-sui-selected]):hover{background:var(--sui-primary-alpha-16)}.sui-dropdown-item__check{width:20px;height:20px;flex-shrink:0;color:var(--sui-primary-base)}:host([data-sui-highlighted]:not([data-sui-selected])){background:var(--sui-bg-weak-50)}:host([data-sui-disabled]){cursor:not-allowed;pointer-events:none}:host([data-sui-disabled]) .sui-dropdown-item__label,:host([data-sui-disabled]) .sui-dropdown-item__sublabel,:host([data-sui-disabled]) .sui-dropdown-item__description{color:var(--sui-text-disabled-300)}:host([data-sui-disabled]) .sui-dropdown-item__leading{color:var(--sui-icon-disabled-300, #d1d1d1)}:host([data-sui-disabled]) .sui-dropdown-item__leading>:not(sui-icon){opacity:.48}:host([data-sui-disabled]):hover{background:var(--sui-bg-white-0)}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], leadingFramed: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingFramed", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], highlighted: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlighted", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], shortcut: [{ type: i0.Input, args: [{ isSignal: true, alias: "shortcut", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
 class SuiCompactSelectForInput {
@@ -5258,7 +5258,7 @@ class SuiCompactSelectForInput {
                 useExisting: forwardRef(() => SuiCompactSelectForInput),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "_menu", first: true, predicate: SuiDropdownMenu, descendants: true, isSignal: true }], ngImport: i0, template: "@if (country() && displayFlag()) {\n  <sui-flag\n    class=\"sui-compact-select-for-input__flag\"\n    [name]=\"displayFlag()!\"\n    [size]=\"flagSizePx() === 16 ? 'xs' : 'sm'\"\n  />\n}\n\n<div class=\"sui-compact-select-for-input__inner\">\n  <span class=\"sui-compact-select-for-input__value\">{{ displayValue() }}</span>\n  <sui-icon class=\"sui-compact-select-for-input__arrow\" [name]=\"arrowIcon()\" [size]=\"20\" />\n</div>\n\n@if (items().length > 0) {\n  <sui-dropdown-menu\n    [origin]=\"hostEl\"\n    [disabled]=\"mergedDisabled()\"\n    [matchWidth]=\"true\"\n    [minWidth]=\"200\"\n    panelClass=\"sui-compact-select__overlay-pane\"\n    (openedChange)=\"onMenuOpenedChange($event)\"\n  >\n    <ng-template suiDropdownPanel>\n      <div class=\"sui-compact-select-for-input__menu\" [class.sui-compact-select-for-input__menu--large]=\"size() === 'large'\">\n        @for (item of items(); track item.value) {\n          <sui-dropdown-item\n            mode=\"option\"\n            [label]=\"item.label\"\n            [sublabel]=\"item.sublabel ?? ''\"\n            [selected]=\"item.value === selected()?.value\"\n            [disabled]=\"item.disabled ?? false\"\n            (click)=\"selectItem(item)\"\n          >\n            @if (item.flag) {\n              <sui-flag slot=\"leading\" [name]=\"item.flag\" size=\"sm\" />\n            }\n          </sui-dropdown-item>\n        }\n      </div>\n    </ng-template>\n  </sui-dropdown-menu>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;flex-shrink:0;box-sizing:border-box;background:var(--sui-bg-white-0, #fff);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;vertical-align:middle;transition:background-color .1s ease;font-family:var(--sui-font-sans, sans-serif);font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}:host([data-sui-size=medium]){padding:9px 8px 9px 10px;gap:8px}:host([data-sui-size=small]){padding:7px 8px;gap:8px}:host([data-sui-size=xsmall]){padding:5px 6px 5px 8px;gap:6px}:host([data-sui-size=large]){padding:13px 10px 13px 12px;gap:8px}.sui-compact-select-for-input__menu--large sui-dropdown-item{min-height:44px;padding:12px 8px}@media(max-width:767px){.sui-compact-select-for-input__menu sui-dropdown-item{min-height:44px;padding:12px 8px}}:host(:hover:not([data-sui-disabled])){background:var(--sui-bg-weak-50, #f7f7f7)}:host(:focus:not([data-sui-disabled])),:host([data-sui-open]:not([data-sui-disabled])){outline:none;background:var(--sui-bg-white-0, #fff)}:host([data-sui-disabled]){background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-disabled-300, #d1d1d1);cursor:not-allowed;pointer-events:none}:host([data-sui-disabled]) .sui-compact-select-for-input__flag{opacity:.48}:host([data-sui-disabled]) .sui-compact-select-for-input__arrow{color:var(--sui-text-disabled-300, #d1d1d1)}.sui-compact-select-for-input__flag{flex-shrink:0}.sui-compact-select-for-input__inner{display:inline-flex;align-items:center;gap:var(--sui-spacing-2, 2px);flex-shrink:0}.sui-compact-select-for-input__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-compact-select-for-input__arrow{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-compact-select-for-input__menu{display:flex;flex-direction:column;gap:4px}\n"], dependencies: [{ 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: SuiDropdownItem, selector: "sui-dropdown-item", inputs: ["label", "sublabel", "description", "size", "leadingFramed", "mode", "selected", "highlighted", "disabled", "shortcut"], outputs: ["clicked"] }, { 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]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "_menu", first: true, predicate: SuiDropdownMenu, descendants: true, isSignal: true }], ngImport: i0, template: "@if (country() && displayFlag()) {\n  <sui-flag\n    class=\"sui-compact-select-for-input__flag\"\n    [name]=\"displayFlag()!\"\n    [size]=\"flagSizePx() === 16 ? 'xs' : 'sm'\"\n  />\n}\n\n<div class=\"sui-compact-select-for-input__inner\">\n  <span class=\"sui-compact-select-for-input__value\">{{ displayValue() }}</span>\n  <sui-icon class=\"sui-compact-select-for-input__arrow\" [name]=\"arrowIcon()\" [size]=\"20\" />\n</div>\n\n@if (items().length > 0) {\n  <sui-dropdown-menu\n    [origin]=\"hostEl\"\n    [disabled]=\"mergedDisabled()\"\n    [matchWidth]=\"true\"\n    [minWidth]=\"200\"\n    panelClass=\"sui-compact-select__overlay-pane\"\n    (openedChange)=\"onMenuOpenedChange($event)\"\n  >\n    <ng-template suiDropdownPanel>\n      <div class=\"sui-compact-select-for-input__menu\" [class.sui-compact-select-for-input__menu--large]=\"size() === 'large'\">\n        @for (item of items(); track item.value) {\n          <sui-dropdown-item\n            mode=\"option\"\n            [label]=\"item.label\"\n            [sublabel]=\"item.sublabel ?? ''\"\n            [selected]=\"item.value === selected()?.value\"\n            [disabled]=\"item.disabled ?? false\"\n            (click)=\"selectItem(item)\"\n          >\n            @if (item.flag) {\n              <sui-flag slot=\"leading\" [name]=\"item.flag\" size=\"sm\" />\n            }\n          </sui-dropdown-item>\n        }\n      </div>\n    </ng-template>\n  </sui-dropdown-menu>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;flex-shrink:0;box-sizing:border-box;background:var(--sui-bg-white-0, #fff);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;vertical-align:middle;transition:background-color .1s ease;font-family:var(--sui-font-sans, sans-serif);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);color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}:host([data-sui-size=medium]){padding:9px 8px 9px 10px;gap:8px}:host([data-sui-size=small]){padding:7px 8px;gap:8px}:host([data-sui-size=xsmall]){padding:5px 6px 5px 8px;gap:6px}:host([data-sui-size=large]){padding:11px 10px 11px 12px;gap:8px;font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}.sui-compact-select-for-input__menu--large sui-dropdown-item{min-height:44px;padding:10px 8px}.sui-compact-select-for-input__menu--large sui-dropdown-item ::ng-deep .sui-dropdown-item__label{font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}@media(max-width:767px){.sui-compact-select-for-input__menu:not(.sui-compact-select-for-input__menu--large) sui-dropdown-item{min-height:44px;padding:12px 8px}}:host(:hover:not([data-sui-disabled])){background:var(--sui-bg-weak-50, #f7f7f7)}:host(:focus:not([data-sui-disabled])),:host([data-sui-open]:not([data-sui-disabled])){outline:none;background:var(--sui-bg-white-0, #fff)}:host([data-sui-disabled]){background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-disabled-300, #d1d1d1);cursor:not-allowed;pointer-events:none}:host([data-sui-disabled]) .sui-compact-select-for-input__flag{opacity:.48}:host([data-sui-disabled]) .sui-compact-select-for-input__arrow{color:var(--sui-text-disabled-300, #d1d1d1)}.sui-compact-select-for-input__flag{flex-shrink:0}.sui-compact-select-for-input__inner{display:inline-flex;align-items:center;gap:var(--sui-spacing-2, 2px);flex-shrink:0}.sui-compact-select-for-input__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-compact-select-for-input__arrow{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-compact-select-for-input__menu{display:flex;flex-direction:column;gap:4px}\n"], dependencies: [{ 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: SuiDropdownItem, selector: "sui-dropdown-item", inputs: ["label", "sublabel", "description", "size", "leadingFramed", "mode", "selected", "highlighted", "disabled", "shortcut"], outputs: ["clicked"] }, { 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]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiCompactSelectForInput, decorators: [{
             type: Component,
@@ -5284,7 +5284,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '(click)': 'onHostClick($event)',
                         '(keydown.enter)': 'onHostClick($event)',
                         '(keydown.space)': 'onHostClick($event); $event.preventDefault()',
-                    }, template: "@if (country() && displayFlag()) {\n  <sui-flag\n    class=\"sui-compact-select-for-input__flag\"\n    [name]=\"displayFlag()!\"\n    [size]=\"flagSizePx() === 16 ? 'xs' : 'sm'\"\n  />\n}\n\n<div class=\"sui-compact-select-for-input__inner\">\n  <span class=\"sui-compact-select-for-input__value\">{{ displayValue() }}</span>\n  <sui-icon class=\"sui-compact-select-for-input__arrow\" [name]=\"arrowIcon()\" [size]=\"20\" />\n</div>\n\n@if (items().length > 0) {\n  <sui-dropdown-menu\n    [origin]=\"hostEl\"\n    [disabled]=\"mergedDisabled()\"\n    [matchWidth]=\"true\"\n    [minWidth]=\"200\"\n    panelClass=\"sui-compact-select__overlay-pane\"\n    (openedChange)=\"onMenuOpenedChange($event)\"\n  >\n    <ng-template suiDropdownPanel>\n      <div class=\"sui-compact-select-for-input__menu\" [class.sui-compact-select-for-input__menu--large]=\"size() === 'large'\">\n        @for (item of items(); track item.value) {\n          <sui-dropdown-item\n            mode=\"option\"\n            [label]=\"item.label\"\n            [sublabel]=\"item.sublabel ?? ''\"\n            [selected]=\"item.value === selected()?.value\"\n            [disabled]=\"item.disabled ?? false\"\n            (click)=\"selectItem(item)\"\n          >\n            @if (item.flag) {\n              <sui-flag slot=\"leading\" [name]=\"item.flag\" size=\"sm\" />\n            }\n          </sui-dropdown-item>\n        }\n      </div>\n    </ng-template>\n  </sui-dropdown-menu>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;flex-shrink:0;box-sizing:border-box;background:var(--sui-bg-white-0, #fff);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;vertical-align:middle;transition:background-color .1s ease;font-family:var(--sui-font-sans, sans-serif);font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}:host([data-sui-size=medium]){padding:9px 8px 9px 10px;gap:8px}:host([data-sui-size=small]){padding:7px 8px;gap:8px}:host([data-sui-size=xsmall]){padding:5px 6px 5px 8px;gap:6px}:host([data-sui-size=large]){padding:13px 10px 13px 12px;gap:8px}.sui-compact-select-for-input__menu--large sui-dropdown-item{min-height:44px;padding:12px 8px}@media(max-width:767px){.sui-compact-select-for-input__menu sui-dropdown-item{min-height:44px;padding:12px 8px}}:host(:hover:not([data-sui-disabled])){background:var(--sui-bg-weak-50, #f7f7f7)}:host(:focus:not([data-sui-disabled])),:host([data-sui-open]:not([data-sui-disabled])){outline:none;background:var(--sui-bg-white-0, #fff)}:host([data-sui-disabled]){background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-disabled-300, #d1d1d1);cursor:not-allowed;pointer-events:none}:host([data-sui-disabled]) .sui-compact-select-for-input__flag{opacity:.48}:host([data-sui-disabled]) .sui-compact-select-for-input__arrow{color:var(--sui-text-disabled-300, #d1d1d1)}.sui-compact-select-for-input__flag{flex-shrink:0}.sui-compact-select-for-input__inner{display:inline-flex;align-items:center;gap:var(--sui-spacing-2, 2px);flex-shrink:0}.sui-compact-select-for-input__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-compact-select-for-input__arrow{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-compact-select-for-input__menu{display:flex;flex-direction:column;gap:4px}\n"] }]
+                    }, template: "@if (country() && displayFlag()) {\n  <sui-flag\n    class=\"sui-compact-select-for-input__flag\"\n    [name]=\"displayFlag()!\"\n    [size]=\"flagSizePx() === 16 ? 'xs' : 'sm'\"\n  />\n}\n\n<div class=\"sui-compact-select-for-input__inner\">\n  <span class=\"sui-compact-select-for-input__value\">{{ displayValue() }}</span>\n  <sui-icon class=\"sui-compact-select-for-input__arrow\" [name]=\"arrowIcon()\" [size]=\"20\" />\n</div>\n\n@if (items().length > 0) {\n  <sui-dropdown-menu\n    [origin]=\"hostEl\"\n    [disabled]=\"mergedDisabled()\"\n    [matchWidth]=\"true\"\n    [minWidth]=\"200\"\n    panelClass=\"sui-compact-select__overlay-pane\"\n    (openedChange)=\"onMenuOpenedChange($event)\"\n  >\n    <ng-template suiDropdownPanel>\n      <div class=\"sui-compact-select-for-input__menu\" [class.sui-compact-select-for-input__menu--large]=\"size() === 'large'\">\n        @for (item of items(); track item.value) {\n          <sui-dropdown-item\n            mode=\"option\"\n            [label]=\"item.label\"\n            [sublabel]=\"item.sublabel ?? ''\"\n            [selected]=\"item.value === selected()?.value\"\n            [disabled]=\"item.disabled ?? false\"\n            (click)=\"selectItem(item)\"\n          >\n            @if (item.flag) {\n              <sui-flag slot=\"leading\" [name]=\"item.flag\" size=\"sm\" />\n            }\n          </sui-dropdown-item>\n        }\n      </div>\n    </ng-template>\n  </sui-dropdown-menu>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;flex-shrink:0;box-sizing:border-box;background:var(--sui-bg-white-0, #fff);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;vertical-align:middle;transition:background-color .1s ease;font-family:var(--sui-font-sans, sans-serif);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);color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}:host([data-sui-size=medium]){padding:9px 8px 9px 10px;gap:8px}:host([data-sui-size=small]){padding:7px 8px;gap:8px}:host([data-sui-size=xsmall]){padding:5px 6px 5px 8px;gap:6px}:host([data-sui-size=large]){padding:11px 10px 11px 12px;gap:8px;font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}.sui-compact-select-for-input__menu--large sui-dropdown-item{min-height:44px;padding:10px 8px}.sui-compact-select-for-input__menu--large sui-dropdown-item ::ng-deep .sui-dropdown-item__label{font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}@media(max-width:767px){.sui-compact-select-for-input__menu:not(.sui-compact-select-for-input__menu--large) sui-dropdown-item{min-height:44px;padding:12px 8px}}:host(:hover:not([data-sui-disabled])){background:var(--sui-bg-weak-50, #f7f7f7)}:host(:focus:not([data-sui-disabled])),:host([data-sui-open]:not([data-sui-disabled])){outline:none;background:var(--sui-bg-white-0, #fff)}:host([data-sui-disabled]){background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-disabled-300, #d1d1d1);cursor:not-allowed;pointer-events:none}:host([data-sui-disabled]) .sui-compact-select-for-input__flag{opacity:.48}:host([data-sui-disabled]) .sui-compact-select-for-input__arrow{color:var(--sui-text-disabled-300, #d1d1d1)}.sui-compact-select-for-input__flag{flex-shrink:0}.sui-compact-select-for-input__inner{display:inline-flex;align-items:center;gap:var(--sui-spacing-2, 2px);flex-shrink:0}.sui-compact-select-for-input__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-compact-select-for-input__arrow{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-compact-select-for-input__menu{display:flex;flex-direction:column;gap:4px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], country: [{ type: i0.Input, args: [{ isSignal: true, alias: "country", required: false }] }], flag: [{ type: i0.Input, args: [{ isSignal: true, alias: "flag", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], _menu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SuiDropdownMenu), { isSignal: true }] }] } });
 
 class SuiCompactSelect {
@@ -5415,7 +5415,7 @@ class SuiCompactSelect {
                 useExisting: forwardRef(() => SuiCompactSelect),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "_menu", first: true, predicate: SuiDropdownMenu, descendants: true, isSignal: true }, { propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n  Trigger DIV interno \u2014 patr\u00F3n canon sui-select. La interacci\u00F3n\n  (click/keyboard/role/aria/tabindex) y el anclaje del overlay viven ac\u00E1, NO\n  en el host. El host custom-element NO debe colgar (click)+(touchend\u2192blur)\n  porque el blur() s\u00EDncrono en touchend cancela el click sint\u00E9tico de iOS\n  WebKit y el menu no abre. Moverlo a un div interno sin touch handlers\n  elimina la causa ra\u00EDz por equivalencia con sui-select (probado en iOS real).\n-->\n<div\n  #triggerEl\n  class=\"sui-compact-select__trigger\"\n  role=\"button\"\n  [attr.tabindex]=\"mergedDisabled() ? null : 0\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-haspopup]=\"'listbox'\"\n  [attr.aria-disabled]=\"mergedDisabled() ? '' : null\"\n  [class.sui-compact-select__trigger--open]=\"isOpen()\"\n  [class.sui-compact-select__trigger--error]=\"error()\"\n  [class.sui-compact-select__trigger--disabled]=\"mergedDisabled()\"\n  (click)=\"onTriggerClick($event)\"\n  (keydown.enter)=\"onTriggerClick($event)\"\n  (keydown.space)=\"onTriggerClick($event); $event.preventDefault()\"\n>\n  <!-- Leading slot seg\u00FAn type. Prioriza el selected item; sino usa el input est\u00E1tico. -->\n  @switch (type()) {\n    @case ('icon') {\n      @if (displayIcon()) {\n        <sui-icon class=\"sui-compact-select__leading\" [name]=\"displayIcon()!\" [size]=\"20\" />\n      }\n    }\n    @case ('country') {\n      @if (displayFlag()) {\n        <sui-flag class=\"sui-compact-select__leading\" [name]=\"displayFlag()!\" [size]=\"flagSize()\" />\n      }\n    }\n  }\n\n  <!-- Value / placeholder text (basic + country muestran texto; icon usualmente sin). -->\n  @if (type() !== 'icon') {\n    <span class=\"sui-compact-select__value\" [attr.data-sui-placeholder]=\"hasValue() ? null : ''\">\n      {{ hasValue() ? displayValue() : placeholder() }}\n    </span>\n  }\n\n  <!-- Trailing arrow. -->\n  <sui-icon class=\"sui-compact-select__arrow\" [name]=\"arrowIcon()\" [size]=\"20\" />\n</div>\n\n<!-- Overlay menu \u2014 delegado a sui-dropdown-menu. El trigger DIV interno es el\n     [origin]=triggerEl; el menu solo gestiona el panel.\n     Solo se renderea cuando hay items (mode 2). -->\n@if (items().length > 0) {\n  <sui-dropdown-menu\n    [origin]=\"triggerEl\"\n    [disabled]=\"mergedDisabled()\"\n    [minWidth]=\"200\"\n    panelClass=\"sui-compact-select__overlay-pane\"\n    (openedChange)=\"onMenuOpenedChange($event)\"\n  >\n    <ng-template suiDropdownPanel>\n      <div class=\"sui-compact-select__menu\" [class.sui-compact-select__menu--large]=\"size() === 'large'\">\n        @for (item of items(); track item.value) {\n          <sui-dropdown-item\n            mode=\"option\"\n            [label]=\"item.label\"\n            [sublabel]=\"item.sublabel ?? ''\"\n            [selected]=\"item.value === selected()?.value\"\n            [disabled]=\"item.disabled ?? false\"\n            (click)=\"selectItem(item)\"\n          >\n            @if (item.flag) {\n              <sui-flag slot=\"leading\" [name]=\"item.flag\" size=\"sm\" />\n            } @else if (item.icon) {\n              <sui-icon slot=\"leading\" [name]=\"item.icon\" [size]=\"20\" />\n            }\n          </sui-dropdown-item>\n        }\n      </div>\n    </ng-template>\n  </sui-dropdown-menu>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;flex-shrink:0;box-sizing:border-box;vertical-align:middle;font-family:var(--sui-font-sans, sans-serif)}.sui-compact-select__trigger{display:inline-flex;align-items:center;flex-shrink:0;box-sizing:border-box;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);box-shadow:0 1px 2px #0a0d1408;cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;transition:background-color .1s ease,border-color .1s ease,box-shadow .1s ease;font-family:var(--sui-font-sans, sans-serif);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);color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}:host([data-sui-size=medium]) .sui-compact-select__trigger{padding:9px 10px;gap:4px;border-radius:var(--sui-radius-10, 10px)}:host([data-sui-size=small]) .sui-compact-select__trigger{padding:7px 8px;gap:4px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-size=xsmall]) .sui-compact-select__trigger{padding:5px 6px;gap:2px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-type=basic][data-sui-size=medium]) .sui-compact-select__trigger{padding:9px 10px 9px 12px}:host([data-sui-type=basic][data-sui-size=small]) .sui-compact-select__trigger{padding:7px 8px 7px 12px}:host([data-sui-type=basic][data-sui-size=xsmall]) .sui-compact-select__trigger{padding:5px 6px 5px 10px}:host([data-sui-size=large]) .sui-compact-select__trigger{padding:13px 12px;gap:6px;border-radius:var(--sui-radius-12, 12px)}:host([data-sui-type=basic][data-sui-size=large]) .sui-compact-select__trigger{padding:13px 12px 13px 14px}.sui-compact-select__menu--large sui-dropdown-item{min-height:44px;padding:12px 8px}@media(max-width:767px){.sui-compact-select__menu sui-dropdown-item{min-height:44px;padding:12px 8px}}.sui-compact-select__trigger:not(.sui-compact-select__trigger--disabled):not(.sui-compact-select__trigger--error):not(.sui-compact-select__trigger--open):hover{background:var(--sui-bg-weak-50, #f7f7f7);border-color:transparent;box-shadow:none}.sui-compact-select__trigger:not(.sui-compact-select__trigger--disabled):focus-visible,.sui-compact-select__trigger--open:not(.sui-compact-select__trigger--disabled){outline:none;background:var(--sui-bg-white-0, #fff);border-color:var(--sui-stroke-strong-950, #171717);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px var(--sui-slate-alpha-16, rgba(153, 160, 174, .16))}.sui-compact-select__trigger--error:not(.sui-compact-select__trigger--disabled){border-color:var(--sui-state-error-base, #fb3748)}.sui-compact-select__trigger--error:not(.sui-compact-select__trigger--disabled):focus-visible,.sui-compact-select__trigger--error.sui-compact-select__trigger--open:not(.sui-compact-select__trigger--disabled){outline:none;border-color:var(--sui-state-error-base, #fb3748);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px var(--sui-red-alpha-16, rgba(251, 55, 72, .16))}.sui-compact-select__trigger--disabled{background:var(--sui-bg-weak-50, #f7f7f7);border-color:transparent;color:var(--sui-text-disabled-300, #d1d1d1);cursor:not-allowed;pointer-events:none;box-shadow:none}.sui-compact-select__trigger--disabled .sui-compact-select__leading{opacity:.48}.sui-compact-select__trigger--disabled .sui-compact-select__arrow{color:var(--sui-icon-disabled-300, #d1d1d1)}.sui-compact-select__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:var(--sui-text-sub-600, #5c5c5c)}:host([data-sui-filled]) .sui-compact-select__leading{color:var(--sui-icon-strong-950, #171717)}.sui-compact-select__value{flex:1 0 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.sui-compact-select__value[data-sui-placeholder]{color:var(--sui-text-sub-600, #5c5c5c)}.sui-compact-select__trigger--disabled .sui-compact-select__value[data-sui-placeholder]{color:var(--sui-text-disabled-300, #d1d1d1)}.sui-compact-select__arrow{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c);transition:transform .12s ease}\n"], dependencies: [{ 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: SuiDropdownItem, selector: "sui-dropdown-item", inputs: ["label", "sublabel", "description", "size", "leadingFramed", "mode", "selected", "highlighted", "disabled", "shortcut"], outputs: ["clicked"] }, { 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]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "_menu", first: true, predicate: SuiDropdownMenu, descendants: true, isSignal: true }, { propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n  Trigger DIV interno \u2014 patr\u00F3n canon sui-select. La interacci\u00F3n\n  (click/keyboard/role/aria/tabindex) y el anclaje del overlay viven ac\u00E1, NO\n  en el host. El host custom-element NO debe colgar (click)+(touchend\u2192blur)\n  porque el blur() s\u00EDncrono en touchend cancela el click sint\u00E9tico de iOS\n  WebKit y el menu no abre. Moverlo a un div interno sin touch handlers\n  elimina la causa ra\u00EDz por equivalencia con sui-select (probado en iOS real).\n-->\n<div\n  #triggerEl\n  class=\"sui-compact-select__trigger\"\n  role=\"button\"\n  [attr.tabindex]=\"mergedDisabled() ? null : 0\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-haspopup]=\"'listbox'\"\n  [attr.aria-disabled]=\"mergedDisabled() ? '' : null\"\n  [class.sui-compact-select__trigger--open]=\"isOpen()\"\n  [class.sui-compact-select__trigger--error]=\"error()\"\n  [class.sui-compact-select__trigger--disabled]=\"mergedDisabled()\"\n  (click)=\"onTriggerClick($event)\"\n  (keydown.enter)=\"onTriggerClick($event)\"\n  (keydown.space)=\"onTriggerClick($event); $event.preventDefault()\"\n>\n  <!-- Leading slot seg\u00FAn type. Prioriza el selected item; sino usa el input est\u00E1tico. -->\n  @switch (type()) {\n    @case ('icon') {\n      @if (displayIcon()) {\n        <sui-icon class=\"sui-compact-select__leading\" [name]=\"displayIcon()!\" [size]=\"20\" />\n      }\n    }\n    @case ('country') {\n      @if (displayFlag()) {\n        <sui-flag class=\"sui-compact-select__leading\" [name]=\"displayFlag()!\" [size]=\"flagSize()\" />\n      }\n    }\n  }\n\n  <!-- Value / placeholder text (basic + country muestran texto; icon usualmente sin). -->\n  @if (type() !== 'icon') {\n    <span class=\"sui-compact-select__value\" [attr.data-sui-placeholder]=\"hasValue() ? null : ''\">\n      {{ hasValue() ? displayValue() : placeholder() }}\n    </span>\n  }\n\n  <!-- Trailing arrow. -->\n  <sui-icon class=\"sui-compact-select__arrow\" [name]=\"arrowIcon()\" [size]=\"20\" />\n</div>\n\n<!-- Overlay menu \u2014 delegado a sui-dropdown-menu. El trigger DIV interno es el\n     [origin]=triggerEl; el menu solo gestiona el panel.\n     Solo se renderea cuando hay items (mode 2). -->\n@if (items().length > 0) {\n  <sui-dropdown-menu\n    [origin]=\"triggerEl\"\n    [disabled]=\"mergedDisabled()\"\n    [minWidth]=\"200\"\n    panelClass=\"sui-compact-select__overlay-pane\"\n    (openedChange)=\"onMenuOpenedChange($event)\"\n  >\n    <ng-template suiDropdownPanel>\n      <div class=\"sui-compact-select__menu\" [class.sui-compact-select__menu--large]=\"size() === 'large'\">\n        @for (item of items(); track item.value) {\n          <sui-dropdown-item\n            mode=\"option\"\n            [label]=\"item.label\"\n            [sublabel]=\"item.sublabel ?? ''\"\n            [selected]=\"item.value === selected()?.value\"\n            [disabled]=\"item.disabled ?? false\"\n            (click)=\"selectItem(item)\"\n          >\n            @if (item.flag) {\n              <sui-flag slot=\"leading\" [name]=\"item.flag\" size=\"sm\" />\n            } @else if (item.icon) {\n              <sui-icon slot=\"leading\" [name]=\"item.icon\" [size]=\"20\" />\n            }\n          </sui-dropdown-item>\n        }\n      </div>\n    </ng-template>\n  </sui-dropdown-menu>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;flex-shrink:0;box-sizing:border-box;vertical-align:middle;font-family:var(--sui-font-sans, sans-serif)}.sui-compact-select__trigger{display:inline-flex;align-items:center;flex-shrink:0;box-sizing:border-box;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);box-shadow:0 1px 2px #0a0d1408;cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;transition:background-color .1s ease,border-color .1s ease,box-shadow .1s ease;font-family:var(--sui-font-sans, sans-serif);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);color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}:host([data-sui-size=medium]) .sui-compact-select__trigger{padding:9px 10px;gap:4px;border-radius:var(--sui-radius-10, 10px)}:host([data-sui-size=small]) .sui-compact-select__trigger{padding:7px 8px;gap:4px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-size=xsmall]) .sui-compact-select__trigger{padding:5px 6px;gap:2px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-type=basic][data-sui-size=medium]) .sui-compact-select__trigger{padding:9px 10px 9px 12px}:host([data-sui-type=basic][data-sui-size=small]) .sui-compact-select__trigger{padding:7px 8px 7px 12px}:host([data-sui-type=basic][data-sui-size=xsmall]) .sui-compact-select__trigger{padding:5px 6px 5px 10px}:host([data-sui-size=large]) .sui-compact-select__trigger{padding:11px 12px;gap:6px;border-radius:var(--sui-radius-12, 12px);font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}:host([data-sui-type=basic][data-sui-size=large]) .sui-compact-select__trigger{padding:11px 12px 11px 14px}.sui-compact-select__menu--large sui-dropdown-item{min-height:44px;padding:10px 8px}.sui-compact-select__menu--large sui-dropdown-item ::ng-deep .sui-dropdown-item__label{font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}@media(max-width:767px){.sui-compact-select__menu:not(.sui-compact-select__menu--large) sui-dropdown-item{min-height:44px;padding:12px 8px}}.sui-compact-select__trigger:not(.sui-compact-select__trigger--disabled):not(.sui-compact-select__trigger--error):not(.sui-compact-select__trigger--open):hover{background:var(--sui-bg-weak-50, #f7f7f7);border-color:transparent;box-shadow:none}.sui-compact-select__trigger:not(.sui-compact-select__trigger--disabled):focus-visible,.sui-compact-select__trigger--open:not(.sui-compact-select__trigger--disabled){outline:none;background:var(--sui-bg-white-0, #fff);border-color:var(--sui-stroke-strong-950, #171717);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px var(--sui-slate-alpha-16, rgba(153, 160, 174, .16))}.sui-compact-select__trigger--error:not(.sui-compact-select__trigger--disabled){border-color:var(--sui-state-error-base, #fb3748)}.sui-compact-select__trigger--error:not(.sui-compact-select__trigger--disabled):focus-visible,.sui-compact-select__trigger--error.sui-compact-select__trigger--open:not(.sui-compact-select__trigger--disabled){outline:none;border-color:var(--sui-state-error-base, #fb3748);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px var(--sui-red-alpha-16, rgba(251, 55, 72, .16))}.sui-compact-select__trigger--disabled{background:var(--sui-bg-weak-50, #f7f7f7);border-color:transparent;color:var(--sui-text-disabled-300, #d1d1d1);cursor:not-allowed;pointer-events:none;box-shadow:none}.sui-compact-select__trigger--disabled .sui-compact-select__leading{opacity:.48}.sui-compact-select__trigger--disabled .sui-compact-select__arrow{color:var(--sui-icon-disabled-300, #d1d1d1)}.sui-compact-select__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:var(--sui-text-sub-600, #5c5c5c)}:host([data-sui-filled]) .sui-compact-select__leading{color:var(--sui-icon-strong-950, #171717)}.sui-compact-select__value{flex:1 0 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.sui-compact-select__value[data-sui-placeholder]{color:var(--sui-text-sub-600, #5c5c5c)}.sui-compact-select__trigger--disabled .sui-compact-select__value[data-sui-placeholder]{color:var(--sui-text-disabled-300, #d1d1d1)}.sui-compact-select__arrow{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c);transition:transform .12s ease}\n"], dependencies: [{ 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: SuiDropdownItem, selector: "sui-dropdown-item", inputs: ["label", "sublabel", "description", "size", "leadingFramed", "mode", "selected", "highlighted", "disabled", "shortcut"], outputs: ["clicked"] }, { 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]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiCompactSelect, decorators: [{
             type: Component,
@@ -5440,7 +5440,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[attr.data-sui-disabled]': 'mergedDisabled() ? "" : null',
                         '[attr.data-sui-open]': 'isOpen() ? "" : null',
                         '[attr.data-sui-filled]': 'hasValue() ? "" : null',
-                    }, template: "<!--\n  Trigger DIV interno \u2014 patr\u00F3n canon sui-select. La interacci\u00F3n\n  (click/keyboard/role/aria/tabindex) y el anclaje del overlay viven ac\u00E1, NO\n  en el host. El host custom-element NO debe colgar (click)+(touchend\u2192blur)\n  porque el blur() s\u00EDncrono en touchend cancela el click sint\u00E9tico de iOS\n  WebKit y el menu no abre. Moverlo a un div interno sin touch handlers\n  elimina la causa ra\u00EDz por equivalencia con sui-select (probado en iOS real).\n-->\n<div\n  #triggerEl\n  class=\"sui-compact-select__trigger\"\n  role=\"button\"\n  [attr.tabindex]=\"mergedDisabled() ? null : 0\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-haspopup]=\"'listbox'\"\n  [attr.aria-disabled]=\"mergedDisabled() ? '' : null\"\n  [class.sui-compact-select__trigger--open]=\"isOpen()\"\n  [class.sui-compact-select__trigger--error]=\"error()\"\n  [class.sui-compact-select__trigger--disabled]=\"mergedDisabled()\"\n  (click)=\"onTriggerClick($event)\"\n  (keydown.enter)=\"onTriggerClick($event)\"\n  (keydown.space)=\"onTriggerClick($event); $event.preventDefault()\"\n>\n  <!-- Leading slot seg\u00FAn type. Prioriza el selected item; sino usa el input est\u00E1tico. -->\n  @switch (type()) {\n    @case ('icon') {\n      @if (displayIcon()) {\n        <sui-icon class=\"sui-compact-select__leading\" [name]=\"displayIcon()!\" [size]=\"20\" />\n      }\n    }\n    @case ('country') {\n      @if (displayFlag()) {\n        <sui-flag class=\"sui-compact-select__leading\" [name]=\"displayFlag()!\" [size]=\"flagSize()\" />\n      }\n    }\n  }\n\n  <!-- Value / placeholder text (basic + country muestran texto; icon usualmente sin). -->\n  @if (type() !== 'icon') {\n    <span class=\"sui-compact-select__value\" [attr.data-sui-placeholder]=\"hasValue() ? null : ''\">\n      {{ hasValue() ? displayValue() : placeholder() }}\n    </span>\n  }\n\n  <!-- Trailing arrow. -->\n  <sui-icon class=\"sui-compact-select__arrow\" [name]=\"arrowIcon()\" [size]=\"20\" />\n</div>\n\n<!-- Overlay menu \u2014 delegado a sui-dropdown-menu. El trigger DIV interno es el\n     [origin]=triggerEl; el menu solo gestiona el panel.\n     Solo se renderea cuando hay items (mode 2). -->\n@if (items().length > 0) {\n  <sui-dropdown-menu\n    [origin]=\"triggerEl\"\n    [disabled]=\"mergedDisabled()\"\n    [minWidth]=\"200\"\n    panelClass=\"sui-compact-select__overlay-pane\"\n    (openedChange)=\"onMenuOpenedChange($event)\"\n  >\n    <ng-template suiDropdownPanel>\n      <div class=\"sui-compact-select__menu\" [class.sui-compact-select__menu--large]=\"size() === 'large'\">\n        @for (item of items(); track item.value) {\n          <sui-dropdown-item\n            mode=\"option\"\n            [label]=\"item.label\"\n            [sublabel]=\"item.sublabel ?? ''\"\n            [selected]=\"item.value === selected()?.value\"\n            [disabled]=\"item.disabled ?? false\"\n            (click)=\"selectItem(item)\"\n          >\n            @if (item.flag) {\n              <sui-flag slot=\"leading\" [name]=\"item.flag\" size=\"sm\" />\n            } @else if (item.icon) {\n              <sui-icon slot=\"leading\" [name]=\"item.icon\" [size]=\"20\" />\n            }\n          </sui-dropdown-item>\n        }\n      </div>\n    </ng-template>\n  </sui-dropdown-menu>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;flex-shrink:0;box-sizing:border-box;vertical-align:middle;font-family:var(--sui-font-sans, sans-serif)}.sui-compact-select__trigger{display:inline-flex;align-items:center;flex-shrink:0;box-sizing:border-box;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);box-shadow:0 1px 2px #0a0d1408;cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;transition:background-color .1s ease,border-color .1s ease,box-shadow .1s ease;font-family:var(--sui-font-sans, sans-serif);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);color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}:host([data-sui-size=medium]) .sui-compact-select__trigger{padding:9px 10px;gap:4px;border-radius:var(--sui-radius-10, 10px)}:host([data-sui-size=small]) .sui-compact-select__trigger{padding:7px 8px;gap:4px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-size=xsmall]) .sui-compact-select__trigger{padding:5px 6px;gap:2px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-type=basic][data-sui-size=medium]) .sui-compact-select__trigger{padding:9px 10px 9px 12px}:host([data-sui-type=basic][data-sui-size=small]) .sui-compact-select__trigger{padding:7px 8px 7px 12px}:host([data-sui-type=basic][data-sui-size=xsmall]) .sui-compact-select__trigger{padding:5px 6px 5px 10px}:host([data-sui-size=large]) .sui-compact-select__trigger{padding:13px 12px;gap:6px;border-radius:var(--sui-radius-12, 12px)}:host([data-sui-type=basic][data-sui-size=large]) .sui-compact-select__trigger{padding:13px 12px 13px 14px}.sui-compact-select__menu--large sui-dropdown-item{min-height:44px;padding:12px 8px}@media(max-width:767px){.sui-compact-select__menu sui-dropdown-item{min-height:44px;padding:12px 8px}}.sui-compact-select__trigger:not(.sui-compact-select__trigger--disabled):not(.sui-compact-select__trigger--error):not(.sui-compact-select__trigger--open):hover{background:var(--sui-bg-weak-50, #f7f7f7);border-color:transparent;box-shadow:none}.sui-compact-select__trigger:not(.sui-compact-select__trigger--disabled):focus-visible,.sui-compact-select__trigger--open:not(.sui-compact-select__trigger--disabled){outline:none;background:var(--sui-bg-white-0, #fff);border-color:var(--sui-stroke-strong-950, #171717);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px var(--sui-slate-alpha-16, rgba(153, 160, 174, .16))}.sui-compact-select__trigger--error:not(.sui-compact-select__trigger--disabled){border-color:var(--sui-state-error-base, #fb3748)}.sui-compact-select__trigger--error:not(.sui-compact-select__trigger--disabled):focus-visible,.sui-compact-select__trigger--error.sui-compact-select__trigger--open:not(.sui-compact-select__trigger--disabled){outline:none;border-color:var(--sui-state-error-base, #fb3748);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px var(--sui-red-alpha-16, rgba(251, 55, 72, .16))}.sui-compact-select__trigger--disabled{background:var(--sui-bg-weak-50, #f7f7f7);border-color:transparent;color:var(--sui-text-disabled-300, #d1d1d1);cursor:not-allowed;pointer-events:none;box-shadow:none}.sui-compact-select__trigger--disabled .sui-compact-select__leading{opacity:.48}.sui-compact-select__trigger--disabled .sui-compact-select__arrow{color:var(--sui-icon-disabled-300, #d1d1d1)}.sui-compact-select__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:var(--sui-text-sub-600, #5c5c5c)}:host([data-sui-filled]) .sui-compact-select__leading{color:var(--sui-icon-strong-950, #171717)}.sui-compact-select__value{flex:1 0 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.sui-compact-select__value[data-sui-placeholder]{color:var(--sui-text-sub-600, #5c5c5c)}.sui-compact-select__trigger--disabled .sui-compact-select__value[data-sui-placeholder]{color:var(--sui-text-disabled-300, #d1d1d1)}.sui-compact-select__arrow{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c);transition:transform .12s ease}\n"] }]
+                    }, template: "<!--\n  Trigger DIV interno \u2014 patr\u00F3n canon sui-select. La interacci\u00F3n\n  (click/keyboard/role/aria/tabindex) y el anclaje del overlay viven ac\u00E1, NO\n  en el host. El host custom-element NO debe colgar (click)+(touchend\u2192blur)\n  porque el blur() s\u00EDncrono en touchend cancela el click sint\u00E9tico de iOS\n  WebKit y el menu no abre. Moverlo a un div interno sin touch handlers\n  elimina la causa ra\u00EDz por equivalencia con sui-select (probado en iOS real).\n-->\n<div\n  #triggerEl\n  class=\"sui-compact-select__trigger\"\n  role=\"button\"\n  [attr.tabindex]=\"mergedDisabled() ? null : 0\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-haspopup]=\"'listbox'\"\n  [attr.aria-disabled]=\"mergedDisabled() ? '' : null\"\n  [class.sui-compact-select__trigger--open]=\"isOpen()\"\n  [class.sui-compact-select__trigger--error]=\"error()\"\n  [class.sui-compact-select__trigger--disabled]=\"mergedDisabled()\"\n  (click)=\"onTriggerClick($event)\"\n  (keydown.enter)=\"onTriggerClick($event)\"\n  (keydown.space)=\"onTriggerClick($event); $event.preventDefault()\"\n>\n  <!-- Leading slot seg\u00FAn type. Prioriza el selected item; sino usa el input est\u00E1tico. -->\n  @switch (type()) {\n    @case ('icon') {\n      @if (displayIcon()) {\n        <sui-icon class=\"sui-compact-select__leading\" [name]=\"displayIcon()!\" [size]=\"20\" />\n      }\n    }\n    @case ('country') {\n      @if (displayFlag()) {\n        <sui-flag class=\"sui-compact-select__leading\" [name]=\"displayFlag()!\" [size]=\"flagSize()\" />\n      }\n    }\n  }\n\n  <!-- Value / placeholder text (basic + country muestran texto; icon usualmente sin). -->\n  @if (type() !== 'icon') {\n    <span class=\"sui-compact-select__value\" [attr.data-sui-placeholder]=\"hasValue() ? null : ''\">\n      {{ hasValue() ? displayValue() : placeholder() }}\n    </span>\n  }\n\n  <!-- Trailing arrow. -->\n  <sui-icon class=\"sui-compact-select__arrow\" [name]=\"arrowIcon()\" [size]=\"20\" />\n</div>\n\n<!-- Overlay menu \u2014 delegado a sui-dropdown-menu. El trigger DIV interno es el\n     [origin]=triggerEl; el menu solo gestiona el panel.\n     Solo se renderea cuando hay items (mode 2). -->\n@if (items().length > 0) {\n  <sui-dropdown-menu\n    [origin]=\"triggerEl\"\n    [disabled]=\"mergedDisabled()\"\n    [minWidth]=\"200\"\n    panelClass=\"sui-compact-select__overlay-pane\"\n    (openedChange)=\"onMenuOpenedChange($event)\"\n  >\n    <ng-template suiDropdownPanel>\n      <div class=\"sui-compact-select__menu\" [class.sui-compact-select__menu--large]=\"size() === 'large'\">\n        @for (item of items(); track item.value) {\n          <sui-dropdown-item\n            mode=\"option\"\n            [label]=\"item.label\"\n            [sublabel]=\"item.sublabel ?? ''\"\n            [selected]=\"item.value === selected()?.value\"\n            [disabled]=\"item.disabled ?? false\"\n            (click)=\"selectItem(item)\"\n          >\n            @if (item.flag) {\n              <sui-flag slot=\"leading\" [name]=\"item.flag\" size=\"sm\" />\n            } @else if (item.icon) {\n              <sui-icon slot=\"leading\" [name]=\"item.icon\" [size]=\"20\" />\n            }\n          </sui-dropdown-item>\n        }\n      </div>\n    </ng-template>\n  </sui-dropdown-menu>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;flex-shrink:0;box-sizing:border-box;vertical-align:middle;font-family:var(--sui-font-sans, sans-serif)}.sui-compact-select__trigger{display:inline-flex;align-items:center;flex-shrink:0;box-sizing:border-box;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);box-shadow:0 1px 2px #0a0d1408;cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;transition:background-color .1s ease,border-color .1s ease,box-shadow .1s ease;font-family:var(--sui-font-sans, sans-serif);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);color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}:host([data-sui-size=medium]) .sui-compact-select__trigger{padding:9px 10px;gap:4px;border-radius:var(--sui-radius-10, 10px)}:host([data-sui-size=small]) .sui-compact-select__trigger{padding:7px 8px;gap:4px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-size=xsmall]) .sui-compact-select__trigger{padding:5px 6px;gap:2px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-type=basic][data-sui-size=medium]) .sui-compact-select__trigger{padding:9px 10px 9px 12px}:host([data-sui-type=basic][data-sui-size=small]) .sui-compact-select__trigger{padding:7px 8px 7px 12px}:host([data-sui-type=basic][data-sui-size=xsmall]) .sui-compact-select__trigger{padding:5px 6px 5px 10px}:host([data-sui-size=large]) .sui-compact-select__trigger{padding:11px 12px;gap:6px;border-radius:var(--sui-radius-12, 12px);font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}:host([data-sui-type=basic][data-sui-size=large]) .sui-compact-select__trigger{padding:11px 12px 11px 14px}.sui-compact-select__menu--large sui-dropdown-item{min-height:44px;padding:10px 8px}.sui-compact-select__menu--large sui-dropdown-item ::ng-deep .sui-dropdown-item__label{font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}@media(max-width:767px){.sui-compact-select__menu:not(.sui-compact-select__menu--large) sui-dropdown-item{min-height:44px;padding:12px 8px}}.sui-compact-select__trigger:not(.sui-compact-select__trigger--disabled):not(.sui-compact-select__trigger--error):not(.sui-compact-select__trigger--open):hover{background:var(--sui-bg-weak-50, #f7f7f7);border-color:transparent;box-shadow:none}.sui-compact-select__trigger:not(.sui-compact-select__trigger--disabled):focus-visible,.sui-compact-select__trigger--open:not(.sui-compact-select__trigger--disabled){outline:none;background:var(--sui-bg-white-0, #fff);border-color:var(--sui-stroke-strong-950, #171717);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px var(--sui-slate-alpha-16, rgba(153, 160, 174, .16))}.sui-compact-select__trigger--error:not(.sui-compact-select__trigger--disabled){border-color:var(--sui-state-error-base, #fb3748)}.sui-compact-select__trigger--error:not(.sui-compact-select__trigger--disabled):focus-visible,.sui-compact-select__trigger--error.sui-compact-select__trigger--open:not(.sui-compact-select__trigger--disabled){outline:none;border-color:var(--sui-state-error-base, #fb3748);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px var(--sui-red-alpha-16, rgba(251, 55, 72, .16))}.sui-compact-select__trigger--disabled{background:var(--sui-bg-weak-50, #f7f7f7);border-color:transparent;color:var(--sui-text-disabled-300, #d1d1d1);cursor:not-allowed;pointer-events:none;box-shadow:none}.sui-compact-select__trigger--disabled .sui-compact-select__leading{opacity:.48}.sui-compact-select__trigger--disabled .sui-compact-select__arrow{color:var(--sui-icon-disabled-300, #d1d1d1)}.sui-compact-select__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:var(--sui-text-sub-600, #5c5c5c)}:host([data-sui-filled]) .sui-compact-select__leading{color:var(--sui-icon-strong-950, #171717)}.sui-compact-select__value{flex:1 0 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.sui-compact-select__value[data-sui-placeholder]{color:var(--sui-text-sub-600, #5c5c5c)}.sui-compact-select__trigger--disabled .sui-compact-select__value[data-sui-placeholder]{color:var(--sui-text-disabled-300, #d1d1d1)}.sui-compact-select__arrow{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c);transition:transform .12s ease}\n"] }]
         }], ctorParameters: () => [], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], flag: [{ type: i0.Input, args: [{ isSignal: true, alias: "flag", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], _menu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SuiDropdownMenu), { isSignal: true }] }], triggerEl: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }] } });
 
 /** Set de los 9 colores SUI 2.0 para iterar desde el consumer (previews, demos). */
@@ -6679,7 +6679,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]=\"labelSize()\"\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]=\"iconSize()\" />\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]=\"iconSize()\" />\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-full, 999px);min-height:40px}:host([data-sui-size=small]) .sui-counter-input__field{gap:6px;padding:5px 6px;border-radius:var(--sui-radius-full, 999px);min-height:36px}:host([data-sui-size=large]) .sui-counter-input__field{gap:8px;padding:3px;border-radius:var(--sui-radius-full, 999px);min-height:48px}:host([data-sui-size=xsmall]) .sui-counter-input__field{gap:4px;padding:3px 4px;border-radius:var(--sui-radius-full, 999px);min-height:32px}:host([data-sui-size=\"2xsmall\"]) .sui-counter-input__field{gap:4px;padding:1px 2px;border-radius:var(--sui-radius-full, 999px);min-height:28px}:host([data-sui-size=xlarge]) .sui-counter-input__field{gap:8px;padding:3px;border-radius:var(--sui-radius-full, 999px);min-height:52px}.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-full, 999px);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}:host([data-sui-size=large]) .sui-counter-input__stepper{width:40px;height:40px;padding:10px}:host([data-sui-size=xlarge]) .sui-counter-input__stepper{width:44px;height:44px;padding:10px}.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 });
+        ], ngImport: i0, template: "@if (label()) {\n  <sui-form-label\n    [label]=\"label()!\"\n    [sublabel]=\"sublabel()\"\n    [required]=\"required()\"\n    [tooltip]=\"tooltip()\"\n    [size]=\"labelSize()\"\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]=\"iconSize()\" />\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]=\"iconSize()\" />\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-full, 999px);min-height:40px}:host([data-sui-size=small]) .sui-counter-input__field{gap:6px;padding:5px 6px;border-radius:var(--sui-radius-full, 999px);min-height:36px}:host([data-sui-size=large]) .sui-counter-input__field{gap:8px;padding:3px;border-radius:var(--sui-radius-full, 999px);min-height:48px}:host([data-sui-size=xsmall]) .sui-counter-input__field{gap:4px;padding:3px 4px;border-radius:var(--sui-radius-full, 999px);min-height:32px}:host([data-sui-size=\"2xsmall\"]) .sui-counter-input__field{gap:4px;padding:1px 2px;border-radius:var(--sui-radius-full, 999px);min-height:28px}:host([data-sui-size=xlarge]) .sui-counter-input__field{gap:8px;padding:3px;border-radius:var(--sui-radius-full, 999px);min-height:52px}.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-full, 999px);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}:host([data-sui-size=large]) .sui-counter-input__stepper{width:40px;height:40px;padding:10px}:host([data-sui-size=xlarge]) .sui-counter-input__stepper{width:44px;height:44px;padding:10px}.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)}:host([data-sui-size=large]) .sui-counter-input__value,:host([data-sui-size=xlarge]) .sui-counter-input__value{font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}.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,
@@ -6695,7 +6695,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]=\"labelSize()\"\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]=\"iconSize()\" />\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]=\"iconSize()\" />\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-full, 999px);min-height:40px}:host([data-sui-size=small]) .sui-counter-input__field{gap:6px;padding:5px 6px;border-radius:var(--sui-radius-full, 999px);min-height:36px}:host([data-sui-size=large]) .sui-counter-input__field{gap:8px;padding:3px;border-radius:var(--sui-radius-full, 999px);min-height:48px}:host([data-sui-size=xsmall]) .sui-counter-input__field{gap:4px;padding:3px 4px;border-radius:var(--sui-radius-full, 999px);min-height:32px}:host([data-sui-size=\"2xsmall\"]) .sui-counter-input__field{gap:4px;padding:1px 2px;border-radius:var(--sui-radius-full, 999px);min-height:28px}:host([data-sui-size=xlarge]) .sui-counter-input__field{gap:8px;padding:3px;border-radius:var(--sui-radius-full, 999px);min-height:52px}.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-full, 999px);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}:host([data-sui-size=large]) .sui-counter-input__stepper{width:40px;height:40px;padding:10px}:host([data-sui-size=xlarge]) .sui-counter-input__stepper{width:44px;height:44px;padding:10px}.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]=\"labelSize()\"\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]=\"iconSize()\" />\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]=\"iconSize()\" />\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-full, 999px);min-height:40px}:host([data-sui-size=small]) .sui-counter-input__field{gap:6px;padding:5px 6px;border-radius:var(--sui-radius-full, 999px);min-height:36px}:host([data-sui-size=large]) .sui-counter-input__field{gap:8px;padding:3px;border-radius:var(--sui-radius-full, 999px);min-height:48px}:host([data-sui-size=xsmall]) .sui-counter-input__field{gap:4px;padding:3px 4px;border-radius:var(--sui-radius-full, 999px);min-height:32px}:host([data-sui-size=\"2xsmall\"]) .sui-counter-input__field{gap:4px;padding:1px 2px;border-radius:var(--sui-radius-full, 999px);min-height:28px}:host([data-sui-size=xlarge]) .sui-counter-input__field{gap:8px;padding:3px;border-radius:var(--sui-radius-full, 999px);min-height:52px}.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-full, 999px);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}:host([data-sui-size=large]) .sui-counter-input__stepper{width:40px;height:40px;padding:10px}:host([data-sui-size=xlarge]) .sui-counter-input__stepper{width:44px;height:44px;padding:10px}.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)}:host([data-sui-size=large]) .sui-counter-input__value,:host([data-sui-size=xlarge]) .sui-counter-input__value{font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}.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 }] }] } });
 
 /**
@@ -7454,7 +7454,7 @@ class SuiDatepicker {
                 useExisting: forwardRef(() => SuiDatepicker),
                 multi: true,
             },
-        ], ngImport: i0, template: "<!-- Trigger (input + icono calendario) \u2014 solo si no es inline -->\n@if (!inline()) {\n  <button\n    type=\"button\"\n    class=\"sui-datepicker__trigger\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-haspopup]=\"true\"\n    (click)=\"toggle()\"\n  >\n    <sui-icon class=\"sui-datepicker__trigger-icon\" name=\"calendar-line\" [size]=\"20\" />\n    <span class=\"sui-datepicker__trigger-text\" [class.sui-datepicker__trigger-text--placeholder]=\"!value()\">\n      {{ triggerText() }}\n    </span>\n    <sui-icon class=\"sui-datepicker__trigger-chevron\" name=\"arrow-down-s-line\" [size]=\"20\" />\n  </button>\n}\n\n<!-- Popover panel \u2014 visible cuando open() o inline() -->\n@if (inline() || open()) {\n  <div class=\"sui-datepicker__panel\"\n       [class.sui-datepicker__panel--inline]=\"inline()\"\n       [class.sui-datepicker__panel--range]=\"mode() === 'range'\"\n       role=\"dialog\">\n    <!-- Sidebar de presets \u2014 solo en mode=range (usa <sui-period-range>) -->\n    @if (mode() === 'range') {\n      <aside class=\"sui-datepicker__presets\" aria-label=\"Rangos predefinidos\">\n        @for (p of presets(); track trackPreset($index, p)) {\n          <sui-period-range\n            [label]=\"p.label\"\n            [active]=\"isPresetActive(p.id)\"\n            (clicked)=\"selectPreset(p)\"\n          />\n        }\n      </aside>\n    }\n\n    <!-- Contenido principal: 1 o 2 calendarios + footer -->\n    <div class=\"sui-datepicker__content\">\n      <div class=\"sui-datepicker__calendars\">\n        <!-- Calendario izquierdo (siempre visible) -->\n        <div class=\"sui-datepicker__calendar\">\n          <sui-date-selector\n            [label]=\"leftMonthLabel()\"\n            [leftIcon]=\"true\"\n            [rightIcon]=\"effectiveCalendars() === 1\"\n            (prev)=\"prevMonth()\"\n            (next)=\"nextMonth()\"\n          />\n\n          <div class=\"sui-datepicker__day-labels\" role=\"row\">\n            @for (label of dayLabels; track label) {\n              <sui-day-label [label]=\"label\" />\n            }\n          </div>\n\n          <div class=\"sui-datepicker__day-grid\" role=\"grid\">\n            @for (row of leftRows(); track trackRow($index, row)) {\n              <div class=\"sui-datepicker__day-row\" role=\"row\">\n                @if (row.hasBand) {\n                  <span\n                    class=\"sui-datepicker__range-band\"\n                    [class.sui-datepicker__range-band--round-left]=\"row.bandRoundLeft\"\n                    [class.sui-datepicker__range-band--round-right]=\"row.bandRoundRight\"\n                    [style.--sui-band-start]=\"row.bandStart\"\n                    [style.--sui-band-end]=\"row.bandEnd\"\n                    aria-hidden=\"true\"\n                  ></span>\n                }\n                @for (cell of row.cells; track trackCell($index, cell)) {\n                  <sui-day-cell\n                    [day]=\"cell.day\"\n                    [type]=\"mode() === 'range' ? 'range' : 'basic'\"\n                    [selected]=\"mode() === 'date' && cell.selected\"\n                    [rangePosition]=\"cellRangePosition(cell)\"\n                    [marked]=\"cell.marked\"\n                    [today]=\"cell.isToday\"\n                    [disabled]=\"cell.disabled\"\n                    [outOfMonth]=\"!cell.inCurrentMonth\"\n                    (clicked)=\"selectCell(cell)\"\n                  />\n                }\n              </div>\n            }\n          </div>\n        </div>\n\n        <!-- Calendario derecho \u2014 solo en mode=range con effectiveCalendars=2 (desktop) -->\n        @if (mode() === 'range' && effectiveCalendars() === 2) {\n          <div class=\"sui-datepicker__calendar sui-datepicker__calendar--right\">\n            <sui-date-selector\n              [label]=\"rightMonthLabel()\"\n              [leftIcon]=\"false\"\n              [rightIcon]=\"true\"\n              (next)=\"nextMonth()\"\n            />\n\n            <div class=\"sui-datepicker__day-labels\" role=\"row\">\n              @for (label of dayLabels; track label) {\n                <sui-day-label [label]=\"label\" />\n              }\n            </div>\n\n            <div class=\"sui-datepicker__day-grid\" role=\"grid\">\n              @for (row of rightRows(); track trackRow($index, row)) {\n                <div class=\"sui-datepicker__day-row\" role=\"row\">\n                  @if (row.hasBand) {\n                    <span\n                      class=\"sui-datepicker__range-band\"\n                      [class.sui-datepicker__range-band--round-left]=\"row.bandRoundLeft\"\n                      [class.sui-datepicker__range-band--round-right]=\"row.bandRoundRight\"\n                      [style.--sui-band-start]=\"row.bandStart\"\n                      [style.--sui-band-end]=\"row.bandEnd\"\n                      aria-hidden=\"true\"\n                    ></span>\n                  }\n                  @for (cell of row.cells; track trackCell($index, cell)) {\n                    <sui-day-cell\n                      [day]=\"cell.day\"\n                      [type]=\"mode() === 'range' ? 'range' : 'basic'\"\n                      [selected]=\"false\"\n                      [rangePosition]=\"cellRangePosition(cell)\"\n                      [marked]=\"cell.marked\"\n                      [today]=\"cell.isToday\"\n                      [disabled]=\"cell.disabled\"\n                      [outOfMonth]=\"!cell.inCurrentMonth\"\n                      (clicked)=\"selectCell(cell)\"\n                    />\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n\n      <!-- Footer con Cancelar + Aplicar (Range siempre lo muestra) -->\n      @if (showFooter() || mode() === 'range') {\n        <footer class=\"sui-datepicker__footer\">\n          @if (mode() === 'range' && rangeHint(); as hint) {\n            <span class=\"sui-datepicker__range-hint\">{{ hint }}</span>\n          }\n          <div class=\"sui-datepicker__footer-actions\">\n            <sui-button variant=\"stroke\" color=\"neutral\" [size]=\"footerButtonSize()\" type=\"button\" (click)=\"cancel()\">\n              Cancelar\n            </sui-button>\n            <sui-button variant=\"filled\" color=\"primary\" [size]=\"footerButtonSize()\" type=\"button\" (click)=\"apply()\">\n              Aplicar\n            </sui-button>\n          </div>\n        </footer>\n      }\n    </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;position:relative;font-family:var(--sui-font-sans, var(--font-sans, sans-serif))}:host([data-sui-mode=range]){display:block}.sui-datepicker__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, .12s) var(--sui-motion-ease-out, ease-out),box-shadow var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}.sui-datepicker__trigger:hover:not(:disabled){border-color:var(--sui-stroke-sub-300, #d1d1d1)}.sui-datepicker__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-datepicker__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-datepicker__trigger{height:36px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-size=large]) .sui-datepicker__trigger{height:48px;padding:0 14px;gap:10px;border-radius:var(--sui-radius-12, 12px)}.sui-datepicker__trigger-icon{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-datepicker__trigger-text{flex:1 1 auto;text-align:left;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-datepicker__trigger-text--placeholder{color:var(--sui-text-soft-400, #a3a3a3);font-weight:400}.sui-datepicker__trigger-chevron{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-datepicker__panel{position:absolute;top:calc(100% + 8px);left:0;z-index:50;display:flex;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-20, 20px);box-shadow:var(--sui-shadow-medium, 0 16px 32px -12px rgba(14, 18, 27, .1019607843));overflow:hidden;animation:sui-datepicker-enter .16s cubic-bezier(.23,1,.32,1)}.sui-datepicker__panel--inline{position:static;animation:none}.sui-datepicker__panel--range{width:936px;max-width:calc(100vw - 32px)}:host([data-sui-calendars=\"1\"]) .sui-datepicker__panel--range{width:auto}@keyframes sui-datepicker-enter{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.sui-datepicker__presets{display:flex;flex-direction:column;gap:8px;width:200px;flex-shrink:0;padding:20px 16px 2px;border-right:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #fff);box-sizing:border-box}.sui-datepicker__content{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.sui-datepicker__calendars{display:flex;flex:1 1 auto}.sui-datepicker__calendar{flex:1 1 0;max-width:368px;padding:20px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:8px}.sui-datepicker__calendar--right{border-left:1px solid var(--sui-stroke-soft-200, #ebebeb)}.sui-datepicker__calendar sui-date-selector{width:328px;max-width:328px}.sui-datepicker__day-labels{display:flex;gap:8px;align-items:center;justify-content:space-between;width:328px;max-width:328px}.sui-datepicker__day-grid{display:flex;flex-direction:column;gap:8px;width:328px;max-width:328px}.sui-datepicker__day-row{position:relative;display:flex;gap:8px;align-items:center;justify-content:space-between;width:328px}.sui-datepicker__range-band{position:absolute;inset:0;background:var(--sui-primary-alpha-10, rgba(250, 115, 25, .1019607843));pointer-events:none;z-index:0}.sui-datepicker__range-band--round-left{left:calc(var(--sui-band-start) * var(--sui-day-step, 48px));border-top-left-radius:var(--sui-radius-8, 8px);border-bottom-left-radius:var(--sui-radius-8, 8px)}.sui-datepicker__range-band--round-right{right:calc((6 - var(--sui-band-end)) * var(--sui-day-step, 48px));border-top-right-radius:var(--sui-radius-8, 8px);border-bottom-right-radius:var(--sui-radius-8, 8px)}.sui-datepicker__day-row sui-day-cell{position:relative;z-index:1}.sui-datepicker__footer{display:flex;align-items:center;gap:16px;padding:16px;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb)}:host([data-sui-mode=range]) .sui-datepicker__footer{padding:16px 16px 16px 24px}.sui-datepicker__range-hint{flex:1 0 0;min-width:0;font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-datepicker__footer-actions{display:flex;gap:16px;align-items:center}:host(:not([data-sui-mode=range])) .sui-datepicker__footer-actions{flex:1 0 0;min-width:0}:host(:not([data-sui-mode=range])) .sui-datepicker__footer-actions sui-button{flex:1 0 0;min-width:0}:host([data-sui-mode=range]) .sui-datepicker__footer-actions{flex-shrink:0;margin-left:auto}:host([data-sui-mode=range]) .sui-datepicker__footer-actions sui-button{width:108px}@media(max-width:767px){.sui-datepicker__panel--range{width:calc(100vw - 32px);flex-direction:column}.sui-datepicker__presets{flex-direction:row;overflow-x:auto;width:100%;border-right:none;border-bottom:1px solid var(--sui-stroke-soft-200, #ebebeb);padding:12px 16px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}.sui-datepicker__presets sui-period-range{width:auto;flex-shrink:0;scroll-snap-align:start}.sui-datepicker__calendar{padding-left:12px;padding-right:12px;max-width:none}.sui-datepicker__day-labels,.sui-datepicker__day-grid,.sui-datepicker__day-row{--sui-day-step: 44px;width:304px;max-width:304px;gap:4px}}@media(max-width:767px){:host([data-sui-mode=range]) .sui-datepicker__footer{flex-wrap:wrap;gap:12px 16px;padding:16px}.sui-datepicker__range-hint{flex:1 0 100%}.sui-datepicker__calendar sui-date-selector{width:304px;max-width:304px}:host([data-sui-mode=range]) .sui-datepicker__footer-actions{flex:1 0 100%;margin-left:0}:host([data-sui-mode=range]) .sui-datepicker__footer-actions sui-button{width:auto;flex:1 0 0;min-width:0}}:host([data-sui-size=large]) .sui-datepicker__calendar sui-date-selector{height:48px;padding:4px}:host([data-sui-size=large]) .sui-datepicker__calendar sui-date-selector ::ng-deep sui-compact-button .sui-compact-button__el,:host([data-sui-size=large]) .sui-datepicker__calendar sui-date-selector ::ng-deep .sui-date-selector__placeholder{width:40px;height:40px}@media(max-width:767px){.sui-datepicker__calendar sui-date-selector{height:48px;padding:4px}.sui-datepicker__calendar sui-date-selector ::ng-deep sui-compact-button .sui-compact-button__el,.sui-datepicker__calendar sui-date-selector ::ng-deep .sui-date-selector__placeholder{width:40px;height:40px}}\n"], dependencies: [{ 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: SuiDayLabel, selector: "sui-day-label", inputs: ["label"] }, { kind: "component", type: SuiDayCell, selector: "sui-day-cell", inputs: ["day", "type", "rangePosition", "selected", "marked", "today", "disabled", "outOfMonth", "ariaLabel"], outputs: ["clicked"] }, { kind: "component", type: SuiDateSelector, selector: "sui-date-selector", inputs: ["label", "leftIcon", "rightIcon", "disabled"], outputs: ["prev", "next"] }, { kind: "component", type: SuiPeriodRange, selector: "sui-period-range", inputs: ["label", "active", "disabled"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<!-- Trigger (input + icono calendario) \u2014 solo si no es inline -->\n@if (!inline()) {\n  <button\n    type=\"button\"\n    class=\"sui-datepicker__trigger\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-haspopup]=\"true\"\n    (click)=\"toggle()\"\n  >\n    <sui-icon class=\"sui-datepicker__trigger-icon\" name=\"calendar-line\" [size]=\"20\" />\n    <span class=\"sui-datepicker__trigger-text\" [class.sui-datepicker__trigger-text--placeholder]=\"!value()\">\n      {{ triggerText() }}\n    </span>\n    <sui-icon class=\"sui-datepicker__trigger-chevron\" name=\"arrow-down-s-line\" [size]=\"20\" />\n  </button>\n}\n\n<!-- Popover panel \u2014 visible cuando open() o inline() -->\n@if (inline() || open()) {\n  <div class=\"sui-datepicker__panel\"\n       [class.sui-datepicker__panel--inline]=\"inline()\"\n       [class.sui-datepicker__panel--range]=\"mode() === 'range'\"\n       role=\"dialog\">\n    <!-- Sidebar de presets \u2014 solo en mode=range (usa <sui-period-range>) -->\n    @if (mode() === 'range') {\n      <aside class=\"sui-datepicker__presets\" aria-label=\"Rangos predefinidos\">\n        @for (p of presets(); track trackPreset($index, p)) {\n          <sui-period-range\n            [label]=\"p.label\"\n            [active]=\"isPresetActive(p.id)\"\n            (clicked)=\"selectPreset(p)\"\n          />\n        }\n      </aside>\n    }\n\n    <!-- Contenido principal: 1 o 2 calendarios + footer -->\n    <div class=\"sui-datepicker__content\">\n      <div class=\"sui-datepicker__calendars\">\n        <!-- Calendario izquierdo (siempre visible) -->\n        <div class=\"sui-datepicker__calendar\">\n          <sui-date-selector\n            [label]=\"leftMonthLabel()\"\n            [leftIcon]=\"true\"\n            [rightIcon]=\"effectiveCalendars() === 1\"\n            (prev)=\"prevMonth()\"\n            (next)=\"nextMonth()\"\n          />\n\n          <div class=\"sui-datepicker__day-labels\" role=\"row\">\n            @for (label of dayLabels; track label) {\n              <sui-day-label [label]=\"label\" />\n            }\n          </div>\n\n          <div class=\"sui-datepicker__day-grid\" role=\"grid\">\n            @for (row of leftRows(); track trackRow($index, row)) {\n              <div class=\"sui-datepicker__day-row\" role=\"row\">\n                @if (row.hasBand) {\n                  <span\n                    class=\"sui-datepicker__range-band\"\n                    [class.sui-datepicker__range-band--round-left]=\"row.bandRoundLeft\"\n                    [class.sui-datepicker__range-band--round-right]=\"row.bandRoundRight\"\n                    [style.--sui-band-start]=\"row.bandStart\"\n                    [style.--sui-band-end]=\"row.bandEnd\"\n                    aria-hidden=\"true\"\n                  ></span>\n                }\n                @for (cell of row.cells; track trackCell($index, cell)) {\n                  <sui-day-cell\n                    [day]=\"cell.day\"\n                    [type]=\"mode() === 'range' ? 'range' : 'basic'\"\n                    [selected]=\"mode() === 'date' && cell.selected\"\n                    [rangePosition]=\"cellRangePosition(cell)\"\n                    [marked]=\"cell.marked\"\n                    [today]=\"cell.isToday\"\n                    [disabled]=\"cell.disabled\"\n                    [outOfMonth]=\"!cell.inCurrentMonth\"\n                    (clicked)=\"selectCell(cell)\"\n                  />\n                }\n              </div>\n            }\n          </div>\n        </div>\n\n        <!-- Calendario derecho \u2014 solo en mode=range con effectiveCalendars=2 (desktop) -->\n        @if (mode() === 'range' && effectiveCalendars() === 2) {\n          <div class=\"sui-datepicker__calendar sui-datepicker__calendar--right\">\n            <sui-date-selector\n              [label]=\"rightMonthLabel()\"\n              [leftIcon]=\"false\"\n              [rightIcon]=\"true\"\n              (next)=\"nextMonth()\"\n            />\n\n            <div class=\"sui-datepicker__day-labels\" role=\"row\">\n              @for (label of dayLabels; track label) {\n                <sui-day-label [label]=\"label\" />\n              }\n            </div>\n\n            <div class=\"sui-datepicker__day-grid\" role=\"grid\">\n              @for (row of rightRows(); track trackRow($index, row)) {\n                <div class=\"sui-datepicker__day-row\" role=\"row\">\n                  @if (row.hasBand) {\n                    <span\n                      class=\"sui-datepicker__range-band\"\n                      [class.sui-datepicker__range-band--round-left]=\"row.bandRoundLeft\"\n                      [class.sui-datepicker__range-band--round-right]=\"row.bandRoundRight\"\n                      [style.--sui-band-start]=\"row.bandStart\"\n                      [style.--sui-band-end]=\"row.bandEnd\"\n                      aria-hidden=\"true\"\n                    ></span>\n                  }\n                  @for (cell of row.cells; track trackCell($index, cell)) {\n                    <sui-day-cell\n                      [day]=\"cell.day\"\n                      [type]=\"mode() === 'range' ? 'range' : 'basic'\"\n                      [selected]=\"false\"\n                      [rangePosition]=\"cellRangePosition(cell)\"\n                      [marked]=\"cell.marked\"\n                      [today]=\"cell.isToday\"\n                      [disabled]=\"cell.disabled\"\n                      [outOfMonth]=\"!cell.inCurrentMonth\"\n                      (clicked)=\"selectCell(cell)\"\n                    />\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n\n      <!-- Footer con Cancelar + Aplicar (Range siempre lo muestra) -->\n      @if (showFooter() || mode() === 'range') {\n        <footer class=\"sui-datepicker__footer\">\n          @if (mode() === 'range' && rangeHint(); as hint) {\n            <span class=\"sui-datepicker__range-hint\">{{ hint }}</span>\n          }\n          <div class=\"sui-datepicker__footer-actions\">\n            <sui-button variant=\"stroke\" color=\"neutral\" [size]=\"footerButtonSize()\" type=\"button\" (click)=\"cancel()\">\n              Cancelar\n            </sui-button>\n            <sui-button variant=\"filled\" color=\"primary\" [size]=\"footerButtonSize()\" type=\"button\" (click)=\"apply()\">\n              Aplicar\n            </sui-button>\n          </div>\n        </footer>\n      }\n    </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;position:relative;font-family:var(--sui-font-sans, var(--font-sans, sans-serif))}:host([data-sui-mode=range]){display:block}.sui-datepicker__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, .12s) var(--sui-motion-ease-out, ease-out),box-shadow var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}.sui-datepicker__trigger:hover:not(:disabled){border-color:var(--sui-stroke-sub-300, #d1d1d1)}.sui-datepicker__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-datepicker__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-datepicker__trigger{height:36px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-size=large]) .sui-datepicker__trigger{height:48px;padding:0 14px;gap:10px;border-radius:var(--sui-radius-12, 12px)}.sui-datepicker__trigger-icon{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-datepicker__trigger-text{flex:1 1 auto;text-align:left;font-size:var(--sui-type-label-sm-size, 14px);font-weight:var(--sui-type-label-sm-weight, 500);line-height:var(--sui-type-label-sm-line, 20px);letter-spacing:var(--sui-type-label-sm-spacing, -.006em);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-datepicker__trigger-text--placeholder{color:var(--sui-text-soft-400, #a3a3a3);font-weight:400}:host([data-sui-size=large]) .sui-datepicker__trigger-text{font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em)}.sui-datepicker__trigger-chevron{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-datepicker__panel{position:absolute;top:calc(100% + 8px);left:0;z-index:50;display:flex;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-20, 20px);box-shadow:var(--sui-shadow-medium, 0 16px 32px -12px rgba(14, 18, 27, .1019607843));overflow:hidden;animation:sui-datepicker-enter .16s cubic-bezier(.23,1,.32,1)}.sui-datepicker__panel--inline{position:static;animation:none}.sui-datepicker__panel--range{width:936px;max-width:calc(100vw - 32px)}:host([data-sui-calendars=\"1\"]) .sui-datepicker__panel--range{width:auto}@keyframes sui-datepicker-enter{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.sui-datepicker__presets{display:flex;flex-direction:column;gap:8px;width:200px;flex-shrink:0;padding:20px 16px 2px;border-right:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #fff);box-sizing:border-box}.sui-datepicker__content{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.sui-datepicker__calendars{display:flex;flex:1 1 auto}.sui-datepicker__calendar{flex:1 1 0;max-width:368px;padding:20px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:8px}.sui-datepicker__calendar--right{border-left:1px solid var(--sui-stroke-soft-200, #ebebeb)}.sui-datepicker__calendar sui-date-selector{width:328px;max-width:328px}.sui-datepicker__day-labels{display:flex;gap:8px;align-items:center;justify-content:space-between;width:328px;max-width:328px}.sui-datepicker__day-grid{display:flex;flex-direction:column;gap:8px;width:328px;max-width:328px}.sui-datepicker__day-row{position:relative;display:flex;gap:8px;align-items:center;justify-content:space-between;width:328px}.sui-datepicker__range-band{position:absolute;inset:0;background:var(--sui-primary-alpha-10, rgba(250, 115, 25, .1019607843));pointer-events:none;z-index:0}.sui-datepicker__range-band--round-left{left:calc(var(--sui-band-start) * var(--sui-day-step, 48px));border-top-left-radius:var(--sui-radius-8, 8px);border-bottom-left-radius:var(--sui-radius-8, 8px)}.sui-datepicker__range-band--round-right{right:calc((6 - var(--sui-band-end)) * var(--sui-day-step, 48px));border-top-right-radius:var(--sui-radius-8, 8px);border-bottom-right-radius:var(--sui-radius-8, 8px)}.sui-datepicker__day-row sui-day-cell{position:relative;z-index:1}.sui-datepicker__footer{display:flex;align-items:center;gap:16px;padding:16px;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb)}:host([data-sui-mode=range]) .sui-datepicker__footer{padding:16px 16px 16px 24px}.sui-datepicker__range-hint{flex:1 0 0;min-width:0;font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-datepicker__footer-actions{display:flex;gap:16px;align-items:center}:host(:not([data-sui-mode=range])) .sui-datepicker__footer-actions{flex:1 0 0;min-width:0}:host(:not([data-sui-mode=range])) .sui-datepicker__footer-actions sui-button{flex:1 0 0;min-width:0}:host([data-sui-mode=range]) .sui-datepicker__footer-actions{flex-shrink:0;margin-left:auto}:host([data-sui-mode=range]) .sui-datepicker__footer-actions sui-button{width:108px}@media(max-width:767px){.sui-datepicker__panel--range{width:calc(100vw - 32px);flex-direction:column}.sui-datepicker__presets{flex-direction:row;overflow-x:auto;width:100%;border-right:none;border-bottom:1px solid var(--sui-stroke-soft-200, #ebebeb);padding:12px 16px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}.sui-datepicker__presets sui-period-range{width:auto;flex-shrink:0;scroll-snap-align:start}.sui-datepicker__calendar{padding-left:12px;padding-right:12px;max-width:none}.sui-datepicker__day-labels,.sui-datepicker__day-grid,.sui-datepicker__day-row{--sui-day-step: 44px;width:304px;max-width:304px;gap:4px}}@media(max-width:767px){:host([data-sui-mode=range]) .sui-datepicker__footer{flex-wrap:wrap;gap:12px 16px;padding:16px}.sui-datepicker__range-hint{flex:1 0 100%}.sui-datepicker__calendar sui-date-selector{width:304px;max-width:304px}:host([data-sui-mode=range]) .sui-datepicker__footer-actions{flex:1 0 100%;margin-left:0}:host([data-sui-mode=range]) .sui-datepicker__footer-actions sui-button{width:auto;flex:1 0 0;min-width:0}}:host([data-sui-size=large]) .sui-datepicker__calendar sui-date-selector{height:48px;padding:4px}:host([data-sui-size=large]) .sui-datepicker__calendar sui-date-selector ::ng-deep sui-compact-button .sui-compact-button__el,:host([data-sui-size=large]) .sui-datepicker__calendar sui-date-selector ::ng-deep .sui-date-selector__placeholder{width:40px;height:40px}@media(max-width:767px){.sui-datepicker__calendar sui-date-selector{height:48px;padding:4px}.sui-datepicker__calendar sui-date-selector ::ng-deep sui-compact-button .sui-compact-button__el,.sui-datepicker__calendar sui-date-selector ::ng-deep .sui-date-selector__placeholder{width:40px;height:40px}}\n"], dependencies: [{ 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: SuiDayLabel, selector: "sui-day-label", inputs: ["label"] }, { kind: "component", type: SuiDayCell, selector: "sui-day-cell", inputs: ["day", "type", "rangePosition", "selected", "marked", "today", "disabled", "outOfMonth", "ariaLabel"], outputs: ["clicked"] }, { kind: "component", type: SuiDateSelector, selector: "sui-date-selector", inputs: ["label", "leftIcon", "rightIcon", "disabled"], outputs: ["prev", "next"] }, { kind: "component", type: SuiPeriodRange, selector: "sui-period-range", inputs: ["label", "active", "disabled"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiDatepicker, decorators: [{
             type: Component,
@@ -7469,7 +7469,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[attr.data-sui-open]': 'open() ? "" : null',
                         '[attr.data-sui-calendars]': 'effectiveCalendars()',
                         '[attr.data-sui-size]': 'size()',
-                    }, template: "<!-- Trigger (input + icono calendario) \u2014 solo si no es inline -->\n@if (!inline()) {\n  <button\n    type=\"button\"\n    class=\"sui-datepicker__trigger\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-haspopup]=\"true\"\n    (click)=\"toggle()\"\n  >\n    <sui-icon class=\"sui-datepicker__trigger-icon\" name=\"calendar-line\" [size]=\"20\" />\n    <span class=\"sui-datepicker__trigger-text\" [class.sui-datepicker__trigger-text--placeholder]=\"!value()\">\n      {{ triggerText() }}\n    </span>\n    <sui-icon class=\"sui-datepicker__trigger-chevron\" name=\"arrow-down-s-line\" [size]=\"20\" />\n  </button>\n}\n\n<!-- Popover panel \u2014 visible cuando open() o inline() -->\n@if (inline() || open()) {\n  <div class=\"sui-datepicker__panel\"\n       [class.sui-datepicker__panel--inline]=\"inline()\"\n       [class.sui-datepicker__panel--range]=\"mode() === 'range'\"\n       role=\"dialog\">\n    <!-- Sidebar de presets \u2014 solo en mode=range (usa <sui-period-range>) -->\n    @if (mode() === 'range') {\n      <aside class=\"sui-datepicker__presets\" aria-label=\"Rangos predefinidos\">\n        @for (p of presets(); track trackPreset($index, p)) {\n          <sui-period-range\n            [label]=\"p.label\"\n            [active]=\"isPresetActive(p.id)\"\n            (clicked)=\"selectPreset(p)\"\n          />\n        }\n      </aside>\n    }\n\n    <!-- Contenido principal: 1 o 2 calendarios + footer -->\n    <div class=\"sui-datepicker__content\">\n      <div class=\"sui-datepicker__calendars\">\n        <!-- Calendario izquierdo (siempre visible) -->\n        <div class=\"sui-datepicker__calendar\">\n          <sui-date-selector\n            [label]=\"leftMonthLabel()\"\n            [leftIcon]=\"true\"\n            [rightIcon]=\"effectiveCalendars() === 1\"\n            (prev)=\"prevMonth()\"\n            (next)=\"nextMonth()\"\n          />\n\n          <div class=\"sui-datepicker__day-labels\" role=\"row\">\n            @for (label of dayLabels; track label) {\n              <sui-day-label [label]=\"label\" />\n            }\n          </div>\n\n          <div class=\"sui-datepicker__day-grid\" role=\"grid\">\n            @for (row of leftRows(); track trackRow($index, row)) {\n              <div class=\"sui-datepicker__day-row\" role=\"row\">\n                @if (row.hasBand) {\n                  <span\n                    class=\"sui-datepicker__range-band\"\n                    [class.sui-datepicker__range-band--round-left]=\"row.bandRoundLeft\"\n                    [class.sui-datepicker__range-band--round-right]=\"row.bandRoundRight\"\n                    [style.--sui-band-start]=\"row.bandStart\"\n                    [style.--sui-band-end]=\"row.bandEnd\"\n                    aria-hidden=\"true\"\n                  ></span>\n                }\n                @for (cell of row.cells; track trackCell($index, cell)) {\n                  <sui-day-cell\n                    [day]=\"cell.day\"\n                    [type]=\"mode() === 'range' ? 'range' : 'basic'\"\n                    [selected]=\"mode() === 'date' && cell.selected\"\n                    [rangePosition]=\"cellRangePosition(cell)\"\n                    [marked]=\"cell.marked\"\n                    [today]=\"cell.isToday\"\n                    [disabled]=\"cell.disabled\"\n                    [outOfMonth]=\"!cell.inCurrentMonth\"\n                    (clicked)=\"selectCell(cell)\"\n                  />\n                }\n              </div>\n            }\n          </div>\n        </div>\n\n        <!-- Calendario derecho \u2014 solo en mode=range con effectiveCalendars=2 (desktop) -->\n        @if (mode() === 'range' && effectiveCalendars() === 2) {\n          <div class=\"sui-datepicker__calendar sui-datepicker__calendar--right\">\n            <sui-date-selector\n              [label]=\"rightMonthLabel()\"\n              [leftIcon]=\"false\"\n              [rightIcon]=\"true\"\n              (next)=\"nextMonth()\"\n            />\n\n            <div class=\"sui-datepicker__day-labels\" role=\"row\">\n              @for (label of dayLabels; track label) {\n                <sui-day-label [label]=\"label\" />\n              }\n            </div>\n\n            <div class=\"sui-datepicker__day-grid\" role=\"grid\">\n              @for (row of rightRows(); track trackRow($index, row)) {\n                <div class=\"sui-datepicker__day-row\" role=\"row\">\n                  @if (row.hasBand) {\n                    <span\n                      class=\"sui-datepicker__range-band\"\n                      [class.sui-datepicker__range-band--round-left]=\"row.bandRoundLeft\"\n                      [class.sui-datepicker__range-band--round-right]=\"row.bandRoundRight\"\n                      [style.--sui-band-start]=\"row.bandStart\"\n                      [style.--sui-band-end]=\"row.bandEnd\"\n                      aria-hidden=\"true\"\n                    ></span>\n                  }\n                  @for (cell of row.cells; track trackCell($index, cell)) {\n                    <sui-day-cell\n                      [day]=\"cell.day\"\n                      [type]=\"mode() === 'range' ? 'range' : 'basic'\"\n                      [selected]=\"false\"\n                      [rangePosition]=\"cellRangePosition(cell)\"\n                      [marked]=\"cell.marked\"\n                      [today]=\"cell.isToday\"\n                      [disabled]=\"cell.disabled\"\n                      [outOfMonth]=\"!cell.inCurrentMonth\"\n                      (clicked)=\"selectCell(cell)\"\n                    />\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n\n      <!-- Footer con Cancelar + Aplicar (Range siempre lo muestra) -->\n      @if (showFooter() || mode() === 'range') {\n        <footer class=\"sui-datepicker__footer\">\n          @if (mode() === 'range' && rangeHint(); as hint) {\n            <span class=\"sui-datepicker__range-hint\">{{ hint }}</span>\n          }\n          <div class=\"sui-datepicker__footer-actions\">\n            <sui-button variant=\"stroke\" color=\"neutral\" [size]=\"footerButtonSize()\" type=\"button\" (click)=\"cancel()\">\n              Cancelar\n            </sui-button>\n            <sui-button variant=\"filled\" color=\"primary\" [size]=\"footerButtonSize()\" type=\"button\" (click)=\"apply()\">\n              Aplicar\n            </sui-button>\n          </div>\n        </footer>\n      }\n    </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;position:relative;font-family:var(--sui-font-sans, var(--font-sans, sans-serif))}:host([data-sui-mode=range]){display:block}.sui-datepicker__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, .12s) var(--sui-motion-ease-out, ease-out),box-shadow var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}.sui-datepicker__trigger:hover:not(:disabled){border-color:var(--sui-stroke-sub-300, #d1d1d1)}.sui-datepicker__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-datepicker__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-datepicker__trigger{height:36px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-size=large]) .sui-datepicker__trigger{height:48px;padding:0 14px;gap:10px;border-radius:var(--sui-radius-12, 12px)}.sui-datepicker__trigger-icon{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-datepicker__trigger-text{flex:1 1 auto;text-align:left;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-datepicker__trigger-text--placeholder{color:var(--sui-text-soft-400, #a3a3a3);font-weight:400}.sui-datepicker__trigger-chevron{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-datepicker__panel{position:absolute;top:calc(100% + 8px);left:0;z-index:50;display:flex;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-20, 20px);box-shadow:var(--sui-shadow-medium, 0 16px 32px -12px rgba(14, 18, 27, .1019607843));overflow:hidden;animation:sui-datepicker-enter .16s cubic-bezier(.23,1,.32,1)}.sui-datepicker__panel--inline{position:static;animation:none}.sui-datepicker__panel--range{width:936px;max-width:calc(100vw - 32px)}:host([data-sui-calendars=\"1\"]) .sui-datepicker__panel--range{width:auto}@keyframes sui-datepicker-enter{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.sui-datepicker__presets{display:flex;flex-direction:column;gap:8px;width:200px;flex-shrink:0;padding:20px 16px 2px;border-right:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #fff);box-sizing:border-box}.sui-datepicker__content{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.sui-datepicker__calendars{display:flex;flex:1 1 auto}.sui-datepicker__calendar{flex:1 1 0;max-width:368px;padding:20px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:8px}.sui-datepicker__calendar--right{border-left:1px solid var(--sui-stroke-soft-200, #ebebeb)}.sui-datepicker__calendar sui-date-selector{width:328px;max-width:328px}.sui-datepicker__day-labels{display:flex;gap:8px;align-items:center;justify-content:space-between;width:328px;max-width:328px}.sui-datepicker__day-grid{display:flex;flex-direction:column;gap:8px;width:328px;max-width:328px}.sui-datepicker__day-row{position:relative;display:flex;gap:8px;align-items:center;justify-content:space-between;width:328px}.sui-datepicker__range-band{position:absolute;inset:0;background:var(--sui-primary-alpha-10, rgba(250, 115, 25, .1019607843));pointer-events:none;z-index:0}.sui-datepicker__range-band--round-left{left:calc(var(--sui-band-start) * var(--sui-day-step, 48px));border-top-left-radius:var(--sui-radius-8, 8px);border-bottom-left-radius:var(--sui-radius-8, 8px)}.sui-datepicker__range-band--round-right{right:calc((6 - var(--sui-band-end)) * var(--sui-day-step, 48px));border-top-right-radius:var(--sui-radius-8, 8px);border-bottom-right-radius:var(--sui-radius-8, 8px)}.sui-datepicker__day-row sui-day-cell{position:relative;z-index:1}.sui-datepicker__footer{display:flex;align-items:center;gap:16px;padding:16px;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb)}:host([data-sui-mode=range]) .sui-datepicker__footer{padding:16px 16px 16px 24px}.sui-datepicker__range-hint{flex:1 0 0;min-width:0;font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-datepicker__footer-actions{display:flex;gap:16px;align-items:center}:host(:not([data-sui-mode=range])) .sui-datepicker__footer-actions{flex:1 0 0;min-width:0}:host(:not([data-sui-mode=range])) .sui-datepicker__footer-actions sui-button{flex:1 0 0;min-width:0}:host([data-sui-mode=range]) .sui-datepicker__footer-actions{flex-shrink:0;margin-left:auto}:host([data-sui-mode=range]) .sui-datepicker__footer-actions sui-button{width:108px}@media(max-width:767px){.sui-datepicker__panel--range{width:calc(100vw - 32px);flex-direction:column}.sui-datepicker__presets{flex-direction:row;overflow-x:auto;width:100%;border-right:none;border-bottom:1px solid var(--sui-stroke-soft-200, #ebebeb);padding:12px 16px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}.sui-datepicker__presets sui-period-range{width:auto;flex-shrink:0;scroll-snap-align:start}.sui-datepicker__calendar{padding-left:12px;padding-right:12px;max-width:none}.sui-datepicker__day-labels,.sui-datepicker__day-grid,.sui-datepicker__day-row{--sui-day-step: 44px;width:304px;max-width:304px;gap:4px}}@media(max-width:767px){:host([data-sui-mode=range]) .sui-datepicker__footer{flex-wrap:wrap;gap:12px 16px;padding:16px}.sui-datepicker__range-hint{flex:1 0 100%}.sui-datepicker__calendar sui-date-selector{width:304px;max-width:304px}:host([data-sui-mode=range]) .sui-datepicker__footer-actions{flex:1 0 100%;margin-left:0}:host([data-sui-mode=range]) .sui-datepicker__footer-actions sui-button{width:auto;flex:1 0 0;min-width:0}}:host([data-sui-size=large]) .sui-datepicker__calendar sui-date-selector{height:48px;padding:4px}:host([data-sui-size=large]) .sui-datepicker__calendar sui-date-selector ::ng-deep sui-compact-button .sui-compact-button__el,:host([data-sui-size=large]) .sui-datepicker__calendar sui-date-selector ::ng-deep .sui-date-selector__placeholder{width:40px;height:40px}@media(max-width:767px){.sui-datepicker__calendar sui-date-selector{height:48px;padding:4px}.sui-datepicker__calendar sui-date-selector ::ng-deep sui-compact-button .sui-compact-button__el,.sui-datepicker__calendar sui-date-selector ::ng-deep .sui-date-selector__placeholder{width:40px;height:40px}}\n"] }]
+                    }, template: "<!-- Trigger (input + icono calendario) \u2014 solo si no es inline -->\n@if (!inline()) {\n  <button\n    type=\"button\"\n    class=\"sui-datepicker__trigger\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-haspopup]=\"true\"\n    (click)=\"toggle()\"\n  >\n    <sui-icon class=\"sui-datepicker__trigger-icon\" name=\"calendar-line\" [size]=\"20\" />\n    <span class=\"sui-datepicker__trigger-text\" [class.sui-datepicker__trigger-text--placeholder]=\"!value()\">\n      {{ triggerText() }}\n    </span>\n    <sui-icon class=\"sui-datepicker__trigger-chevron\" name=\"arrow-down-s-line\" [size]=\"20\" />\n  </button>\n}\n\n<!-- Popover panel \u2014 visible cuando open() o inline() -->\n@if (inline() || open()) {\n  <div class=\"sui-datepicker__panel\"\n       [class.sui-datepicker__panel--inline]=\"inline()\"\n       [class.sui-datepicker__panel--range]=\"mode() === 'range'\"\n       role=\"dialog\">\n    <!-- Sidebar de presets \u2014 solo en mode=range (usa <sui-period-range>) -->\n    @if (mode() === 'range') {\n      <aside class=\"sui-datepicker__presets\" aria-label=\"Rangos predefinidos\">\n        @for (p of presets(); track trackPreset($index, p)) {\n          <sui-period-range\n            [label]=\"p.label\"\n            [active]=\"isPresetActive(p.id)\"\n            (clicked)=\"selectPreset(p)\"\n          />\n        }\n      </aside>\n    }\n\n    <!-- Contenido principal: 1 o 2 calendarios + footer -->\n    <div class=\"sui-datepicker__content\">\n      <div class=\"sui-datepicker__calendars\">\n        <!-- Calendario izquierdo (siempre visible) -->\n        <div class=\"sui-datepicker__calendar\">\n          <sui-date-selector\n            [label]=\"leftMonthLabel()\"\n            [leftIcon]=\"true\"\n            [rightIcon]=\"effectiveCalendars() === 1\"\n            (prev)=\"prevMonth()\"\n            (next)=\"nextMonth()\"\n          />\n\n          <div class=\"sui-datepicker__day-labels\" role=\"row\">\n            @for (label of dayLabels; track label) {\n              <sui-day-label [label]=\"label\" />\n            }\n          </div>\n\n          <div class=\"sui-datepicker__day-grid\" role=\"grid\">\n            @for (row of leftRows(); track trackRow($index, row)) {\n              <div class=\"sui-datepicker__day-row\" role=\"row\">\n                @if (row.hasBand) {\n                  <span\n                    class=\"sui-datepicker__range-band\"\n                    [class.sui-datepicker__range-band--round-left]=\"row.bandRoundLeft\"\n                    [class.sui-datepicker__range-band--round-right]=\"row.bandRoundRight\"\n                    [style.--sui-band-start]=\"row.bandStart\"\n                    [style.--sui-band-end]=\"row.bandEnd\"\n                    aria-hidden=\"true\"\n                  ></span>\n                }\n                @for (cell of row.cells; track trackCell($index, cell)) {\n                  <sui-day-cell\n                    [day]=\"cell.day\"\n                    [type]=\"mode() === 'range' ? 'range' : 'basic'\"\n                    [selected]=\"mode() === 'date' && cell.selected\"\n                    [rangePosition]=\"cellRangePosition(cell)\"\n                    [marked]=\"cell.marked\"\n                    [today]=\"cell.isToday\"\n                    [disabled]=\"cell.disabled\"\n                    [outOfMonth]=\"!cell.inCurrentMonth\"\n                    (clicked)=\"selectCell(cell)\"\n                  />\n                }\n              </div>\n            }\n          </div>\n        </div>\n\n        <!-- Calendario derecho \u2014 solo en mode=range con effectiveCalendars=2 (desktop) -->\n        @if (mode() === 'range' && effectiveCalendars() === 2) {\n          <div class=\"sui-datepicker__calendar sui-datepicker__calendar--right\">\n            <sui-date-selector\n              [label]=\"rightMonthLabel()\"\n              [leftIcon]=\"false\"\n              [rightIcon]=\"true\"\n              (next)=\"nextMonth()\"\n            />\n\n            <div class=\"sui-datepicker__day-labels\" role=\"row\">\n              @for (label of dayLabels; track label) {\n                <sui-day-label [label]=\"label\" />\n              }\n            </div>\n\n            <div class=\"sui-datepicker__day-grid\" role=\"grid\">\n              @for (row of rightRows(); track trackRow($index, row)) {\n                <div class=\"sui-datepicker__day-row\" role=\"row\">\n                  @if (row.hasBand) {\n                    <span\n                      class=\"sui-datepicker__range-band\"\n                      [class.sui-datepicker__range-band--round-left]=\"row.bandRoundLeft\"\n                      [class.sui-datepicker__range-band--round-right]=\"row.bandRoundRight\"\n                      [style.--sui-band-start]=\"row.bandStart\"\n                      [style.--sui-band-end]=\"row.bandEnd\"\n                      aria-hidden=\"true\"\n                    ></span>\n                  }\n                  @for (cell of row.cells; track trackCell($index, cell)) {\n                    <sui-day-cell\n                      [day]=\"cell.day\"\n                      [type]=\"mode() === 'range' ? 'range' : 'basic'\"\n                      [selected]=\"false\"\n                      [rangePosition]=\"cellRangePosition(cell)\"\n                      [marked]=\"cell.marked\"\n                      [today]=\"cell.isToday\"\n                      [disabled]=\"cell.disabled\"\n                      [outOfMonth]=\"!cell.inCurrentMonth\"\n                      (clicked)=\"selectCell(cell)\"\n                    />\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n\n      <!-- Footer con Cancelar + Aplicar (Range siempre lo muestra) -->\n      @if (showFooter() || mode() === 'range') {\n        <footer class=\"sui-datepicker__footer\">\n          @if (mode() === 'range' && rangeHint(); as hint) {\n            <span class=\"sui-datepicker__range-hint\">{{ hint }}</span>\n          }\n          <div class=\"sui-datepicker__footer-actions\">\n            <sui-button variant=\"stroke\" color=\"neutral\" [size]=\"footerButtonSize()\" type=\"button\" (click)=\"cancel()\">\n              Cancelar\n            </sui-button>\n            <sui-button variant=\"filled\" color=\"primary\" [size]=\"footerButtonSize()\" type=\"button\" (click)=\"apply()\">\n              Aplicar\n            </sui-button>\n          </div>\n        </footer>\n      }\n    </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;position:relative;font-family:var(--sui-font-sans, var(--font-sans, sans-serif))}:host([data-sui-mode=range]){display:block}.sui-datepicker__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, .12s) var(--sui-motion-ease-out, ease-out),box-shadow var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}.sui-datepicker__trigger:hover:not(:disabled){border-color:var(--sui-stroke-sub-300, #d1d1d1)}.sui-datepicker__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-datepicker__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-datepicker__trigger{height:36px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-size=large]) .sui-datepicker__trigger{height:48px;padding:0 14px;gap:10px;border-radius:var(--sui-radius-12, 12px)}.sui-datepicker__trigger-icon{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-datepicker__trigger-text{flex:1 1 auto;text-align:left;font-size:var(--sui-type-label-sm-size, 14px);font-weight:var(--sui-type-label-sm-weight, 500);line-height:var(--sui-type-label-sm-line, 20px);letter-spacing:var(--sui-type-label-sm-spacing, -.006em);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-datepicker__trigger-text--placeholder{color:var(--sui-text-soft-400, #a3a3a3);font-weight:400}:host([data-sui-size=large]) .sui-datepicker__trigger-text{font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em)}.sui-datepicker__trigger-chevron{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-datepicker__panel{position:absolute;top:calc(100% + 8px);left:0;z-index:50;display:flex;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-20, 20px);box-shadow:var(--sui-shadow-medium, 0 16px 32px -12px rgba(14, 18, 27, .1019607843));overflow:hidden;animation:sui-datepicker-enter .16s cubic-bezier(.23,1,.32,1)}.sui-datepicker__panel--inline{position:static;animation:none}.sui-datepicker__panel--range{width:936px;max-width:calc(100vw - 32px)}:host([data-sui-calendars=\"1\"]) .sui-datepicker__panel--range{width:auto}@keyframes sui-datepicker-enter{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.sui-datepicker__presets{display:flex;flex-direction:column;gap:8px;width:200px;flex-shrink:0;padding:20px 16px 2px;border-right:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #fff);box-sizing:border-box}.sui-datepicker__content{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.sui-datepicker__calendars{display:flex;flex:1 1 auto}.sui-datepicker__calendar{flex:1 1 0;max-width:368px;padding:20px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:8px}.sui-datepicker__calendar--right{border-left:1px solid var(--sui-stroke-soft-200, #ebebeb)}.sui-datepicker__calendar sui-date-selector{width:328px;max-width:328px}.sui-datepicker__day-labels{display:flex;gap:8px;align-items:center;justify-content:space-between;width:328px;max-width:328px}.sui-datepicker__day-grid{display:flex;flex-direction:column;gap:8px;width:328px;max-width:328px}.sui-datepicker__day-row{position:relative;display:flex;gap:8px;align-items:center;justify-content:space-between;width:328px}.sui-datepicker__range-band{position:absolute;inset:0;background:var(--sui-primary-alpha-10, rgba(250, 115, 25, .1019607843));pointer-events:none;z-index:0}.sui-datepicker__range-band--round-left{left:calc(var(--sui-band-start) * var(--sui-day-step, 48px));border-top-left-radius:var(--sui-radius-8, 8px);border-bottom-left-radius:var(--sui-radius-8, 8px)}.sui-datepicker__range-band--round-right{right:calc((6 - var(--sui-band-end)) * var(--sui-day-step, 48px));border-top-right-radius:var(--sui-radius-8, 8px);border-bottom-right-radius:var(--sui-radius-8, 8px)}.sui-datepicker__day-row sui-day-cell{position:relative;z-index:1}.sui-datepicker__footer{display:flex;align-items:center;gap:16px;padding:16px;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb)}:host([data-sui-mode=range]) .sui-datepicker__footer{padding:16px 16px 16px 24px}.sui-datepicker__range-hint{flex:1 0 0;min-width:0;font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-datepicker__footer-actions{display:flex;gap:16px;align-items:center}:host(:not([data-sui-mode=range])) .sui-datepicker__footer-actions{flex:1 0 0;min-width:0}:host(:not([data-sui-mode=range])) .sui-datepicker__footer-actions sui-button{flex:1 0 0;min-width:0}:host([data-sui-mode=range]) .sui-datepicker__footer-actions{flex-shrink:0;margin-left:auto}:host([data-sui-mode=range]) .sui-datepicker__footer-actions sui-button{width:108px}@media(max-width:767px){.sui-datepicker__panel--range{width:calc(100vw - 32px);flex-direction:column}.sui-datepicker__presets{flex-direction:row;overflow-x:auto;width:100%;border-right:none;border-bottom:1px solid var(--sui-stroke-soft-200, #ebebeb);padding:12px 16px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}.sui-datepicker__presets sui-period-range{width:auto;flex-shrink:0;scroll-snap-align:start}.sui-datepicker__calendar{padding-left:12px;padding-right:12px;max-width:none}.sui-datepicker__day-labels,.sui-datepicker__day-grid,.sui-datepicker__day-row{--sui-day-step: 44px;width:304px;max-width:304px;gap:4px}}@media(max-width:767px){:host([data-sui-mode=range]) .sui-datepicker__footer{flex-wrap:wrap;gap:12px 16px;padding:16px}.sui-datepicker__range-hint{flex:1 0 100%}.sui-datepicker__calendar sui-date-selector{width:304px;max-width:304px}:host([data-sui-mode=range]) .sui-datepicker__footer-actions{flex:1 0 100%;margin-left:0}:host([data-sui-mode=range]) .sui-datepicker__footer-actions sui-button{width:auto;flex:1 0 0;min-width:0}}:host([data-sui-size=large]) .sui-datepicker__calendar sui-date-selector{height:48px;padding:4px}:host([data-sui-size=large]) .sui-datepicker__calendar sui-date-selector ::ng-deep sui-compact-button .sui-compact-button__el,:host([data-sui-size=large]) .sui-datepicker__calendar sui-date-selector ::ng-deep .sui-date-selector__placeholder{width:40px;height:40px}@media(max-width:767px){.sui-datepicker__calendar sui-date-selector{height:48px;padding:4px}.sui-datepicker__calendar sui-date-selector ::ng-deep sui-compact-button .sui-compact-button__el,.sui-datepicker__calendar sui-date-selector ::ng-deep .sui-date-selector__placeholder{width:40px;height:40px}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], calendars: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendars", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], markedDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "markedDates", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], onDocPointerDown: [{
                 type: HostListener,
                 args: ['document:pointerdown', ['$event']]
@@ -10672,7 +10672,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]=\"labelSize()\"\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      [attr.enterkeyhint]=\"enterKeyHint()\"\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]=\"clearPx()\" />\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]=\"20\" />\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    [icon]=\"_resolvedHintIcon()\"\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}:host([data-sui-size=large]) .sui-input__field{gap:10px;padding:11px 12px 11px 14px;border-radius:var(--sui-radius-12);min-height:48px}:host([data-sui-size=xlarge]) .sui-input__field{gap:10px;padding:13px 14px 13px 16px;border-radius:var(--sui-radius-12);min-height:52px}:host([data-sui-full-radius]) .sui-input__field{border-radius:999px}.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}:host([data-sui-size=large]) .sui-input__field--split .sui-input__inner{gap:10px;padding:11px 12px 11px 14px}:host([data-sui-size=xlarge]) .sui-input__field--split .sui-input__inner{gap:10px;padding:13px 14px 13px 16px}.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}:host([data-sui-size=large]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:12px}:host([data-sui-size=xlarge]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:14px}.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}:host(:not([data-sui-leading-control])[data-sui-size=large]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:12px 10px 12px 12px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=xlarge]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:14px 10px 14px 14px;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)}:host([data-sui-size=xsmall]) .sui-input__clear{width:12px;height:12px}:host([data-sui-size=small]) .sui-input__clear{width:14px;height:14px}:host([data-sui-size=large]) .sui-input__clear{width:18px;height:18px}:host([data-sui-size=xlarge]) .sui-input__clear{width:20px;height:20px}.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:20px;height:20px;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}.sui-input__control[type=date],.sui-input__control[type=time],.sui-input__control[type=datetime-local],.sui-input__control[type=month],.sui-input__control[type=week]{-webkit-appearance:none;appearance:none;min-height:1.25em}.sui-input__control[type=date]::-webkit-date-and-time-value,.sui-input__control[type=time]::-webkit-date-and-time-value,.sui-input__control[type=datetime-local]::-webkit-date-and-time-value,.sui-input__control[type=month]::-webkit-date-and-time-value,.sui-input__control[type=week]::-webkit-date-and-time-value{text-align:left;margin:0}.sui-input__control[type=date]::-webkit-calendar-picker-indicator,.sui-input__control[type=time]::-webkit-calendar-picker-indicator,.sui-input__control[type=datetime-local]::-webkit-calendar-picker-indicator,.sui-input__control[type=month]::-webkit-calendar-picker-indicator,.sui-input__control[type=week]::-webkit-calendar-picker-indicator{margin-left:auto;opacity:.55;cursor:pointer}@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 });
+        ], 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]=\"labelSize()\"\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      [attr.enterkeyhint]=\"enterKeyHint()\"\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]=\"clearPx()\" />\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]=\"20\" />\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    [icon]=\"_resolvedHintIcon()\"\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}:host([data-sui-size=large]) .sui-input__field{gap:10px;padding:11px 12px 11px 14px;border-radius:var(--sui-radius-12);min-height:48px}:host([data-sui-size=xlarge]) .sui-input__field{gap:10px;padding:13px 14px 13px 16px;border-radius:var(--sui-radius-12);min-height:52px}:host([data-sui-full-radius]) .sui-input__field{border-radius:999px}.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}:host([data-sui-size=large]) .sui-input__field--split .sui-input__inner{gap:10px;padding:11px 12px 11px 14px}:host([data-sui-size=xlarge]) .sui-input__field--split .sui-input__inner{gap:10px;padding:13px 14px 13px 16px}.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}:host([data-sui-size=large]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:12px}:host([data-sui-size=xlarge]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:14px}.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}:host(:not([data-sui-leading-control])[data-sui-size=large]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:12px 10px 12px 12px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=xlarge]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:14px 10px 14px 14px;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}:host([data-sui-size=large]) .sui-input__prefix,:host([data-sui-size=xlarge]) .sui-input__prefix{font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px)}.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)}:host([data-sui-size=xsmall]) .sui-input__clear{width:12px;height:12px}:host([data-sui-size=small]) .sui-input__clear{width:14px;height:14px}:host([data-sui-size=large]) .sui-input__clear{width:18px;height:18px}:host([data-sui-size=xlarge]) .sui-input__clear{width:20px;height:20px}.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:20px;height:20px;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}.sui-input__control[type=date],.sui-input__control[type=time],.sui-input__control[type=datetime-local],.sui-input__control[type=month],.sui-input__control[type=week]{-webkit-appearance:none;appearance:none;min-height:1.25em}.sui-input__control[type=date]::-webkit-date-and-time-value,.sui-input__control[type=time]::-webkit-date-and-time-value,.sui-input__control[type=datetime-local]::-webkit-date-and-time-value,.sui-input__control[type=month]::-webkit-date-and-time-value,.sui-input__control[type=week]::-webkit-date-and-time-value{text-align:left;margin:0}.sui-input__control[type=date]::-webkit-calendar-picker-indicator,.sui-input__control[type=time]::-webkit-calendar-picker-indicator,.sui-input__control[type=datetime-local]::-webkit-calendar-picker-indicator,.sui-input__control[type=month]::-webkit-calendar-picker-indicator,.sui-input__control[type=week]::-webkit-calendar-picker-indicator{margin-left:auto;opacity:.55;cursor:pointer}:host([data-sui-size=large]) .sui-input__control,:host([data-sui-size=xlarge]) .sui-input__control{font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}@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,
@@ -10699,7 +10699,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]=\"labelSize()\"\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      [attr.enterkeyhint]=\"enterKeyHint()\"\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]=\"clearPx()\" />\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]=\"20\" />\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    [icon]=\"_resolvedHintIcon()\"\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}:host([data-sui-size=large]) .sui-input__field{gap:10px;padding:11px 12px 11px 14px;border-radius:var(--sui-radius-12);min-height:48px}:host([data-sui-size=xlarge]) .sui-input__field{gap:10px;padding:13px 14px 13px 16px;border-radius:var(--sui-radius-12);min-height:52px}:host([data-sui-full-radius]) .sui-input__field{border-radius:999px}.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}:host([data-sui-size=large]) .sui-input__field--split .sui-input__inner{gap:10px;padding:11px 12px 11px 14px}:host([data-sui-size=xlarge]) .sui-input__field--split .sui-input__inner{gap:10px;padding:13px 14px 13px 16px}.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}:host([data-sui-size=large]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:12px}:host([data-sui-size=xlarge]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:14px}.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}:host(:not([data-sui-leading-control])[data-sui-size=large]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:12px 10px 12px 12px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=xlarge]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:14px 10px 14px 14px;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)}:host([data-sui-size=xsmall]) .sui-input__clear{width:12px;height:12px}:host([data-sui-size=small]) .sui-input__clear{width:14px;height:14px}:host([data-sui-size=large]) .sui-input__clear{width:18px;height:18px}:host([data-sui-size=xlarge]) .sui-input__clear{width:20px;height:20px}.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:20px;height:20px;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}.sui-input__control[type=date],.sui-input__control[type=time],.sui-input__control[type=datetime-local],.sui-input__control[type=month],.sui-input__control[type=week]{-webkit-appearance:none;appearance:none;min-height:1.25em}.sui-input__control[type=date]::-webkit-date-and-time-value,.sui-input__control[type=time]::-webkit-date-and-time-value,.sui-input__control[type=datetime-local]::-webkit-date-and-time-value,.sui-input__control[type=month]::-webkit-date-and-time-value,.sui-input__control[type=week]::-webkit-date-and-time-value{text-align:left;margin:0}.sui-input__control[type=date]::-webkit-calendar-picker-indicator,.sui-input__control[type=time]::-webkit-calendar-picker-indicator,.sui-input__control[type=datetime-local]::-webkit-calendar-picker-indicator,.sui-input__control[type=month]::-webkit-calendar-picker-indicator,.sui-input__control[type=week]::-webkit-calendar-picker-indicator{margin-left:auto;opacity:.55;cursor:pointer}@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]=\"labelSize()\"\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      [attr.enterkeyhint]=\"enterKeyHint()\"\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]=\"clearPx()\" />\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]=\"20\" />\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    [icon]=\"_resolvedHintIcon()\"\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}:host([data-sui-size=large]) .sui-input__field{gap:10px;padding:11px 12px 11px 14px;border-radius:var(--sui-radius-12);min-height:48px}:host([data-sui-size=xlarge]) .sui-input__field{gap:10px;padding:13px 14px 13px 16px;border-radius:var(--sui-radius-12);min-height:52px}:host([data-sui-full-radius]) .sui-input__field{border-radius:999px}.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}:host([data-sui-size=large]) .sui-input__field--split .sui-input__inner{gap:10px;padding:11px 12px 11px 14px}:host([data-sui-size=xlarge]) .sui-input__field--split .sui-input__inner{gap:10px;padding:13px 14px 13px 16px}.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}:host([data-sui-size=large]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:12px}:host([data-sui-size=xlarge]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:14px}.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}:host(:not([data-sui-leading-control])[data-sui-size=large]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:12px 10px 12px 12px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=xlarge]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:14px 10px 14px 14px;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}:host([data-sui-size=large]) .sui-input__prefix,:host([data-sui-size=xlarge]) .sui-input__prefix{font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px)}.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)}:host([data-sui-size=xsmall]) .sui-input__clear{width:12px;height:12px}:host([data-sui-size=small]) .sui-input__clear{width:14px;height:14px}:host([data-sui-size=large]) .sui-input__clear{width:18px;height:18px}:host([data-sui-size=xlarge]) .sui-input__clear{width:20px;height:20px}.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:20px;height:20px;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}.sui-input__control[type=date],.sui-input__control[type=time],.sui-input__control[type=datetime-local],.sui-input__control[type=month],.sui-input__control[type=week]{-webkit-appearance:none;appearance:none;min-height:1.25em}.sui-input__control[type=date]::-webkit-date-and-time-value,.sui-input__control[type=time]::-webkit-date-and-time-value,.sui-input__control[type=datetime-local]::-webkit-date-and-time-value,.sui-input__control[type=month]::-webkit-date-and-time-value,.sui-input__control[type=week]::-webkit-date-and-time-value{text-align:left;margin:0}.sui-input__control[type=date]::-webkit-calendar-picker-indicator,.sui-input__control[type=time]::-webkit-calendar-picker-indicator,.sui-input__control[type=datetime-local]::-webkit-calendar-picker-indicator,.sui-input__control[type=month]::-webkit-calendar-picker-indicator,.sui-input__control[type=week]::-webkit-calendar-picker-indicator{margin-left:auto;opacity:.55;cursor:pointer}:host([data-sui-size=large]) .sui-input__control,:host([data-sui-size=xlarge]) .sui-input__control{font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}@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 }] }], fullRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullRadius", 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 }] }], hintIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintIcon", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], inputmode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputmode", required: false }] }], enterkeyhint: [{ type: i0.Input, args: [{ isSignal: true, alias: "enterkeyhint", 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']
@@ -15196,7 +15196,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]=\"labelSize()\"\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, SOLO con selecci\u00F3n hecha \u2014 vac\u00EDo muestra globo)\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() && selectedLabel() !== null) {\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      [class.sui-select__panel--large]=\"size() === 'large'\"\n      [class.sui-select__panel--xlarge]=\"size() === 'xlarge'\"\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);min-height:20px}:host([data-sui-size=small]) .sui-select__trigger{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8);min-height:20px}: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);min-height:20px}:host([data-sui-size=large]) .sui-select__trigger{gap:10px;padding:11px 12px 11px 14px;border-radius:var(--sui-radius-12);min-height:24px}:host([data-sui-size=xlarge]) .sui-select__trigger{gap:10px;padding:13px 14px 13px 16px;border-radius:var(--sui-radius-12);min-height:24px}.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}.sui-select__panel--large sui-dropdown-item{min-height:44px;padding:12px 8px}.sui-select__panel--xlarge sui-dropdown-item{min-height:48px;padding:14px 8px}@media(max-width:767px){.sui-select__panel:not(.sui-select__panel--xlarge) sui-dropdown-item{min-height:44px;padding:12px 8px}}\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 });
+        ], 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]=\"labelSize()\"\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, SOLO con selecci\u00F3n hecha \u2014 vac\u00EDo muestra globo)\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() && selectedLabel() !== null) {\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      [class.sui-select__panel--large]=\"size() === 'large'\"\n      [class.sui-select__panel--xlarge]=\"size() === 'xlarge'\"\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);min-height:20px}:host([data-sui-size=small]) .sui-select__trigger{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8);min-height:20px}: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);min-height:20px}:host([data-sui-size=large]) .sui-select__trigger{gap:10px;padding:11px 12px 11px 14px;border-radius:var(--sui-radius-12);min-height:24px}:host([data-sui-size=xlarge]) .sui-select__trigger{gap:10px;padding:13px 14px 13px 16px;border-radius:var(--sui-radius-12);min-height:24px}.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-size=large]) .sui-select__value,:host([data-sui-size=xlarge]) .sui-select__value{font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}: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}.sui-select__panel--large sui-dropdown-item{min-height:44px;padding:10px 8px}.sui-select__panel--xlarge sui-dropdown-item{min-height:48px;padding:12px 8px}.sui-select__panel--large sui-dropdown-item ::ng-deep .sui-dropdown-item__label,.sui-select__panel--xlarge sui-dropdown-item ::ng-deep .sui-dropdown-item__label{font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}@media(max-width:767px){.sui-select__panel:not(.sui-select__panel--large):not(.sui-select__panel--xlarge) sui-dropdown-item{min-height:44px;padding:12px 8px}}\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,
@@ -15224,7 +15224,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]=\"labelSize()\"\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, SOLO con selecci\u00F3n hecha \u2014 vac\u00EDo muestra globo)\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() && selectedLabel() !== null) {\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      [class.sui-select__panel--large]=\"size() === 'large'\"\n      [class.sui-select__panel--xlarge]=\"size() === 'xlarge'\"\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);min-height:20px}:host([data-sui-size=small]) .sui-select__trigger{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8);min-height:20px}: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);min-height:20px}:host([data-sui-size=large]) .sui-select__trigger{gap:10px;padding:11px 12px 11px 14px;border-radius:var(--sui-radius-12);min-height:24px}:host([data-sui-size=xlarge]) .sui-select__trigger{gap:10px;padding:13px 14px 13px 16px;border-radius:var(--sui-radius-12);min-height:24px}.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}.sui-select__panel--large sui-dropdown-item{min-height:44px;padding:12px 8px}.sui-select__panel--xlarge sui-dropdown-item{min-height:48px;padding:14px 8px}@media(max-width:767px){.sui-select__panel:not(.sui-select__panel--xlarge) sui-dropdown-item{min-height:44px;padding:12px 8px}}\n"] }]
+                    }, template: "@if (label()) {\n  <sui-form-label\n    [label]=\"label()!\"\n    [sublabel]=\"sublabel()\"\n    [required]=\"required()\"\n    [tooltip]=\"tooltip()\"\n    [size]=\"labelSize()\"\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, SOLO con selecci\u00F3n hecha \u2014 vac\u00EDo muestra globo)\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() && selectedLabel() !== null) {\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      [class.sui-select__panel--large]=\"size() === 'large'\"\n      [class.sui-select__panel--xlarge]=\"size() === 'xlarge'\"\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);min-height:20px}:host([data-sui-size=small]) .sui-select__trigger{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8);min-height:20px}: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);min-height:20px}:host([data-sui-size=large]) .sui-select__trigger{gap:10px;padding:11px 12px 11px 14px;border-radius:var(--sui-radius-12);min-height:24px}:host([data-sui-size=xlarge]) .sui-select__trigger{gap:10px;padding:13px 14px 13px 16px;border-radius:var(--sui-radius-12);min-height:24px}.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-size=large]) .sui-select__value,:host([data-sui-size=xlarge]) .sui-select__value{font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}: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}.sui-select__panel--large sui-dropdown-item{min-height:44px;padding:10px 8px}.sui-select__panel--xlarge sui-dropdown-item{min-height:48px;padding:12px 8px}.sui-select__panel--large sui-dropdown-item ::ng-deep .sui-dropdown-item__label,.sui-select__panel--xlarge sui-dropdown-item ::ng-deep .sui-dropdown-item__label{font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}@media(max-width:767px){.sui-select__panel:not(.sui-select__panel--large):not(.sui-select__panel--xlarge) sui-dropdown-item{min-height:44px;padding:12px 8px}}\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']]
@@ -16886,7 +16886,7 @@ class SuiSwitchLabel {
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     sublabel = input(null, ...(ngDevMode ? [{ debugName: "sublabel" }] : /* istanbul ignore next */ []));
     description = input(null, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
-    /** Tamaño del switch interno — lo decide el padre (componente dumb). */
+    /** Tamaño del switch interno y del texto (large/xlarge → 16/24) — lo decide el padre (componente dumb). */
     size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     /** Badge junto al label — string shorthand ('NEW') o SuiBadgeConfig
         (label + color/variant/size, tipado como sui-badge). null = sin badge. */
@@ -16990,13 +16990,13 @@ class SuiSwitchLabel {
         this._disabledByForm.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiSwitchLabel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiSwitchLabel, isStandalone: true, selector: "sui-switch-label", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "flip", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeChange: "activeChange", linkClick: "linkClick" }, host: { listeners: { "click": "onLabelClick($event)" }, properties: { "attr.data-sui-flip": "flip() ? \"\" : null", "attr.data-sui-with-description": "description() ? \"\" : null", "attr.data-sui-disabled": "isDisabled() ? \"\" : null" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiSwitchLabel, isStandalone: true, selector: "sui-switch-label", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "flip", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeChange: "activeChange", linkClick: "linkClick" }, host: { listeners: { "click": "onLabelClick($event)" }, properties: { "attr.data-sui-size": "size()", "attr.data-sui-flip": "flip() ? \"\" : null", "attr.data-sui-with-description": "description() ? \"\" : null", "attr.data-sui-disabled": "isDisabled() ? \"\" : null" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SuiSwitchLabel),
                 multi: true,
             },
-        ], ngImport: i0, template: "<sui-switch\n  class=\"sui-switch-label__switch\"\n  [size]=\"size()\"\n  [checked]=\"effectiveActive()\"\n  [disabled]=\"isDisabled()\"\n  (checkedChange)=\"onSwitchChange($event)\"\n/>\n\n<div class=\"sui-switch-label__content\">\n  <div class=\"sui-switch-label__title\">\n    <span class=\"sui-switch-label__label\">{{ label() }}</span>\n    @if (sublabel(); as sl) {\n      <span class=\"sui-switch-label__sublabel\">{{ sl }}</span>\n    }\n    @if (badgeCfg(); as bcfg) {\n      <sui-badge\n        class=\"sui-switch-label__badge\"\n        [color]=\"bcfg.color ?? 'orange'\"\n        [variant]=\"bcfg.variant ?? 'light'\"\n        [size]=\"bcfg.size ?? 'small'\"\n      >{{ bcfg.label }}</sui-badge>\n    }\n  </div>\n\n  @if (description(); as desc) {\n    <p class=\"sui-switch-label__description\">{{ desc }}</p>\n\n    @if (linkCfg(); as link) {\n      <!-- Homologado con checkbox-label: sui-link-button (antes <button> crudo\n           con estilos propios) + soporte href/target/rel. -->\n      <sui-link-button\n        variant=\"primary\"\n        size=\"small\"\n        [disabled]=\"isDisabled()\"\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  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;font-family:var(--sui-font-sans, \"Inter\", system-ui, sans-serif);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;-webkit-tap-highlight-color:transparent}:host([data-sui-flip]) .sui-switch-label__switch{order:2}:host([data-sui-flip]) .sui-switch-label__content{order:1}:host([data-sui-disabled]){cursor:not-allowed}:host([data-sui-disabled]) .sui-switch-label__content{opacity:.5}:host([data-sui-disabled]) .sui-switch-label__switch{opacity:.5}.sui-switch-label__switch{flex-shrink:0}.sui-switch-label__content{display:flex;flex:1 0 0;min-width:0;flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-with-description]) .sui-switch-label__content{gap:10px}.sui-switch-label__title{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.sui-switch-label__label{font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950)}:host([data-sui-with-description]) .sui-switch-label__label{font-weight:500}.sui-switch-label__sublabel{font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600)}.sui-switch-label__badge{flex-shrink:0}.sui-switch-label__description{margin:0;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600);word-break:break-word}\n"], dependencies: [{ kind: "component", type: SuiSwitch, selector: "sui-switch", inputs: ["size", "checked", "disabled"], outputs: ["checkedChange"] }, { kind: "component", type: SuiBadge, selector: "sui-badge", inputs: ["color", "variant", "size", "type", "disabled"] }, { 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 });
+        ], ngImport: i0, template: "<sui-switch\n  class=\"sui-switch-label__switch\"\n  [size]=\"size()\"\n  [checked]=\"effectiveActive()\"\n  [disabled]=\"isDisabled()\"\n  (checkedChange)=\"onSwitchChange($event)\"\n/>\n\n<div class=\"sui-switch-label__content\">\n  <div class=\"sui-switch-label__title\">\n    <span class=\"sui-switch-label__label\">{{ label() }}</span>\n    @if (sublabel(); as sl) {\n      <span class=\"sui-switch-label__sublabel\">{{ sl }}</span>\n    }\n    @if (badgeCfg(); as bcfg) {\n      <sui-badge\n        class=\"sui-switch-label__badge\"\n        [color]=\"bcfg.color ?? 'orange'\"\n        [variant]=\"bcfg.variant ?? 'light'\"\n        [size]=\"bcfg.size ?? 'small'\"\n      >{{ bcfg.label }}</sui-badge>\n    }\n  </div>\n\n  @if (description(); as desc) {\n    <p class=\"sui-switch-label__description\">{{ desc }}</p>\n\n    @if (linkCfg(); as link) {\n      <!-- Homologado con checkbox-label: sui-link-button (antes <button> crudo\n           con estilos propios) + soporte href/target/rel. -->\n      <sui-link-button\n        variant=\"primary\"\n        size=\"small\"\n        [disabled]=\"isDisabled()\"\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  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;font-family:var(--sui-font-sans, \"Inter\", system-ui, sans-serif);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;-webkit-tap-highlight-color:transparent}:host([data-sui-flip]) .sui-switch-label__switch{order:2}:host([data-sui-flip]) .sui-switch-label__content{order:1}:host([data-sui-disabled]){cursor:not-allowed}:host([data-sui-disabled]) .sui-switch-label__content{opacity:.5}:host([data-sui-disabled]) .sui-switch-label__switch{opacity:.5}.sui-switch-label__switch{flex-shrink:0}.sui-switch-label__content{display:flex;flex:1 0 0;min-width:0;flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-with-description]) .sui-switch-label__content{gap:10px}.sui-switch-label__title{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.sui-switch-label__label{font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950)}:host([data-sui-with-description]) .sui-switch-label__label{font-weight:500}.sui-switch-label__sublabel{font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600)}.sui-switch-label__badge{flex-shrink:0}.sui-switch-label__description{margin:0;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600);word-break:break-word}:host([data-sui-size=large]) .sui-switch-label__label,:host([data-sui-size=xlarge]) .sui-switch-label__label{font-size:var(--sui-type-paragraph-md-size, 16px);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}:host([data-sui-size=xlarge]) .sui-switch-label__content{padding-top:2px}\n"], dependencies: [{ kind: "component", type: SuiSwitch, selector: "sui-switch", inputs: ["size", "checked", "disabled"], outputs: ["checkedChange"] }, { kind: "component", type: SuiBadge, selector: "sui-badge", inputs: ["color", "variant", "size", "type", "disabled"] }, { 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: SuiSwitchLabel, decorators: [{
             type: Component,
@@ -17007,11 +17007,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                             multi: true,
                         },
                     ], host: {
+                        /* Driver del texto por tamaño en el SCSS (regla del 03-10-2026). */
+                        '[attr.data-sui-size]': 'size()',
                         '[attr.data-sui-flip]': 'flip() ? "" : null',
                         '[attr.data-sui-with-description]': 'description() ? "" : null',
                         '[attr.data-sui-disabled]': 'isDisabled() ? "" : null',
                         '(click)': 'onLabelClick($event)',
-                    }, template: "<sui-switch\n  class=\"sui-switch-label__switch\"\n  [size]=\"size()\"\n  [checked]=\"effectiveActive()\"\n  [disabled]=\"isDisabled()\"\n  (checkedChange)=\"onSwitchChange($event)\"\n/>\n\n<div class=\"sui-switch-label__content\">\n  <div class=\"sui-switch-label__title\">\n    <span class=\"sui-switch-label__label\">{{ label() }}</span>\n    @if (sublabel(); as sl) {\n      <span class=\"sui-switch-label__sublabel\">{{ sl }}</span>\n    }\n    @if (badgeCfg(); as bcfg) {\n      <sui-badge\n        class=\"sui-switch-label__badge\"\n        [color]=\"bcfg.color ?? 'orange'\"\n        [variant]=\"bcfg.variant ?? 'light'\"\n        [size]=\"bcfg.size ?? 'small'\"\n      >{{ bcfg.label }}</sui-badge>\n    }\n  </div>\n\n  @if (description(); as desc) {\n    <p class=\"sui-switch-label__description\">{{ desc }}</p>\n\n    @if (linkCfg(); as link) {\n      <!-- Homologado con checkbox-label: sui-link-button (antes <button> crudo\n           con estilos propios) + soporte href/target/rel. -->\n      <sui-link-button\n        variant=\"primary\"\n        size=\"small\"\n        [disabled]=\"isDisabled()\"\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  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;font-family:var(--sui-font-sans, \"Inter\", system-ui, sans-serif);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;-webkit-tap-highlight-color:transparent}:host([data-sui-flip]) .sui-switch-label__switch{order:2}:host([data-sui-flip]) .sui-switch-label__content{order:1}:host([data-sui-disabled]){cursor:not-allowed}:host([data-sui-disabled]) .sui-switch-label__content{opacity:.5}:host([data-sui-disabled]) .sui-switch-label__switch{opacity:.5}.sui-switch-label__switch{flex-shrink:0}.sui-switch-label__content{display:flex;flex:1 0 0;min-width:0;flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-with-description]) .sui-switch-label__content{gap:10px}.sui-switch-label__title{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.sui-switch-label__label{font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950)}:host([data-sui-with-description]) .sui-switch-label__label{font-weight:500}.sui-switch-label__sublabel{font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600)}.sui-switch-label__badge{flex-shrink:0}.sui-switch-label__description{margin:0;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600);word-break:break-word}\n"] }]
+                    }, template: "<sui-switch\n  class=\"sui-switch-label__switch\"\n  [size]=\"size()\"\n  [checked]=\"effectiveActive()\"\n  [disabled]=\"isDisabled()\"\n  (checkedChange)=\"onSwitchChange($event)\"\n/>\n\n<div class=\"sui-switch-label__content\">\n  <div class=\"sui-switch-label__title\">\n    <span class=\"sui-switch-label__label\">{{ label() }}</span>\n    @if (sublabel(); as sl) {\n      <span class=\"sui-switch-label__sublabel\">{{ sl }}</span>\n    }\n    @if (badgeCfg(); as bcfg) {\n      <sui-badge\n        class=\"sui-switch-label__badge\"\n        [color]=\"bcfg.color ?? 'orange'\"\n        [variant]=\"bcfg.variant ?? 'light'\"\n        [size]=\"bcfg.size ?? 'small'\"\n      >{{ bcfg.label }}</sui-badge>\n    }\n  </div>\n\n  @if (description(); as desc) {\n    <p class=\"sui-switch-label__description\">{{ desc }}</p>\n\n    @if (linkCfg(); as link) {\n      <!-- Homologado con checkbox-label: sui-link-button (antes <button> crudo\n           con estilos propios) + soporte href/target/rel. -->\n      <sui-link-button\n        variant=\"primary\"\n        size=\"small\"\n        [disabled]=\"isDisabled()\"\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  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;font-family:var(--sui-font-sans, \"Inter\", system-ui, sans-serif);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;-webkit-tap-highlight-color:transparent}:host([data-sui-flip]) .sui-switch-label__switch{order:2}:host([data-sui-flip]) .sui-switch-label__content{order:1}:host([data-sui-disabled]){cursor:not-allowed}:host([data-sui-disabled]) .sui-switch-label__content{opacity:.5}:host([data-sui-disabled]) .sui-switch-label__switch{opacity:.5}.sui-switch-label__switch{flex-shrink:0}.sui-switch-label__content{display:flex;flex:1 0 0;min-width:0;flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-with-description]) .sui-switch-label__content{gap:10px}.sui-switch-label__title{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.sui-switch-label__label{font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950)}:host([data-sui-with-description]) .sui-switch-label__label{font-weight:500}.sui-switch-label__sublabel{font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600)}.sui-switch-label__badge{flex-shrink:0}.sui-switch-label__description{margin:0;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600);word-break:break-word}:host([data-sui-size=large]) .sui-switch-label__label,:host([data-sui-size=xlarge]) .sui-switch-label__label{font-size:var(--sui-type-paragraph-md-size, 16px);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}:host([data-sui-size=xlarge]) .sui-switch-label__content{padding-top:2px}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], flip: [{ type: i0.Input, args: [{ isSignal: true, alias: "flip", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], activeChange: [{ type: i0.Output, args: ["activeChange"] }], linkClick: [{ type: i0.Output, args: ["linkClick"] }] } });
 
 /**
@@ -17033,7 +17035,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  *   />
  *
  * Tamaños (extensión SUI, 03-10-2026): small 32 · medium 36 (default) ·
- * large 40. Los tres con texto label-sm 14; cambia el alto y el aire lateral.
+ * large 40. small y medium con texto label-sm 14; large en label-md 16/24 (regla
+ * del 03-10-2026). Cambia el alto y el aire lateral.
  *
  *   También acepta objetos:
  *   <sui-tab-chips
@@ -17105,7 +17108,7 @@ class SuiTabChips {
         nav.scrollTo({ left: Math.max(0, offset), behavior: 'smooth' });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTabChips, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiTabChips, isStandalone: true, selector: "sui-tab-chips", inputs: { chips: { classPropertyName: "chips", publicName: "chips", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, autoScroll: { classPropertyName: "autoScroll", publicName: "autoScroll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.sui-tab-chips--host-sticky": "sticky()", "attr.data-sui-size": "size()" } }, viewQueries: [{ propertyName: "sentinelRef", first: true, predicate: ["sentinel"], descendants: true }, { propertyName: "navRef", first: true, predicate: ["nav"], descendants: true }], ngImport: i0, template: "@if (sticky()) {\n  <div #sentinel class=\"sui-tab-chips__sentinel\" aria-hidden=\"true\"></div>\n}\n<nav\n  #nav\n  class=\"sui-tab-chips\"\n  [class.sui-tab-chips--sticky]=\"sticky()\"\n  [class.sui-tab-chips--stuck]=\"sticky() && stuck()\"\n  role=\"tablist\"\n>\n  @for (chip of normalizedChips(); track chip.value) {\n    <button\n      type=\"button\"\n      class=\"sui-tab-chips__chip\"\n      [class.sui-tab-chips__chip--active]=\"value() === chip.value\"\n      [attr.data-sui-chip-value]=\"chip.value\"\n      [attr.aria-selected]=\"value() === chip.value\"\n      [attr.tabindex]=\"value() === chip.value ? 0 : -1\"\n      role=\"tab\"\n      (click)=\"select(chip.value)\"\n    >\n      <span class=\"sui-tab-chips__chip-label\">{{ chip.label }}</span>\n      @if (chip.count) {\n        <span class=\"sui-tab-chips__chip-count\" aria-hidden=\"true\">{{ chip.count }}</span>\n      }\n    </button>\n  }\n</nav>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}:host(.sui-tab-chips--host-sticky){display:contents}.sui-tab-chips__sentinel{height:1px;margin-top:16px;margin-bottom:-1px;pointer-events:none}.sui-tab-chips{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:12px 0;background:transparent;scrollbar-width:none}.sui-tab-chips::-webkit-scrollbar{display:none}.sui-tab-chips--sticky{position:sticky;top:0;z-index:20;transition:padding-top var(--sui-motion-duration-fast, .15s) var(--sui-motion-ease-out, ease),background var(--sui-motion-duration-fast, .15s) var(--sui-motion-ease-out, ease)}.sui-tab-chips--stuck{padding-top:calc(env(safe-area-inset-top,0px) + 12px);background:var(--sui-bg-weak-50, #f7f7f7)}.sui-tab-chips__chip{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);color:var(--sui-text-sub-600, #5c5c5c);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size, 13px);font-weight:600;letter-spacing:var(--sui-type-label-sm-spacing, -.006em);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),border-color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),transform var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease)}.sui-tab-chips__chip:hover{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-strong-950, #171717)}.sui-tab-chips__chip:active{transform:scale(.96)}.sui-tab-chips__chip:active:not(:disabled),.sui-tab-chips__chip:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-primary-alpha-10)}.sui-tab-chips__chip--active{background:var(--sui-bg-strong-950, #171717);color:var(--sui-bg-white-0, #fff);border-color:var(--sui-bg-strong-950, #171717)}.sui-tab-chips__chip--active:hover{background:var(--sui-bg-strong-950, #171717);color:var(--sui-bg-white-0, #fff)}.sui-tab-chips__chip-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}:host([data-sui-size=small]) .sui-tab-chips__chip{box-sizing:border-box;height:32px;padding:0 12px;line-height:var(--sui-type-label-sm-line, 20px)}:host([data-sui-size=large]) .sui-tab-chips__chip{box-sizing:border-box;height:40px;padding:0 16px;line-height:var(--sui-type-label-sm-line, 20px)}:host([data-sui-size=small]) .sui-tab-chips__chip-count{min-width:16px;height:16px;padding:0 5px}:host([data-sui-size=large]) .sui-tab-chips__chip-count{min-width:20px;height:20px;padding:0 6px;font-size:var(--sui-type-label-xs-size, 12px)}.sui-tab-chips__chip--active .sui-tab-chips__chip-count{background:color-mix(in srgb,var(--sui-bg-white-0, #fff) 22%,transparent);color:var(--sui-bg-white-0, #fff)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiTabChips, isStandalone: true, selector: "sui-tab-chips", inputs: { chips: { classPropertyName: "chips", publicName: "chips", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, autoScroll: { classPropertyName: "autoScroll", publicName: "autoScroll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.sui-tab-chips--host-sticky": "sticky()", "attr.data-sui-size": "size()" } }, viewQueries: [{ propertyName: "sentinelRef", first: true, predicate: ["sentinel"], descendants: true }, { propertyName: "navRef", first: true, predicate: ["nav"], descendants: true }], ngImport: i0, template: "@if (sticky()) {\n  <div #sentinel class=\"sui-tab-chips__sentinel\" aria-hidden=\"true\"></div>\n}\n<nav\n  #nav\n  class=\"sui-tab-chips\"\n  [class.sui-tab-chips--sticky]=\"sticky()\"\n  [class.sui-tab-chips--stuck]=\"sticky() && stuck()\"\n  role=\"tablist\"\n>\n  @for (chip of normalizedChips(); track chip.value) {\n    <button\n      type=\"button\"\n      class=\"sui-tab-chips__chip\"\n      [class.sui-tab-chips__chip--active]=\"value() === chip.value\"\n      [attr.data-sui-chip-value]=\"chip.value\"\n      [attr.aria-selected]=\"value() === chip.value\"\n      [attr.tabindex]=\"value() === chip.value ? 0 : -1\"\n      role=\"tab\"\n      (click)=\"select(chip.value)\"\n    >\n      <span class=\"sui-tab-chips__chip-label\">{{ chip.label }}</span>\n      @if (chip.count) {\n        <span class=\"sui-tab-chips__chip-count\" aria-hidden=\"true\">{{ chip.count }}</span>\n      }\n    </button>\n  }\n</nav>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}:host(.sui-tab-chips--host-sticky){display:contents}.sui-tab-chips__sentinel{height:1px;margin-top:16px;margin-bottom:-1px;pointer-events:none}.sui-tab-chips{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:12px 0;background:transparent;scrollbar-width:none}.sui-tab-chips::-webkit-scrollbar{display:none}.sui-tab-chips--sticky{position:sticky;top:0;z-index:20;transition:padding-top var(--sui-motion-duration-fast, .15s) var(--sui-motion-ease-out, ease),background var(--sui-motion-duration-fast, .15s) var(--sui-motion-ease-out, ease)}.sui-tab-chips--stuck{padding-top:calc(env(safe-area-inset-top,0px) + 12px);background:var(--sui-bg-weak-50, #f7f7f7)}.sui-tab-chips__chip{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);color:var(--sui-text-sub-600, #5c5c5c);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size, 13px);font-weight:600;letter-spacing:var(--sui-type-label-sm-spacing, -.006em);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),border-color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),transform var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease)}.sui-tab-chips__chip:hover{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-strong-950, #171717)}.sui-tab-chips__chip:active{transform:scale(.96)}.sui-tab-chips__chip:active:not(:disabled),.sui-tab-chips__chip:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-primary-alpha-10)}.sui-tab-chips__chip--active{background:var(--sui-bg-strong-950, #171717);color:var(--sui-bg-white-0, #fff);border-color:var(--sui-bg-strong-950, #171717)}.sui-tab-chips__chip--active:hover{background:var(--sui-bg-strong-950, #171717);color:var(--sui-bg-white-0, #fff)}.sui-tab-chips__chip-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}:host([data-sui-size=small]) .sui-tab-chips__chip{box-sizing:border-box;height:32px;padding:0 12px;line-height:var(--sui-type-label-sm-line, 20px)}:host([data-sui-size=large]) .sui-tab-chips__chip{box-sizing:border-box;height:40px;padding:0 16px;font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em)}:host([data-sui-size=small]) .sui-tab-chips__chip-count{min-width:16px;height:16px;padding:0 5px}:host([data-sui-size=large]) .sui-tab-chips__chip-count{min-width:20px;height:20px;padding:0 6px;font-size:var(--sui-type-label-xs-size, 12px)}.sui-tab-chips__chip--active .sui-tab-chips__chip-count{background:color-mix(in srgb,var(--sui-bg-white-0, #fff) 22%,transparent);color:var(--sui-bg-white-0, #fff)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTabChips, decorators: [{
             type: Component,
@@ -17115,7 +17118,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                            (que mide ~50px → el sticky no se enganchaba). Gate por clase de host. */
                         '[class.sui-tab-chips--host-sticky]': 'sticky()',
                         '[attr.data-sui-size]': 'size()',
-                    }, template: "@if (sticky()) {\n  <div #sentinel class=\"sui-tab-chips__sentinel\" aria-hidden=\"true\"></div>\n}\n<nav\n  #nav\n  class=\"sui-tab-chips\"\n  [class.sui-tab-chips--sticky]=\"sticky()\"\n  [class.sui-tab-chips--stuck]=\"sticky() && stuck()\"\n  role=\"tablist\"\n>\n  @for (chip of normalizedChips(); track chip.value) {\n    <button\n      type=\"button\"\n      class=\"sui-tab-chips__chip\"\n      [class.sui-tab-chips__chip--active]=\"value() === chip.value\"\n      [attr.data-sui-chip-value]=\"chip.value\"\n      [attr.aria-selected]=\"value() === chip.value\"\n      [attr.tabindex]=\"value() === chip.value ? 0 : -1\"\n      role=\"tab\"\n      (click)=\"select(chip.value)\"\n    >\n      <span class=\"sui-tab-chips__chip-label\">{{ chip.label }}</span>\n      @if (chip.count) {\n        <span class=\"sui-tab-chips__chip-count\" aria-hidden=\"true\">{{ chip.count }}</span>\n      }\n    </button>\n  }\n</nav>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}:host(.sui-tab-chips--host-sticky){display:contents}.sui-tab-chips__sentinel{height:1px;margin-top:16px;margin-bottom:-1px;pointer-events:none}.sui-tab-chips{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:12px 0;background:transparent;scrollbar-width:none}.sui-tab-chips::-webkit-scrollbar{display:none}.sui-tab-chips--sticky{position:sticky;top:0;z-index:20;transition:padding-top var(--sui-motion-duration-fast, .15s) var(--sui-motion-ease-out, ease),background var(--sui-motion-duration-fast, .15s) var(--sui-motion-ease-out, ease)}.sui-tab-chips--stuck{padding-top:calc(env(safe-area-inset-top,0px) + 12px);background:var(--sui-bg-weak-50, #f7f7f7)}.sui-tab-chips__chip{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);color:var(--sui-text-sub-600, #5c5c5c);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size, 13px);font-weight:600;letter-spacing:var(--sui-type-label-sm-spacing, -.006em);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),border-color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),transform var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease)}.sui-tab-chips__chip:hover{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-strong-950, #171717)}.sui-tab-chips__chip:active{transform:scale(.96)}.sui-tab-chips__chip:active:not(:disabled),.sui-tab-chips__chip:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-primary-alpha-10)}.sui-tab-chips__chip--active{background:var(--sui-bg-strong-950, #171717);color:var(--sui-bg-white-0, #fff);border-color:var(--sui-bg-strong-950, #171717)}.sui-tab-chips__chip--active:hover{background:var(--sui-bg-strong-950, #171717);color:var(--sui-bg-white-0, #fff)}.sui-tab-chips__chip-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}:host([data-sui-size=small]) .sui-tab-chips__chip{box-sizing:border-box;height:32px;padding:0 12px;line-height:var(--sui-type-label-sm-line, 20px)}:host([data-sui-size=large]) .sui-tab-chips__chip{box-sizing:border-box;height:40px;padding:0 16px;line-height:var(--sui-type-label-sm-line, 20px)}:host([data-sui-size=small]) .sui-tab-chips__chip-count{min-width:16px;height:16px;padding:0 5px}:host([data-sui-size=large]) .sui-tab-chips__chip-count{min-width:20px;height:20px;padding:0 6px;font-size:var(--sui-type-label-xs-size, 12px)}.sui-tab-chips__chip--active .sui-tab-chips__chip-count{background:color-mix(in srgb,var(--sui-bg-white-0, #fff) 22%,transparent);color:var(--sui-bg-white-0, #fff)}\n"] }]
+                    }, template: "@if (sticky()) {\n  <div #sentinel class=\"sui-tab-chips__sentinel\" aria-hidden=\"true\"></div>\n}\n<nav\n  #nav\n  class=\"sui-tab-chips\"\n  [class.sui-tab-chips--sticky]=\"sticky()\"\n  [class.sui-tab-chips--stuck]=\"sticky() && stuck()\"\n  role=\"tablist\"\n>\n  @for (chip of normalizedChips(); track chip.value) {\n    <button\n      type=\"button\"\n      class=\"sui-tab-chips__chip\"\n      [class.sui-tab-chips__chip--active]=\"value() === chip.value\"\n      [attr.data-sui-chip-value]=\"chip.value\"\n      [attr.aria-selected]=\"value() === chip.value\"\n      [attr.tabindex]=\"value() === chip.value ? 0 : -1\"\n      role=\"tab\"\n      (click)=\"select(chip.value)\"\n    >\n      <span class=\"sui-tab-chips__chip-label\">{{ chip.label }}</span>\n      @if (chip.count) {\n        <span class=\"sui-tab-chips__chip-count\" aria-hidden=\"true\">{{ chip.count }}</span>\n      }\n    </button>\n  }\n</nav>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}:host(.sui-tab-chips--host-sticky){display:contents}.sui-tab-chips__sentinel{height:1px;margin-top:16px;margin-bottom:-1px;pointer-events:none}.sui-tab-chips{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:12px 0;background:transparent;scrollbar-width:none}.sui-tab-chips::-webkit-scrollbar{display:none}.sui-tab-chips--sticky{position:sticky;top:0;z-index:20;transition:padding-top var(--sui-motion-duration-fast, .15s) var(--sui-motion-ease-out, ease),background var(--sui-motion-duration-fast, .15s) var(--sui-motion-ease-out, ease)}.sui-tab-chips--stuck{padding-top:calc(env(safe-area-inset-top,0px) + 12px);background:var(--sui-bg-weak-50, #f7f7f7)}.sui-tab-chips__chip{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);color:var(--sui-text-sub-600, #5c5c5c);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size, 13px);font-weight:600;letter-spacing:var(--sui-type-label-sm-spacing, -.006em);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),border-color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),transform var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease)}.sui-tab-chips__chip:hover{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-strong-950, #171717)}.sui-tab-chips__chip:active{transform:scale(.96)}.sui-tab-chips__chip:active:not(:disabled),.sui-tab-chips__chip:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-primary-alpha-10)}.sui-tab-chips__chip--active{background:var(--sui-bg-strong-950, #171717);color:var(--sui-bg-white-0, #fff);border-color:var(--sui-bg-strong-950, #171717)}.sui-tab-chips__chip--active:hover{background:var(--sui-bg-strong-950, #171717);color:var(--sui-bg-white-0, #fff)}.sui-tab-chips__chip-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}:host([data-sui-size=small]) .sui-tab-chips__chip{box-sizing:border-box;height:32px;padding:0 12px;line-height:var(--sui-type-label-sm-line, 20px)}:host([data-sui-size=large]) .sui-tab-chips__chip{box-sizing:border-box;height:40px;padding:0 16px;font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em)}:host([data-sui-size=small]) .sui-tab-chips__chip-count{min-width:16px;height:16px;padding:0 5px}:host([data-sui-size=large]) .sui-tab-chips__chip-count{min-width:20px;height:20px;padding:0 6px;font-size:var(--sui-type-label-xs-size, 12px)}.sui-tab-chips__chip--active .sui-tab-chips__chip-count{background:color-mix(in srgb,var(--sui-bg-white-0, #fff) 22%,transparent);color:var(--sui-bg-white-0, #fff)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { chips: [{ type: i0.Input, args: [{ isSignal: true, alias: "chips", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], autoScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScroll", required: false }] }], sentinelRef: [{
                 type: ViewChild,
                 args: ['sentinel']
@@ -17780,13 +17783,13 @@ class SuiSegmentedControl {
         this.tabChange.emit(tab.value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiSegmentedControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiSegmentedControl, isStandalone: true, selector: "sui-segmented-control", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", tabChange: "tabChange" }, host: { properties: { "attr.data-sui-size": "size()" } }, viewQueries: [{ propertyName: "segmentTrack", first: true, predicate: ["segmentTrack"], descendants: true }, { propertyName: "segmentItems", predicate: ["segmentItem"], descendants: true, read: ElementRef }], ngImport: i0, template: "<!-- Segmented Control \u2014 pill iOS con indicador animado (Figma 2604:114) -->\n<div #segmentTrack class=\"sui-segmented-control__track\" role=\"tablist\">\n  <div\n    class=\"sui-segmented-control__indicator\"\n    [style.transform]=\"indicatorStyle().transform\"\n    [style.width]=\"indicatorStyle().width\"\n  ></div>\n  @for (tab of tabs(); track tab.value) {\n    <button\n      #segmentItem\n      type=\"button\"\n      class=\"sui-segmented-control__item\"\n      [class.sui-segmented-control__item--active]=\"isActive(tab)\"\n      [class.sui-segmented-control__item--icon-only]=\"tab.iconOnly && tab.icon\"\n      [disabled]=\"tab.disabled\"\n      [attr.aria-selected]=\"isActive(tab)\"\n      [attr.aria-disabled]=\"tab.disabled ? true : null\"\n      [attr.aria-label]=\"tab.iconOnly && tab.icon ? tab.label : null\"\n      role=\"tab\"\n      (click)=\"select(tab)\"\n      (touchstart)=\"$any($event.currentTarget)\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      @if (tab.icon) {\n        <sui-icon [name]=\"tab.icon\" [size]=\"20\" />\n      }\n      @if (!tab.iconOnly) {\n        <span>{{ tab.label }}</span>\n      }\n    </button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.sui-segmented-control__track{position:relative;display:flex;align-items:center;gap:4px;padding:4px;border-radius:var(--sui-radius-10);background:var(--sui-bg-weak-50);box-sizing:border-box;width:100%}.sui-segmented-control__indicator{position:absolute;top:4px;left:0;height:calc(100% - 8px);background:var(--sui-bg-white-0);border-radius:var(--sui-radius-6);box-shadow:0 6px 10px #0e121b0f,0 2px 4px #0e121b08;transition:transform var(--sui-motion-duration-fast) cubic-bezier(.16,1,.3,1),width var(--sui-motion-duration-fast) cubic-bezier(.16,1,.3,1);pointer-events:none;z-index:0}.sui-segmented-control__item{position:relative;z-index:1;display:flex;flex:1 0 0;align-items:center;justify-content:center;gap:6px;padding:4px;min-width:0;overflow:hidden;border-radius:var(--sui-radius-6);border:none;background:transparent;cursor:pointer;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);font-family:var(--sui-font-sans);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);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto;color:var(--sui-text-soft-400);text-align:center;white-space:nowrap}.sui-segmented-control__item--icon-only{gap:0}.sui-segmented-control__item--active{color:var(--sui-text-strong-950)}.sui-segmented-control__item:hover:not(:disabled):not(.sui-segmented-control__item--active){color:var(--sui-text-sub-600)}.sui-segmented-control__item:disabled{cursor:not-allowed;color:var(--sui-text-disabled-300)}:host([data-sui-size=small]) .sui-segmented-control__item{font-size:var(--sui-type-label-xs-size)}:host([data-sui-size=large]) .sui-segmented-control__item{padding:6px}:host([data-sui-size=xlarge]) .sui-segmented-control__item{padding:8px;font-size:var(--sui-type-label-md-size);line-height:var(--sui-type-label-md-line)}\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: SuiSegmentedControl, isStandalone: true, selector: "sui-segmented-control", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", tabChange: "tabChange" }, host: { properties: { "attr.data-sui-size": "size()" } }, viewQueries: [{ propertyName: "segmentTrack", first: true, predicate: ["segmentTrack"], descendants: true }, { propertyName: "segmentItems", predicate: ["segmentItem"], descendants: true, read: ElementRef }], ngImport: i0, template: "<!-- Segmented Control \u2014 pill iOS con indicador animado (Figma 2604:114) -->\n<div #segmentTrack class=\"sui-segmented-control__track\" role=\"tablist\">\n  <div\n    class=\"sui-segmented-control__indicator\"\n    [style.transform]=\"indicatorStyle().transform\"\n    [style.width]=\"indicatorStyle().width\"\n  ></div>\n  @for (tab of tabs(); track tab.value) {\n    <button\n      #segmentItem\n      type=\"button\"\n      class=\"sui-segmented-control__item\"\n      [class.sui-segmented-control__item--active]=\"isActive(tab)\"\n      [class.sui-segmented-control__item--icon-only]=\"tab.iconOnly && tab.icon\"\n      [disabled]=\"tab.disabled\"\n      [attr.aria-selected]=\"isActive(tab)\"\n      [attr.aria-disabled]=\"tab.disabled ? true : null\"\n      [attr.aria-label]=\"tab.iconOnly && tab.icon ? tab.label : null\"\n      role=\"tab\"\n      (click)=\"select(tab)\"\n      (touchstart)=\"$any($event.currentTarget)\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      @if (tab.icon) {\n        <sui-icon [name]=\"tab.icon\" [size]=\"20\" />\n      }\n      @if (!tab.iconOnly) {\n        <span>{{ tab.label }}</span>\n      }\n    </button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.sui-segmented-control__track{position:relative;display:flex;align-items:center;gap:4px;padding:4px;border-radius:var(--sui-radius-10);background:var(--sui-bg-weak-50);box-sizing:border-box;width:100%}.sui-segmented-control__indicator{position:absolute;top:4px;left:0;height:calc(100% - 8px);background:var(--sui-bg-white-0);border-radius:var(--sui-radius-6);box-shadow:0 6px 10px #0e121b0f,0 2px 4px #0e121b08;transition:transform var(--sui-motion-duration-fast) cubic-bezier(.16,1,.3,1),width var(--sui-motion-duration-fast) cubic-bezier(.16,1,.3,1);pointer-events:none;z-index:0}.sui-segmented-control__item{position:relative;z-index:1;display:flex;flex:1 0 0;align-items:center;justify-content:center;gap:6px;padding:4px;min-width:0;overflow:hidden;border-radius:var(--sui-radius-6);border:none;background:transparent;cursor:pointer;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);font-family:var(--sui-font-sans);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);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto;color:var(--sui-text-soft-400);text-align:center;white-space:nowrap}.sui-segmented-control__item--icon-only{gap:0}.sui-segmented-control__item--active{color:var(--sui-text-strong-950)}.sui-segmented-control__item:hover:not(:disabled):not(.sui-segmented-control__item--active){color:var(--sui-text-sub-600)}.sui-segmented-control__item:disabled{cursor:not-allowed;color:var(--sui-text-disabled-300)}:host([data-sui-size=small]) .sui-segmented-control__item{font-size:var(--sui-type-label-xs-size)}:host([data-sui-size=large]) .sui-segmented-control__item,:host([data-sui-size=xlarge]) .sui-segmented-control__item{font-size:var(--sui-type-label-md-size, 16px);font-weight:var(--sui-type-label-md-weight, 500);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em)}:host([data-sui-size=large]) .sui-segmented-control__item{padding:4px}:host([data-sui-size=large]) .sui-segmented-control__item--icon-only{padding:6px}:host([data-sui-size=xlarge]) .sui-segmented-control__item{padding:8px}\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: SuiSegmentedControl, decorators: [{
             type: Component,
             args: [{ selector: 'sui-segmented-control', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiIcon], host: {
                         '[attr.data-sui-size]': 'size()',
-                    }, template: "<!-- Segmented Control \u2014 pill iOS con indicador animado (Figma 2604:114) -->\n<div #segmentTrack class=\"sui-segmented-control__track\" role=\"tablist\">\n  <div\n    class=\"sui-segmented-control__indicator\"\n    [style.transform]=\"indicatorStyle().transform\"\n    [style.width]=\"indicatorStyle().width\"\n  ></div>\n  @for (tab of tabs(); track tab.value) {\n    <button\n      #segmentItem\n      type=\"button\"\n      class=\"sui-segmented-control__item\"\n      [class.sui-segmented-control__item--active]=\"isActive(tab)\"\n      [class.sui-segmented-control__item--icon-only]=\"tab.iconOnly && tab.icon\"\n      [disabled]=\"tab.disabled\"\n      [attr.aria-selected]=\"isActive(tab)\"\n      [attr.aria-disabled]=\"tab.disabled ? true : null\"\n      [attr.aria-label]=\"tab.iconOnly && tab.icon ? tab.label : null\"\n      role=\"tab\"\n      (click)=\"select(tab)\"\n      (touchstart)=\"$any($event.currentTarget)\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      @if (tab.icon) {\n        <sui-icon [name]=\"tab.icon\" [size]=\"20\" />\n      }\n      @if (!tab.iconOnly) {\n        <span>{{ tab.label }}</span>\n      }\n    </button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.sui-segmented-control__track{position:relative;display:flex;align-items:center;gap:4px;padding:4px;border-radius:var(--sui-radius-10);background:var(--sui-bg-weak-50);box-sizing:border-box;width:100%}.sui-segmented-control__indicator{position:absolute;top:4px;left:0;height:calc(100% - 8px);background:var(--sui-bg-white-0);border-radius:var(--sui-radius-6);box-shadow:0 6px 10px #0e121b0f,0 2px 4px #0e121b08;transition:transform var(--sui-motion-duration-fast) cubic-bezier(.16,1,.3,1),width var(--sui-motion-duration-fast) cubic-bezier(.16,1,.3,1);pointer-events:none;z-index:0}.sui-segmented-control__item{position:relative;z-index:1;display:flex;flex:1 0 0;align-items:center;justify-content:center;gap:6px;padding:4px;min-width:0;overflow:hidden;border-radius:var(--sui-radius-6);border:none;background:transparent;cursor:pointer;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);font-family:var(--sui-font-sans);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);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto;color:var(--sui-text-soft-400);text-align:center;white-space:nowrap}.sui-segmented-control__item--icon-only{gap:0}.sui-segmented-control__item--active{color:var(--sui-text-strong-950)}.sui-segmented-control__item:hover:not(:disabled):not(.sui-segmented-control__item--active){color:var(--sui-text-sub-600)}.sui-segmented-control__item:disabled{cursor:not-allowed;color:var(--sui-text-disabled-300)}:host([data-sui-size=small]) .sui-segmented-control__item{font-size:var(--sui-type-label-xs-size)}:host([data-sui-size=large]) .sui-segmented-control__item{padding:6px}:host([data-sui-size=xlarge]) .sui-segmented-control__item{padding:8px;font-size:var(--sui-type-label-md-size);line-height:var(--sui-type-label-md-line)}\n"] }]
+                    }, template: "<!-- Segmented Control \u2014 pill iOS con indicador animado (Figma 2604:114) -->\n<div #segmentTrack class=\"sui-segmented-control__track\" role=\"tablist\">\n  <div\n    class=\"sui-segmented-control__indicator\"\n    [style.transform]=\"indicatorStyle().transform\"\n    [style.width]=\"indicatorStyle().width\"\n  ></div>\n  @for (tab of tabs(); track tab.value) {\n    <button\n      #segmentItem\n      type=\"button\"\n      class=\"sui-segmented-control__item\"\n      [class.sui-segmented-control__item--active]=\"isActive(tab)\"\n      [class.sui-segmented-control__item--icon-only]=\"tab.iconOnly && tab.icon\"\n      [disabled]=\"tab.disabled\"\n      [attr.aria-selected]=\"isActive(tab)\"\n      [attr.aria-disabled]=\"tab.disabled ? true : null\"\n      [attr.aria-label]=\"tab.iconOnly && tab.icon ? tab.label : null\"\n      role=\"tab\"\n      (click)=\"select(tab)\"\n      (touchstart)=\"$any($event.currentTarget)\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      @if (tab.icon) {\n        <sui-icon [name]=\"tab.icon\" [size]=\"20\" />\n      }\n      @if (!tab.iconOnly) {\n        <span>{{ tab.label }}</span>\n      }\n    </button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.sui-segmented-control__track{position:relative;display:flex;align-items:center;gap:4px;padding:4px;border-radius:var(--sui-radius-10);background:var(--sui-bg-weak-50);box-sizing:border-box;width:100%}.sui-segmented-control__indicator{position:absolute;top:4px;left:0;height:calc(100% - 8px);background:var(--sui-bg-white-0);border-radius:var(--sui-radius-6);box-shadow:0 6px 10px #0e121b0f,0 2px 4px #0e121b08;transition:transform var(--sui-motion-duration-fast) cubic-bezier(.16,1,.3,1),width var(--sui-motion-duration-fast) cubic-bezier(.16,1,.3,1);pointer-events:none;z-index:0}.sui-segmented-control__item{position:relative;z-index:1;display:flex;flex:1 0 0;align-items:center;justify-content:center;gap:6px;padding:4px;min-width:0;overflow:hidden;border-radius:var(--sui-radius-6);border:none;background:transparent;cursor:pointer;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);font-family:var(--sui-font-sans);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);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto;color:var(--sui-text-soft-400);text-align:center;white-space:nowrap}.sui-segmented-control__item--icon-only{gap:0}.sui-segmented-control__item--active{color:var(--sui-text-strong-950)}.sui-segmented-control__item:hover:not(:disabled):not(.sui-segmented-control__item--active){color:var(--sui-text-sub-600)}.sui-segmented-control__item:disabled{cursor:not-allowed;color:var(--sui-text-disabled-300)}:host([data-sui-size=small]) .sui-segmented-control__item{font-size:var(--sui-type-label-xs-size)}:host([data-sui-size=large]) .sui-segmented-control__item,:host([data-sui-size=xlarge]) .sui-segmented-control__item{font-size:var(--sui-type-label-md-size, 16px);font-weight:var(--sui-type-label-md-weight, 500);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em)}:host([data-sui-size=large]) .sui-segmented-control__item{padding:4px}:host([data-sui-size=large]) .sui-segmented-control__item--icon-only{padding:6px}:host([data-sui-size=xlarge]) .sui-segmented-control__item{padding:8px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }], segmentItems: [{
                 type: ViewChildren,
                 args: ['segmentItem', { read: ElementRef }]
@@ -18213,7 +18216,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]=\"labelSize()\"\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:5px 6px 5px 10px;border-radius:var(--sui-radius-8);min-height:32px}:host([data-sui-size=small]) .sui-tag-input__field{gap:8px;padding:7px 8px 7px 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:9px 10px 9px 12px;border-radius:var(--sui-radius-10);min-height:40px}:host([data-sui-size=large]) .sui-tag-input__field{gap:10px;padding:11px 12px 11px 14px;border-radius:var(--sui-radius-12);min-height:48px}:host([data-sui-size=xlarge]) .sui-tag-input__field{gap:10px;padding:13px 14px 13px 16px;border-radius:var(--sui-radius-12);min-height:52px}.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}@media(max-width:767px){.sui-tag-input__control{font-size:16px}}.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", "size", "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 });
+        ], 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]=\"labelSize()\"\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:5px 6px 5px 10px;border-radius:var(--sui-radius-8);min-height:32px}:host([data-sui-size=small]) .sui-tag-input__field{gap:8px;padding:7px 8px 7px 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:9px 10px 9px 12px;border-radius:var(--sui-radius-10);min-height:40px}:host([data-sui-size=large]) .sui-tag-input__field{gap:10px;padding:11px 12px 11px 14px;border-radius:var(--sui-radius-12);min-height:48px}:host([data-sui-size=xlarge]) .sui-tag-input__field{gap:10px;padding:13px 14px 13px 16px;border-radius:var(--sui-radius-12);min-height:52px}.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}@media(max-width:767px){.sui-tag-input__control{font-size:16px}}:host([data-sui-size=large]) .sui-tag-input__control,:host([data-sui-size=xlarge]) .sui-tag-input__control{font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}.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", "size", "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,
@@ -18229,7 +18232,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]=\"labelSize()\"\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:5px 6px 5px 10px;border-radius:var(--sui-radius-8);min-height:32px}:host([data-sui-size=small]) .sui-tag-input__field{gap:8px;padding:7px 8px 7px 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:9px 10px 9px 12px;border-radius:var(--sui-radius-10);min-height:40px}:host([data-sui-size=large]) .sui-tag-input__field{gap:10px;padding:11px 12px 11px 14px;border-radius:var(--sui-radius-12);min-height:48px}:host([data-sui-size=xlarge]) .sui-tag-input__field{gap:10px;padding:13px 14px 13px 16px;border-radius:var(--sui-radius-12);min-height:52px}.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}@media(max-width:767px){.sui-tag-input__control{font-size:16px}}.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]=\"labelSize()\"\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:5px 6px 5px 10px;border-radius:var(--sui-radius-8);min-height:32px}:host([data-sui-size=small]) .sui-tag-input__field{gap:8px;padding:7px 8px 7px 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:9px 10px 9px 12px;border-radius:var(--sui-radius-10);min-height:40px}:host([data-sui-size=large]) .sui-tag-input__field{gap:10px;padding:11px 12px 11px 14px;border-radius:var(--sui-radius-12);min-height:48px}:host([data-sui-size=xlarge]) .sui-tag-input__field{gap:10px;padding:13px 14px 13px 16px;border-radius:var(--sui-radius-12);min-height:52px}.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}@media(max-width:767px){.sui-tag-input__control{font-size:16px}}:host([data-sui-size=large]) .sui-tag-input__control,:host([data-sui-size=xlarge]) .sui-tag-input__control{font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}.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']
@@ -18422,7 +18425,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    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}:host([data-sui-size=xsmall]) .sui-textarea__field{padding:6px 6px 6px 8px;border-radius:var(--sui-radius-8)}:host([data-sui-size=small]) .sui-textarea__field{padding:8px 8px 8px 10px;border-radius:var(--sui-radius-10)}:host([data-sui-size=large]) .sui-textarea__field{padding:12px 12px 12px 14px;border-radius:var(--sui-radius-12)}:host([data-sui-size=xlarge]) .sui-textarea__field{padding:14px 14px 14px 16px;border-radius:var(--sui-radius-12)}.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}@media(max-width:767px){.sui-textarea__control{font-size:var(--sui-type-paragraph-md-size, 16px);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}}: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 });
+        ], 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}:host([data-sui-size=xsmall]) .sui-textarea__field{padding:6px 6px 6px 8px;border-radius:var(--sui-radius-8)}:host([data-sui-size=small]) .sui-textarea__field{padding:8px 8px 8px 10px;border-radius:var(--sui-radius-10)}:host([data-sui-size=large]) .sui-textarea__field{padding:12px 12px 12px 14px;border-radius:var(--sui-radius-12)}:host([data-sui-size=xlarge]) .sui-textarea__field{padding:14px 14px 14px 16px;border-radius:var(--sui-radius-12)}.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}@media(max-width:767px){.sui-textarea__control{font-size:var(--sui-type-paragraph-md-size, 16px);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}}:host([data-sui-size=large]) .sui-textarea__control,:host([data-sui-size=xlarge]) .sui-textarea__control{font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}: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,
@@ -18438,7 +18441,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[attr.data-sui-readonly]': 'readonly() ? "" : null',
                         '[attr.data-sui-resizable]': 'resizable() ? "" : null',
                         '[attr.data-sui-size]': 'size()',
-                    }, 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}:host([data-sui-size=xsmall]) .sui-textarea__field{padding:6px 6px 6px 8px;border-radius:var(--sui-radius-8)}:host([data-sui-size=small]) .sui-textarea__field{padding:8px 8px 8px 10px;border-radius:var(--sui-radius-10)}:host([data-sui-size=large]) .sui-textarea__field{padding:12px 12px 12px 14px;border-radius:var(--sui-radius-12)}:host([data-sui-size=xlarge]) .sui-textarea__field{padding:14px 14px 14px 16px;border-radius:var(--sui-radius-12)}.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}@media(max-width:767px){.sui-textarea__control{font-size:var(--sui-type-paragraph-md-size, 16px);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}}: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}:host([data-sui-size=xsmall]) .sui-textarea__field{padding:6px 6px 6px 8px;border-radius:var(--sui-radius-8)}:host([data-sui-size=small]) .sui-textarea__field{padding:8px 8px 8px 10px;border-radius:var(--sui-radius-10)}:host([data-sui-size=large]) .sui-textarea__field{padding:12px 12px 12px 14px;border-radius:var(--sui-radius-12)}:host([data-sui-size=xlarge]) .sui-textarea__field{padding:14px 14px 14px 16px;border-radius:var(--sui-radius-12)}.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}@media(max-width:767px){.sui-textarea__control{font-size:var(--sui-type-paragraph-md-size, 16px);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}}:host([data-sui-size=large]) .sui-textarea__control,:host([data-sui-size=xlarge]) .sui-textarea__control{font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}: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 }] }], 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 }] }], 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"] }] } });
 
 /**
@@ -19076,7 +19079,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 }, { propertyName: "_columnEls", predicate: ["columnEl"], 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]=\"labelSize()\"\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    [class.sui-time-picker__panel--large]=\"size() === 'large'\"\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        #columnEl\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        #columnEl\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          #columnEl\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]=\"footerButtonSize()\"\n          type=\"button\"\n          (click)=\"cancel()\"\n        >\n          Cancelar\n        </sui-button>\n        <sui-button\n          variant=\"filled\"\n          color=\"primary\"\n          [size]=\"footerButtonSize()\"\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)}:host([data-sui-size=large]) .sui-time-picker__trigger{height:48px;padding:0 14px;gap:10px;border-radius:var(--sui-radius-12, 12px)}.sui-time-picker__panel--large .sui-time-picker__option{height:44px;padding:12px}@media(max-width:767px){.sui-time-picker__option{height:44px;padding:12px}}.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 });
+        ], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "_menu", first: true, predicate: SuiDropdownMenu, descendants: true, isSignal: true }, { propertyName: "_columnEls", predicate: ["columnEl"], 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]=\"labelSize()\"\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    [class.sui-time-picker__panel--large]=\"size() === 'large'\"\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        #columnEl\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        #columnEl\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          #columnEl\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]=\"footerButtonSize()\"\n          type=\"button\"\n          (click)=\"cancel()\"\n        >\n          Cancelar\n        </sui-button>\n        <sui-button\n          variant=\"filled\"\n          color=\"primary\"\n          [size]=\"footerButtonSize()\"\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)}:host([data-sui-size=large]) .sui-time-picker__trigger{height:48px;padding:0 14px;gap:10px;border-radius:var(--sui-radius-12, 12px)}.sui-time-picker__panel--large .sui-time-picker__option{height:44px;padding:10px 12px}.sui-time-picker__panel--large .sui-time-picker__option ::ng-deep .sui-time-picker-item__time,.sui-time-picker__panel--large .sui-time-picker__option ::ng-deep .sui-time-picker-item__meridiem{font-size:var(--sui-type-label-md-size, 16px);font-weight:var(--sui-type-label-md-weight, 500);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em)}@media(max-width:767px){.sui-time-picker__option{height:44px;padding:12px}}.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:var(--sui-type-label-sm-size, 14px);font-weight:var(--sui-type-label-sm-weight, 500);line-height:var(--sui-type-label-sm-line, 20px);letter-spacing:var(--sui-type-label-sm-spacing, -.006em);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}:host([data-sui-size=large]) .sui-time-picker__trigger-text{font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em)}\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,
@@ -19102,7 +19105,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]=\"labelSize()\"\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    [class.sui-time-picker__panel--large]=\"size() === 'large'\"\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        #columnEl\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        #columnEl\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          #columnEl\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]=\"footerButtonSize()\"\n          type=\"button\"\n          (click)=\"cancel()\"\n        >\n          Cancelar\n        </sui-button>\n        <sui-button\n          variant=\"filled\"\n          color=\"primary\"\n          [size]=\"footerButtonSize()\"\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)}:host([data-sui-size=large]) .sui-time-picker__trigger{height:48px;padding:0 14px;gap:10px;border-radius:var(--sui-radius-12, 12px)}.sui-time-picker__panel--large .sui-time-picker__option{height:44px;padding:12px}@media(max-width:767px){.sui-time-picker__option{height:44px;padding:12px}}.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]=\"labelSize()\"\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    [class.sui-time-picker__panel--large]=\"size() === 'large'\"\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        #columnEl\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        #columnEl\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          #columnEl\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]=\"footerButtonSize()\"\n          type=\"button\"\n          (click)=\"cancel()\"\n        >\n          Cancelar\n        </sui-button>\n        <sui-button\n          variant=\"filled\"\n          color=\"primary\"\n          [size]=\"footerButtonSize()\"\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)}:host([data-sui-size=large]) .sui-time-picker__trigger{height:48px;padding:0 14px;gap:10px;border-radius:var(--sui-radius-12, 12px)}.sui-time-picker__panel--large .sui-time-picker__option{height:44px;padding:10px 12px}.sui-time-picker__panel--large .sui-time-picker__option ::ng-deep .sui-time-picker-item__time,.sui-time-picker__panel--large .sui-time-picker__option ::ng-deep .sui-time-picker-item__meridiem{font-size:var(--sui-type-label-md-size, 16px);font-weight:var(--sui-type-label-md-weight, 500);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em)}@media(max-width:767px){.sui-time-picker__option{height:44px;padding:12px}}.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:var(--sui-type-label-sm-size, 14px);font-weight:var(--sui-type-label-sm-weight, 500);line-height:var(--sui-type-label-sm-line, 20px);letter-spacing:var(--sui-type-label-sm-spacing, -.006em);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}:host([data-sui-size=large]) .sui-time-picker__trigger-text{font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em)}\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 }] }], _columnEls: [{ type: i0.ViewChildren, args: ['columnEl', { isSignal: true }] }] } });
 
 /**