@ajuarezso/sui-design-system 0.15.8 → 0.17.0

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

@@ -9869,6 +9869,43 @@ class SuiInput {
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    /**
+     * Esquinas de píldora en vez del radio por tamaño.
+     *
+     * Se llama `fullRadius` y no `rounded` para hablar el mismo idioma que
+     * `sui-compact-button`, que ya tenía este parámetro con ese nombre —y el
+     * nombre viene del propio Figma, que lista «2 fullRadius» entre sus
+     * variantes—. Dos nombres para la misma idea es cómo un design system deja
+     * de ser un sistema.
+     *
+     * El radio normal del campo sube con el tamaño (8 → 8 → 10) y es el correcto
+     * para un formulario, donde los campos se leen como una columna de cajas. Con
+     * `fullRadius`, el campo pasa a `999px` y se lee como un control suelto — un
+     * buscador arriba de una lista, un filtro al lado de chips redondos.
+     *
+     * No es un capricho estético: al lado de `sui-button` y de los chips, que ya
+     * son píldora en TODOS sus tamaños, un campo con esquina de 10 px se ve como
+     * de otro sistema.
+     *
+     * Sigue siendo opt-in y el default no cambia: los formularios de la app
+     * —onboarding, checkout, panel del dueño— se quedan como están.
+     */
+    fullRadius = input(false, ...(ngDevMode ? [{ debugName: "fullRadius" }] : /* istanbul ignore next */ []));
+    /**
+     * El tamaño que se le pasa al `sui-form-label`.
+     *
+     * El label NO crece con el campo. Su escala llega a `medium` y ahí se queda a
+     * propósito: en `large` y `xlarge` lo que crece es el ÁREA DE TOQUE del
+     * control, no la jerarquía del formulario. Un rótulo gigante encima de un
+     * campo de 52 px se lee como un título, que es otra cosa.
+     *
+     * Además lo obliga el tipo: `SuiFormLabelSize` no tiene los dos grandes, y el
+     * compilador lo cazó apenas se agregaron.
+     */
+    labelSize = computed(() => {
+        const s = this.size();
+        return s === 'large' || s === 'xlarge' ? 'medium' : s;
+    }, ...(ngDevMode ? [{ debugName: "labelSize" }] : /* istanbul ignore next */ []));
     error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
     errorMessage = input(null, ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
     label = input(null, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
@@ -10457,13 +10494,13 @@ class SuiInput {
         this._disabledByForm.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiInput, isStandalone: true, selector: "sui-input", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, hintIcon: { classPropertyName: "hintIcon", publicName: "hintIcon", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, paste: { classPropertyName: "paste", publicName: "paste", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, leadingDivider: { classPropertyName: "leadingDivider", publicName: "leadingDivider", isSignal: true, isRequired: false, transformFunction: null }, trailingDivider: { classPropertyName: "trailingDivider", publicName: "trailingDivider", isSignal: true, isRequired: false, transformFunction: null }, leadingControl: { classPropertyName: "leadingControl", publicName: "leadingControl", isSignal: true, isRequired: false, transformFunction: null }, trailingControl: { classPropertyName: "trailingControl", publicName: "trailingControl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:pointerdown": "onDocumentTap($event)", "document:touchstart": "onDocumentTap($event)", "document:mousedown": "onDocumentTap($event)" }, properties: { "attr.data-sui-size": "size()", "attr.data-sui-type": "type()", "attr.data-sui-error": "error() ? \"\" : null", "attr.data-sui-disabled": "isDisabled() ? \"\" : null", "attr.data-sui-readonly": "readonly() ? \"\" : null", "attr.data-sui-leading-divider": "_hasLeadingDivider() ? \"\" : null", "attr.data-sui-trailing-divider": "_hasTrailingDivider() ? \"\" : null", "attr.data-sui-leading-control": "leadingControl() ? \"\" : null", "attr.data-sui-trailing-control": "trailingControl() ? \"\" : null" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiInput, isStandalone: true, selector: "sui-input", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, fullRadius: { classPropertyName: "fullRadius", publicName: "fullRadius", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, hintIcon: { classPropertyName: "hintIcon", publicName: "hintIcon", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, paste: { classPropertyName: "paste", publicName: "paste", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, leadingDivider: { classPropertyName: "leadingDivider", publicName: "leadingDivider", isSignal: true, isRequired: false, transformFunction: null }, trailingDivider: { classPropertyName: "trailingDivider", publicName: "trailingDivider", isSignal: true, isRequired: false, transformFunction: null }, leadingControl: { classPropertyName: "leadingControl", publicName: "leadingControl", isSignal: true, isRequired: false, transformFunction: null }, trailingControl: { classPropertyName: "trailingControl", publicName: "trailingControl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:pointerdown": "onDocumentTap($event)", "document:touchstart": "onDocumentTap($event)", "document:mousedown": "onDocumentTap($event)" }, properties: { "attr.data-sui-size": "size()", "attr.data-sui-type": "type()", "attr.data-sui-error": "error() ? \"\" : null", "attr.data-sui-disabled": "isDisabled() ? \"\" : null", "attr.data-sui-readonly": "readonly() ? \"\" : null", "attr.data-sui-full-radius": "fullRadius() ? \"\" : null", "attr.data-sui-leading-divider": "_hasLeadingDivider() ? \"\" : null", "attr.data-sui-trailing-divider": "_hasTrailingDivider() ? \"\" : null", "attr.data-sui-leading-control": "leadingControl() ? \"\" : null", "attr.data-sui-trailing-control": "trailingControl() ? \"\" : null" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SuiInput),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true }], ngImport: i0, template: "@if (label()) {\n  <sui-form-label\n    [label]=\"label()!\"\n    [sublabel]=\"sublabel()\"\n    [required]=\"required()\"\n    [tooltip]=\"tooltip()\"\n    [size]=\"size()\"\n    class=\"sui-input__label-host\"\n  />\n}\n\n<div\n  class=\"sui-input__field\"\n  [class.sui-input__field--error]=\"error()\"\n  [class.sui-input__field--disabled]=\"isDisabled()\"\n  [class.sui-input__field--readonly]=\"readonly()\"\n  [class.sui-input__field--split]=\"_hasLeadingDivider() || _hasTrailingDivider()\"\n  [class.sui-input__field--split-leading]=\"_hasLeadingDivider()\"\n  [class.sui-input__field--split-trailing]=\"_hasTrailingDivider()\"\n  [class.sui-input__field--button]=\"type() === 'button'\"\n>\n  <!--\n    Split-field con divisor vertical (gen\u00E9rico por lado):\n      - trailing (Figma node 332:1667 \"Button\"): acci\u00F3n a la derecha + divisor\n        border-right. `type='button'` lo activa solo.\n      - leading (Figma node 313:10267 \"Phone\"): afijo interactivo a la izquierda\n        (ej. country select) + divisor border-left.\n    El input + \u00EDconos van en la zona interna `.sui-input__inner`, que lleva el\n    padding y el/los border(s) de divisor. Los `[data-slot=start/end]` quedan\n    flush a su lado como zonas de afijo. Para los types sin divisor,\n    `.sui-input__inner` es transparente (display: contents) y el layout es el de\n    siempre.\n  -->\n\n  <!-- ng-content start slot \u2014 afijo leading (flush cuando es control/divisor) -->\n  <ng-content select=\"[data-slot=start]\" />\n\n  <div class=\"sui-input__inner\">\n    <!-- Built-in icon slot (left) -->\n    @if (icon() && iconPosition() === 'left') {\n      <span class=\"sui-input__icon sui-input__icon--left\">\n        <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n      </span>\n    }\n\n    <!-- Prefix label (S/, $, %) -->\n    @if (prefix()) {\n      <span class=\"sui-input__prefix\">{{ prefix() }}</span>\n    }\n\n    <input\n      #inputEl\n      class=\"sui-input__control\"\n      [type]=\"nativeType()\"\n      [attr.inputmode]=\"inputMode()\"\n      [value]=\"\n        type() === 'amount'\n          ? displayAmountValue()\n          : type() === 'card'\n            ? displayCardValue()\n            : value()\n      \"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.maxlength]=\"type() === 'card' ? (maxlength() ?? 19) : maxlength()\"\n      [attr.min]=\"type() === 'number' ? min() : null\"\n      [attr.max]=\"type() === 'number' ? max() : null\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n      (focus)=\"onFocus()\"\n      (keydown)=\"onKeydown($event)\"\n      (paste)=\"onPaste($event)\"\n    />\n  </div>\n\n  <!-- ng-content end slot (backward compat) -->\n  <ng-content select=\"[data-slot=end]\" />\n\n  <!-- Clear button -->\n  @if (showClear() && value() && !isDisabled() && !readonly()) {\n    <button\n      type=\"button\"\n      class=\"sui-input__clear\"\n      aria-label=\"Limpiar\"\n      (click)=\"clearValue()\"\n    >\n      <sui-icon name=\"close-circle-line\" [size]=\"16\" />\n    </button>\n  }\n\n  <!-- Password toggle button -->\n  @if (type() === 'password-toggle' && !isDisabled()) {\n    <button\n      type=\"button\"\n      class=\"sui-input__eye\"\n      [attr.aria-label]=\"showPassword() ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n      (click)=\"togglePassword()\"\n    >\n      <sui-icon [name]=\"showPassword() ? 'eye-off-line' : 'eye-line'\" [size]=\"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}.sui-input__field:not(.sui-input__field--disabled):not(.sui-input__field--error):not(.sui-input__field--readonly):hover{border-color:var(--sui-stroke-sub-300)}.sui-input__field:not(.sui-input__field--disabled):not(.sui-input__field--error):not(.sui-input__field--readonly):focus-within{border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-input__field--error{border-color:var(--sui-state-error-base);box-shadow:none}.sui-input__field--error:not(.sui-input__field--disabled):hover{border-color:var(--sui-state-error-base)}.sui-input__field--error:not(.sui-input__field--disabled):focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 3px var(--sui-red-alpha-10)}.sui-input__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-input__field--readonly{background:var(--sui-bg-weak-50);border-color:var(--sui-stroke-soft-200);box-shadow:none}.sui-input__field ::ng-deep [data-slot=start],.sui-input__field ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);pointer-events:none}:host([data-sui-leading-control]) .sui-input__field ::ng-deep [data-slot=start],:host([data-sui-trailing-control]) .sui-input__field ::ng-deep [data-slot=end]{width:auto;height:auto;align-self:stretch;pointer-events:auto}.sui-input__inner{display:contents}.sui-input__field--split{align-items:stretch;overflow:hidden;padding:0!important;gap:0!important}.sui-input__field--split .sui-input__inner{display:flex;flex:1 1 auto;min-width:0;align-items:center;box-sizing:border-box}:host([data-sui-size=xsmall]) .sui-input__field--split .sui-input__inner{gap:6px;padding:5px 6px 5px 8px}:host([data-sui-size=small]) .sui-input__field--split .sui-input__inner{gap:8px;padding:7px 8px 7px 10px}:host([data-sui-size=medium]) .sui-input__field--split .sui-input__inner,:host(:not([data-sui-size])) .sui-input__field--split .sui-input__inner{gap:8px;padding:9px 10px 9px 12px}.sui-input__field--split-trailing .sui-input__inner{border-right:1px solid var(--sui-stroke-soft-200)}.sui-input__field--split-trailing.sui-input__field--error .sui-input__inner{border-right-color:var(--sui-state-error-base)}.sui-input__field--split-trailing.sui-input__field--disabled .sui-input__inner{border-right-color:transparent}.sui-input__field--split-trailing ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:auto;height:auto;align-self:stretch;color:var(--sui-icon-sub-600);pointer-events:auto}:host([data-sui-size=xsmall]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:6px}:host([data-sui-size=small]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:8px}:host([data-sui-size=medium]) .sui-input__field--split-trailing ::ng-deep [data-slot=end],:host(:not([data-sui-size])) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:10px}.sui-input__field--split-leading .sui-input__inner{border-left:1px solid var(--sui-stroke-soft-200)}.sui-input__field--split-leading.sui-input__field--error .sui-input__inner{border-left-color:var(--sui-state-error-base)}.sui-input__field--split-leading.sui-input__field--disabled .sui-input__inner{border-left-color:transparent}:host(:not([data-sui-leading-control])[data-sui-size=xsmall]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:6px 6px 6px 8px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=small]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:8px 8px 8px 10px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=medium]) .sui-input__field--split-leading ::ng-deep [data-slot=start],:host(:not([data-sui-leading-control]):not([data-sui-size])) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:10px 8px 10px 10px;box-sizing:content-box}.sui-input__prefix{flex-shrink:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;color:var(--sui-text-sub-600);-webkit-user-select:none;user-select:none;pointer-events:none}.sui-input__icon{display:inline-flex;align-items:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);pointer-events:none}:host([data-sui-disabled]) .sui-input__icon{color:var(--sui-icon-disabled-300)}.sui-input__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;min-height:0;min-width:0;padding:0;border:none;background:transparent;color:var(--sui-icon-sub-600);cursor:pointer;opacity:.7;line-height:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-input__clear:hover{opacity:1;color:var(--sui-text-strong-950)}.sui-input__clear:focus{outline:none}.sui-input__eye{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width: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      [value]=\"\n        type() === 'amount'\n          ? displayAmountValue()\n          : type() === 'card'\n            ? displayCardValue()\n            : value()\n      \"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.maxlength]=\"type() === 'card' ? (maxlength() ?? 19) : maxlength()\"\n      [attr.min]=\"type() === 'number' ? min() : null\"\n      [attr.max]=\"type() === 'number' ? max() : null\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n      (focus)=\"onFocus()\"\n      (keydown)=\"onKeydown($event)\"\n      (paste)=\"onPaste($event)\"\n    />\n  </div>\n\n  <!-- ng-content end slot (backward compat) -->\n  <ng-content select=\"[data-slot=end]\" />\n\n  <!-- Clear button -->\n  @if (showClear() && value() && !isDisabled() && !readonly()) {\n    <button\n      type=\"button\"\n      class=\"sui-input__clear\"\n      aria-label=\"Limpiar\"\n      (click)=\"clearValue()\"\n    >\n      <sui-icon name=\"close-circle-line\" [size]=\"16\" />\n    </button>\n  }\n\n  <!-- Password toggle button -->\n  @if (type() === 'password-toggle' && !isDisabled()) {\n    <button\n      type=\"button\"\n      class=\"sui-input__eye\"\n      [attr.aria-label]=\"showPassword() ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n      (click)=\"togglePassword()\"\n    >\n      <sui-icon [name]=\"showPassword() ? 'eye-off-line' : 'eye-line'\" [size]=\"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)}.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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiInput, decorators: [{
             type: Component,
@@ -10479,6 +10516,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-readonly]': 'readonly() ? "" : null',
+                        '[attr.data-sui-full-radius]': 'fullRadius() ? "" : null',
                         /* Divisores genéricos por lado — dibujan el border vertical entre el slot
                            afijo y la zona de input (Figma Phone node 313:10271 = border-left).
                            `type='button'` activa el trailing automáticamente (back-compat). */
@@ -10489,8 +10527,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                            decorativo. */
                         '[attr.data-sui-leading-control]': 'leadingControl() ? "" : null',
                         '[attr.data-sui-trailing-control]': 'trailingControl() ? "" : null',
-                    }, template: "@if (label()) {\n  <sui-form-label\n    [label]=\"label()!\"\n    [sublabel]=\"sublabel()\"\n    [required]=\"required()\"\n    [tooltip]=\"tooltip()\"\n    [size]=\"size()\"\n    class=\"sui-input__label-host\"\n  />\n}\n\n<div\n  class=\"sui-input__field\"\n  [class.sui-input__field--error]=\"error()\"\n  [class.sui-input__field--disabled]=\"isDisabled()\"\n  [class.sui-input__field--readonly]=\"readonly()\"\n  [class.sui-input__field--split]=\"_hasLeadingDivider() || _hasTrailingDivider()\"\n  [class.sui-input__field--split-leading]=\"_hasLeadingDivider()\"\n  [class.sui-input__field--split-trailing]=\"_hasTrailingDivider()\"\n  [class.sui-input__field--button]=\"type() === 'button'\"\n>\n  <!--\n    Split-field con divisor vertical (gen\u00E9rico por lado):\n      - trailing (Figma node 332:1667 \"Button\"): acci\u00F3n a la derecha + divisor\n        border-right. `type='button'` lo activa solo.\n      - leading (Figma node 313:10267 \"Phone\"): afijo interactivo a la izquierda\n        (ej. country select) + divisor border-left.\n    El input + \u00EDconos van en la zona interna `.sui-input__inner`, que lleva el\n    padding y el/los border(s) de divisor. Los `[data-slot=start/end]` quedan\n    flush a su lado como zonas de afijo. Para los types sin divisor,\n    `.sui-input__inner` es transparente (display: contents) y el layout es el de\n    siempre.\n  -->\n\n  <!-- ng-content start slot \u2014 afijo leading (flush cuando es control/divisor) -->\n  <ng-content select=\"[data-slot=start]\" />\n\n  <div class=\"sui-input__inner\">\n    <!-- Built-in icon slot (left) -->\n    @if (icon() && iconPosition() === 'left') {\n      <span class=\"sui-input__icon sui-input__icon--left\">\n        <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n      </span>\n    }\n\n    <!-- Prefix label (S/, $, %) -->\n    @if (prefix()) {\n      <span class=\"sui-input__prefix\">{{ prefix() }}</span>\n    }\n\n    <input\n      #inputEl\n      class=\"sui-input__control\"\n      [type]=\"nativeType()\"\n      [attr.inputmode]=\"inputMode()\"\n      [value]=\"\n        type() === 'amount'\n          ? displayAmountValue()\n          : type() === 'card'\n            ? displayCardValue()\n            : value()\n      \"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.maxlength]=\"type() === 'card' ? (maxlength() ?? 19) : maxlength()\"\n      [attr.min]=\"type() === 'number' ? min() : null\"\n      [attr.max]=\"type() === 'number' ? max() : null\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n      (focus)=\"onFocus()\"\n      (keydown)=\"onKeydown($event)\"\n      (paste)=\"onPaste($event)\"\n    />\n  </div>\n\n  <!-- ng-content end slot (backward compat) -->\n  <ng-content select=\"[data-slot=end]\" />\n\n  <!-- Clear button -->\n  @if (showClear() && value() && !isDisabled() && !readonly()) {\n    <button\n      type=\"button\"\n      class=\"sui-input__clear\"\n      aria-label=\"Limpiar\"\n      (click)=\"clearValue()\"\n    >\n      <sui-icon name=\"close-circle-line\" [size]=\"16\" />\n    </button>\n  }\n\n  <!-- Password toggle button -->\n  @if (type() === 'password-toggle' && !isDisabled()) {\n    <button\n      type=\"button\"\n      class=\"sui-input__eye\"\n      [attr.aria-label]=\"showPassword() ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n      (click)=\"togglePassword()\"\n    >\n      <sui-icon [name]=\"showPassword() ? 'eye-off-line' : 'eye-line'\" [size]=\"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}.sui-input__field:not(.sui-input__field--disabled):not(.sui-input__field--error):not(.sui-input__field--readonly):hover{border-color:var(--sui-stroke-sub-300)}.sui-input__field:not(.sui-input__field--disabled):not(.sui-input__field--error):not(.sui-input__field--readonly):focus-within{border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-input__field--error{border-color:var(--sui-state-error-base);box-shadow:none}.sui-input__field--error:not(.sui-input__field--disabled):hover{border-color:var(--sui-state-error-base)}.sui-input__field--error:not(.sui-input__field--disabled):focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 3px var(--sui-red-alpha-10)}.sui-input__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-input__field--readonly{background:var(--sui-bg-weak-50);border-color:var(--sui-stroke-soft-200);box-shadow:none}.sui-input__field ::ng-deep [data-slot=start],.sui-input__field ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);pointer-events:none}:host([data-sui-leading-control]) .sui-input__field ::ng-deep [data-slot=start],:host([data-sui-trailing-control]) .sui-input__field ::ng-deep [data-slot=end]{width:auto;height:auto;align-self:stretch;pointer-events:auto}.sui-input__inner{display:contents}.sui-input__field--split{align-items:stretch;overflow:hidden;padding:0!important;gap:0!important}.sui-input__field--split .sui-input__inner{display:flex;flex:1 1 auto;min-width:0;align-items:center;box-sizing:border-box}:host([data-sui-size=xsmall]) .sui-input__field--split .sui-input__inner{gap:6px;padding:5px 6px 5px 8px}:host([data-sui-size=small]) .sui-input__field--split .sui-input__inner{gap:8px;padding:7px 8px 7px 10px}:host([data-sui-size=medium]) .sui-input__field--split .sui-input__inner,:host(:not([data-sui-size])) .sui-input__field--split .sui-input__inner{gap:8px;padding:9px 10px 9px 12px}.sui-input__field--split-trailing .sui-input__inner{border-right:1px solid var(--sui-stroke-soft-200)}.sui-input__field--split-trailing.sui-input__field--error .sui-input__inner{border-right-color:var(--sui-state-error-base)}.sui-input__field--split-trailing.sui-input__field--disabled .sui-input__inner{border-right-color:transparent}.sui-input__field--split-trailing ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:auto;height:auto;align-self:stretch;color:var(--sui-icon-sub-600);pointer-events:auto}:host([data-sui-size=xsmall]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:6px}:host([data-sui-size=small]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:8px}:host([data-sui-size=medium]) .sui-input__field--split-trailing ::ng-deep [data-slot=end],:host(:not([data-sui-size])) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:10px}.sui-input__field--split-leading .sui-input__inner{border-left:1px solid var(--sui-stroke-soft-200)}.sui-input__field--split-leading.sui-input__field--error .sui-input__inner{border-left-color:var(--sui-state-error-base)}.sui-input__field--split-leading.sui-input__field--disabled .sui-input__inner{border-left-color:transparent}:host(:not([data-sui-leading-control])[data-sui-size=xsmall]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:6px 6px 6px 8px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=small]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:8px 8px 8px 10px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=medium]) .sui-input__field--split-leading ::ng-deep [data-slot=start],:host(:not([data-sui-leading-control]):not([data-sui-size])) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:10px 8px 10px 10px;box-sizing:content-box}.sui-input__prefix{flex-shrink:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;color:var(--sui-text-sub-600);-webkit-user-select:none;user-select:none;pointer-events:none}.sui-input__icon{display:inline-flex;align-items:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);pointer-events:none}:host([data-sui-disabled]) .sui-input__icon{color:var(--sui-icon-disabled-300)}.sui-input__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;min-height:0;min-width:0;padding:0;border:none;background:transparent;color:var(--sui-icon-sub-600);cursor:pointer;opacity:.7;line-height:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-input__clear:hover{opacity:1;color:var(--sui-text-strong-950)}.sui-input__clear:focus{outline:none}.sui-input__eye{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width: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"] }]
-        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], hintIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintIcon", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], paste: [{ type: i0.Input, args: [{ isSignal: true, alias: "paste", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], closeOnOutsideClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsideClick", required: false }] }], leadingDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingDivider", required: false }] }], trailingDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingDivider", required: false }] }], leadingControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingControl", required: false }] }], trailingControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingControl", required: false }] }], inputEl: [{
+                    }, 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      [value]=\"\n        type() === 'amount'\n          ? displayAmountValue()\n          : type() === 'card'\n            ? displayCardValue()\n            : value()\n      \"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.maxlength]=\"type() === 'card' ? (maxlength() ?? 19) : maxlength()\"\n      [attr.min]=\"type() === 'number' ? min() : null\"\n      [attr.max]=\"type() === 'number' ? max() : null\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n      (focus)=\"onFocus()\"\n      (keydown)=\"onKeydown($event)\"\n      (paste)=\"onPaste($event)\"\n    />\n  </div>\n\n  <!-- ng-content end slot (backward compat) -->\n  <ng-content select=\"[data-slot=end]\" />\n\n  <!-- Clear button -->\n  @if (showClear() && value() && !isDisabled() && !readonly()) {\n    <button\n      type=\"button\"\n      class=\"sui-input__clear\"\n      aria-label=\"Limpiar\"\n      (click)=\"clearValue()\"\n    >\n      <sui-icon name=\"close-circle-line\" [size]=\"16\" />\n    </button>\n  }\n\n  <!-- Password toggle button -->\n  @if (type() === 'password-toggle' && !isDisabled()) {\n    <button\n      type=\"button\"\n      class=\"sui-input__eye\"\n      [attr.aria-label]=\"showPassword() ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n      (click)=\"togglePassword()\"\n    >\n      <sui-icon [name]=\"showPassword() ? 'eye-off-line' : 'eye-line'\" [size]=\"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)}.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"] }]
+        }], 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 }] }], 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']
             }], onDocumentTap: [{
@@ -14299,6 +14337,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  */
 class SuiSelect {
     size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** El rótulo no crece con el control: su escala llega a `medium`. Ver la nota
+     *  en `sui-input`, que hace exactamente lo mismo. */
+    labelSize = computed(() => {
+        const s = this.size();
+        return s === 'large' || s === 'xlarge' ? 'medium' : s;
+    }, ...(ngDevMode ? [{ debugName: "labelSize" }] : /* istanbul ignore next */ []));
     placeholder = input('Seleccionar...', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
@@ -14509,7 +14553,7 @@ class SuiSelect {
                 useExisting: forwardRef(() => SuiSelect),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "_menu", first: true, predicate: SuiDropdownMenu, descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <sui-form-label\n    [label]=\"label()!\"\n    [sublabel]=\"sublabel()\"\n    [required]=\"required()\"\n    [tooltip]=\"tooltip()\"\n    [size]=\"size()\"\n    class=\"sui-select__label-host\"\n    (click)=\"toggleOpen()\"\n  />\n}\n\n<div\n  #triggerEl\n  class=\"sui-select__trigger\"\n  [class.sui-select__trigger--error]=\"error()\"\n  [class.sui-select__trigger--disabled]=\"isDisabled()\"\n  [class.sui-select__trigger--open]=\"isOpen()\"\n  [class.sui-select__trigger--filled]=\"selectedLabel() !== null\"\n  role=\"combobox\"\n  [attr.aria-haspopup]=\"'listbox'\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n  [attr.tabindex]=\"isDisabled() ? '-1' : '0'\"\n  (click)=\"toggleOpen()\"\n>\n  <!--\n    Left decoration (Figma Select[1.1] Type variant). Prioridad:\n      1. slot proyectado [slot=leading] (custom total)\n      2. imageUrl (avatar/logo del filled state)\n      3. flag (type=country, 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      role=\"listbox\"\n      [attr.aria-label]=\"label() || placeholder()\"\n    >\n      @for (option of options(); track option.value; let i = $index) {\n        <sui-dropdown-item\n          mode=\"option\"\n          [label]=\"option.label\"\n          [selected]=\"option.value === value()\"\n          [highlighted]=\"highlightedIndex() === i\"\n          [disabled]=\"!!option.disabled\"\n          (clicked)=\"select(option)\"\n          (mouseenter)=\"highlightedIndex.set(i)\"\n        />\n      }\n    </div>\n  </ng-template>\n</sui-dropdown-menu>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-select__label-host{display:block;margin-bottom:4px;cursor:default}.sui-select__trigger{display:flex;align-items:center;max-width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=xsmall]) .sui-select__trigger{gap:6px;padding:5px 6px 5px 8px;border-radius:var(--sui-radius-8)}:host([data-sui-size=small]) .sui-select__trigger{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8)}:host([data-sui-size=medium]) .sui-select__trigger,:host(:not([data-sui-size])) .sui-select__trigger{gap:8px;padding:9px 10px 9px 12px;border-radius:var(--sui-radius-10)}.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error):hover{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error):focus,.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error).sui-select__trigger--open{outline:none;border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-select__trigger--error{border-color:var(--sui-state-error-base);box-shadow:none}.sui-select__trigger--error:not(.sui-select__trigger--disabled):hover{border-color:var(--sui-state-error-base)}.sui-select__trigger--error:not(.sui-select__trigger--disabled):focus,.sui-select__trigger--error:not(.sui-select__trigger--disabled).sui-select__trigger--open{border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-16)}.sui-select__trigger--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-select__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600)}:host([data-sui-disabled]) .sui-select__leading{color:var(--sui-icon-disabled-300);opacity:.48}.sui-select__leading-icon{display:inline-flex}.sui-select__leading-img{width:100%;height:100%;object-fit:cover;border-radius:var(--sui-radius-full)}.sui-select__leading-flag,.sui-select__badge{flex-shrink:0}:host([data-sui-disabled]) .sui-select__badge{opacity:.48}.sui-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950)}:host([data-sui-disabled]) .sui-select__value{color:var(--sui-text-disabled-300)}.sui-select__placeholder{color:var(--sui-text-sub-600)}:host([data-sui-disabled]) .sui-select__placeholder{color:var(--sui-text-disabled-300)}.sui-select__chevron{flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);transition:transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-open]) .sui-select__chevron{transform:rotate(180deg)}:host([data-sui-disabled]) .sui-select__chevron{color:var(--sui-icon-disabled-300)}.sui-select__hint-host{display:block;margin-top:4px}\n"], dependencies: [{ kind: "component", type: SuiFormLabel, selector: "sui-form-label", inputs: ["label", "sublabel", "required", "tooltip", "link", "size", "disabled", "for"], outputs: ["linkClick"] }, { kind: "component", type: SuiFormHint, selector: "sui-form-hint", inputs: ["message", "variant", "icon"] }, { kind: "component", type: SuiDropdownMenu, selector: "sui-dropdown-menu", inputs: ["matchWidth", "flexibleDimensions", "push", "minWidth", "position", "viewportMargin", "panelClass", "disabled", "popupRole", "origin"], outputs: ["openedChange"], exportAs: ["suiDropdownMenu"] }, { kind: "directive", type: SuiDropdownPanel, selector: "ng-template[suiDropdownPanel]" }, { kind: "component", type: SuiDropdownItem, selector: "sui-dropdown-item", inputs: ["label", "sublabel", "description", "size", "leadingFramed", "mode", "selected", "highlighted", "disabled", "shortcut"], outputs: ["clicked"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiFlag, selector: "sui-flag", inputs: ["name", "size", "ariaLabel"] }, { kind: "component", type: SuiAvatar, selector: "sui-avatar", inputs: ["size", "src", "alt", "initials", "color", "status", "memojiSrc", "illustrationSrc", "icon", "companyLogoSrc", "topBadge", "bgColor"] }, { kind: "component", type: SuiBadge, selector: "sui-badge", inputs: ["color", "variant", "size", "type", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], 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      role=\"listbox\"\n      [attr.aria-label]=\"label() || placeholder()\"\n    >\n      @for (option of options(); track option.value; let i = $index) {\n        <sui-dropdown-item\n          mode=\"option\"\n          [label]=\"option.label\"\n          [selected]=\"option.value === value()\"\n          [highlighted]=\"highlightedIndex() === i\"\n          [disabled]=\"!!option.disabled\"\n          (clicked)=\"select(option)\"\n          (mouseenter)=\"highlightedIndex.set(i)\"\n        />\n      }\n    </div>\n  </ng-template>\n</sui-dropdown-menu>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-select__label-host{display:block;margin-bottom:4px;cursor:default}.sui-select__trigger{display:flex;align-items:center;max-width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=xsmall]) .sui-select__trigger{gap:6px;padding:5px 6px 5px 8px;border-radius:var(--sui-radius-8)}:host([data-sui-size=small]) .sui-select__trigger{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8)}:host([data-sui-size=medium]) .sui-select__trigger,:host(:not([data-sui-size])) .sui-select__trigger{gap:8px;padding:9px 10px 9px 12px;border-radius:var(--sui-radius-10)}:host([data-sui-size=large]) .sui-select__trigger{gap:10px;padding:11px 12px 11px 14px;border-radius:var(--sui-radius-12)}:host([data-sui-size=xlarge]) .sui-select__trigger{gap:10px;padding:13px 14px 13px 16px;border-radius:var(--sui-radius-12)}.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error):hover{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error):focus,.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error).sui-select__trigger--open{outline:none;border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-select__trigger--error{border-color:var(--sui-state-error-base);box-shadow:none}.sui-select__trigger--error:not(.sui-select__trigger--disabled):hover{border-color:var(--sui-state-error-base)}.sui-select__trigger--error:not(.sui-select__trigger--disabled):focus,.sui-select__trigger--error:not(.sui-select__trigger--disabled).sui-select__trigger--open{border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-16)}.sui-select__trigger--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-select__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600)}:host([data-sui-disabled]) .sui-select__leading{color:var(--sui-icon-disabled-300);opacity:.48}.sui-select__leading-icon{display:inline-flex}.sui-select__leading-img{width:100%;height:100%;object-fit:cover;border-radius:var(--sui-radius-full)}.sui-select__leading-flag,.sui-select__badge{flex-shrink:0}:host([data-sui-disabled]) .sui-select__badge{opacity:.48}.sui-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950)}:host([data-sui-disabled]) .sui-select__value{color:var(--sui-text-disabled-300)}.sui-select__placeholder{color:var(--sui-text-sub-600)}:host([data-sui-disabled]) .sui-select__placeholder{color:var(--sui-text-disabled-300)}.sui-select__chevron{flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);transition:transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-open]) .sui-select__chevron{transform:rotate(180deg)}:host([data-sui-disabled]) .sui-select__chevron{color:var(--sui-icon-disabled-300)}.sui-select__hint-host{display:block;margin-top:4px}\n"], dependencies: [{ kind: "component", type: SuiFormLabel, selector: "sui-form-label", inputs: ["label", "sublabel", "required", "tooltip", "link", "size", "disabled", "for"], outputs: ["linkClick"] }, { kind: "component", type: SuiFormHint, selector: "sui-form-hint", inputs: ["message", "variant", "icon"] }, { kind: "component", type: SuiDropdownMenu, selector: "sui-dropdown-menu", inputs: ["matchWidth", "flexibleDimensions", "push", "minWidth", "position", "viewportMargin", "panelClass", "disabled", "popupRole", "origin"], outputs: ["openedChange"], exportAs: ["suiDropdownMenu"] }, { kind: "directive", type: SuiDropdownPanel, selector: "ng-template[suiDropdownPanel]" }, { kind: "component", type: SuiDropdownItem, selector: "sui-dropdown-item", inputs: ["label", "sublabel", "description", "size", "leadingFramed", "mode", "selected", "highlighted", "disabled", "shortcut"], outputs: ["clicked"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiFlag, selector: "sui-flag", inputs: ["name", "size", "ariaLabel"] }, { kind: "component", type: SuiAvatar, selector: "sui-avatar", inputs: ["size", "src", "alt", "initials", "color", "status", "memojiSrc", "illustrationSrc", "icon", "companyLogoSrc", "topBadge", "bgColor"] }, { kind: "component", type: SuiBadge, selector: "sui-badge", inputs: ["color", "variant", "size", "type", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiSelect, decorators: [{
             type: Component,
@@ -14537,7 +14581,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[attr.data-sui-error]': 'error() ? "" : null',
                         '[attr.data-sui-disabled]': 'isDisabled() ? "" : null',
                         '[attr.data-sui-open]': 'isOpen() ? "" : null',
-                    }, template: "@if (label()) {\n  <sui-form-label\n    [label]=\"label()!\"\n    [sublabel]=\"sublabel()\"\n    [required]=\"required()\"\n    [tooltip]=\"tooltip()\"\n    [size]=\"size()\"\n    class=\"sui-select__label-host\"\n    (click)=\"toggleOpen()\"\n  />\n}\n\n<div\n  #triggerEl\n  class=\"sui-select__trigger\"\n  [class.sui-select__trigger--error]=\"error()\"\n  [class.sui-select__trigger--disabled]=\"isDisabled()\"\n  [class.sui-select__trigger--open]=\"isOpen()\"\n  [class.sui-select__trigger--filled]=\"selectedLabel() !== null\"\n  role=\"combobox\"\n  [attr.aria-haspopup]=\"'listbox'\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n  [attr.tabindex]=\"isDisabled() ? '-1' : '0'\"\n  (click)=\"toggleOpen()\"\n>\n  <!--\n    Left decoration (Figma Select[1.1] Type variant). Prioridad:\n      1. slot proyectado [slot=leading] (custom total)\n      2. imageUrl (avatar/logo del filled state)\n      3. flag (type=country, 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      role=\"listbox\"\n      [attr.aria-label]=\"label() || placeholder()\"\n    >\n      @for (option of options(); track option.value; let i = $index) {\n        <sui-dropdown-item\n          mode=\"option\"\n          [label]=\"option.label\"\n          [selected]=\"option.value === value()\"\n          [highlighted]=\"highlightedIndex() === i\"\n          [disabled]=\"!!option.disabled\"\n          (clicked)=\"select(option)\"\n          (mouseenter)=\"highlightedIndex.set(i)\"\n        />\n      }\n    </div>\n  </ng-template>\n</sui-dropdown-menu>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-select__label-host{display:block;margin-bottom:4px;cursor:default}.sui-select__trigger{display:flex;align-items:center;max-width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=xsmall]) .sui-select__trigger{gap:6px;padding:5px 6px 5px 8px;border-radius:var(--sui-radius-8)}:host([data-sui-size=small]) .sui-select__trigger{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8)}:host([data-sui-size=medium]) .sui-select__trigger,:host(:not([data-sui-size])) .sui-select__trigger{gap:8px;padding:9px 10px 9px 12px;border-radius:var(--sui-radius-10)}.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error):hover{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error):focus,.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error).sui-select__trigger--open{outline:none;border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-select__trigger--error{border-color:var(--sui-state-error-base);box-shadow:none}.sui-select__trigger--error:not(.sui-select__trigger--disabled):hover{border-color:var(--sui-state-error-base)}.sui-select__trigger--error:not(.sui-select__trigger--disabled):focus,.sui-select__trigger--error:not(.sui-select__trigger--disabled).sui-select__trigger--open{border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-16)}.sui-select__trigger--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-select__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600)}:host([data-sui-disabled]) .sui-select__leading{color:var(--sui-icon-disabled-300);opacity:.48}.sui-select__leading-icon{display:inline-flex}.sui-select__leading-img{width:100%;height:100%;object-fit:cover;border-radius:var(--sui-radius-full)}.sui-select__leading-flag,.sui-select__badge{flex-shrink:0}:host([data-sui-disabled]) .sui-select__badge{opacity:.48}.sui-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950)}:host([data-sui-disabled]) .sui-select__value{color:var(--sui-text-disabled-300)}.sui-select__placeholder{color:var(--sui-text-sub-600)}:host([data-sui-disabled]) .sui-select__placeholder{color:var(--sui-text-disabled-300)}.sui-select__chevron{flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);transition:transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-open]) .sui-select__chevron{transform:rotate(180deg)}:host([data-sui-disabled]) .sui-select__chevron{color:var(--sui-icon-disabled-300)}.sui-select__hint-host{display:block;margin-top:4px}\n"] }]
+                    }, template: "@if (label()) {\n  <sui-form-label\n    [label]=\"label()!\"\n    [sublabel]=\"sublabel()\"\n    [required]=\"required()\"\n    [tooltip]=\"tooltip()\"\n    [size]=\"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      role=\"listbox\"\n      [attr.aria-label]=\"label() || placeholder()\"\n    >\n      @for (option of options(); track option.value; let i = $index) {\n        <sui-dropdown-item\n          mode=\"option\"\n          [label]=\"option.label\"\n          [selected]=\"option.value === value()\"\n          [highlighted]=\"highlightedIndex() === i\"\n          [disabled]=\"!!option.disabled\"\n          (clicked)=\"select(option)\"\n          (mouseenter)=\"highlightedIndex.set(i)\"\n        />\n      }\n    </div>\n  </ng-template>\n</sui-dropdown-menu>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-select__label-host{display:block;margin-bottom:4px;cursor:default}.sui-select__trigger{display:flex;align-items:center;max-width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=xsmall]) .sui-select__trigger{gap:6px;padding:5px 6px 5px 8px;border-radius:var(--sui-radius-8)}:host([data-sui-size=small]) .sui-select__trigger{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8)}:host([data-sui-size=medium]) .sui-select__trigger,:host(:not([data-sui-size])) .sui-select__trigger{gap:8px;padding:9px 10px 9px 12px;border-radius:var(--sui-radius-10)}:host([data-sui-size=large]) .sui-select__trigger{gap:10px;padding:11px 12px 11px 14px;border-radius:var(--sui-radius-12)}:host([data-sui-size=xlarge]) .sui-select__trigger{gap:10px;padding:13px 14px 13px 16px;border-radius:var(--sui-radius-12)}.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error):hover{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error):focus,.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error).sui-select__trigger--open{outline:none;border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-select__trigger--error{border-color:var(--sui-state-error-base);box-shadow:none}.sui-select__trigger--error:not(.sui-select__trigger--disabled):hover{border-color:var(--sui-state-error-base)}.sui-select__trigger--error:not(.sui-select__trigger--disabled):focus,.sui-select__trigger--error:not(.sui-select__trigger--disabled).sui-select__trigger--open{border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-16)}.sui-select__trigger--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-select__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600)}:host([data-sui-disabled]) .sui-select__leading{color:var(--sui-icon-disabled-300);opacity:.48}.sui-select__leading-icon{display:inline-flex}.sui-select__leading-img{width:100%;height:100%;object-fit:cover;border-radius:var(--sui-radius-full)}.sui-select__leading-flag,.sui-select__badge{flex-shrink:0}:host([data-sui-disabled]) .sui-select__badge{opacity:.48}.sui-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950)}:host([data-sui-disabled]) .sui-select__value{color:var(--sui-text-disabled-300)}.sui-select__placeholder{color:var(--sui-text-sub-600)}:host([data-sui-disabled]) .sui-select__placeholder{color:var(--sui-text-disabled-300)}.sui-select__chevron{flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);transition:transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-open]) .sui-select__chevron{transform:rotate(180deg)}:host([data-sui-disabled]) .sui-select__chevron{color:var(--sui-icon-disabled-300)}.sui-select__hint-host{display:block;margin-top:4px}\n"] }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], leadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIcon", required: false }] }], flag: [{ type: i0.Input, args: [{ isSignal: true, alias: "flag", required: false }] }], imageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrl", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], triggerEl: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], _menu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SuiDropdownMenu), { isSignal: true }] }], onKeydown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]