@groupteknology/vuno 2.0.0 → 4.0.0

package/dist/runtime/app/components/TextInput/TextInput.theme.d.ts

@@ -0,0 +1,252 @@
+/**
+ * `vuno--text-input`: el campo de una línea.
+ *
+ * Vuno pinta el fondo, el borde inferior, el relleno y el contorno de foco
+ * **sobre el propio `<input>`**, y deja el envoltorio (`__field-wrapper`) como
+ * un simple ancla —`position: relative`— para el icono de estado y el
+ * decorador. Por eso este tema no reutiliza la caja de `PrimitiveControl`: esa
+ * caja pinta el borde en el contenedor y deja el control transparente, que es
+ * la anatomía del combobox y del campo *fluid*, no la del campo de texto. Con
+ * ella el estado tenía que leerse con `has-[]`, la altura era `min-h` en vez de
+ * la exacta del tamaño, y el contorno rojo del estado inválido caía en un
+ * elemento distinto del que lo pone el sistema de origen. Es la misma decisión que ya tomaron
+ * `Search` y `Select`, y por la misma razón.
+ *
+ * La altura viaja en `--vuno-text-input-height` porque tres medidas son **el
+ * mismo número**: el alto del campo, el lado del botón de visibilidad de la
+ * clave y el relleno final que ese botón obliga a reservar. Declararlo una vez
+ * evita que un tamaño nuevo deje dos de las tres sin actualizar.
+ *
+ * El contorno rojo del estado inválido **cede ante el foco**, como en el
+ * sistema de origen: allí la regla de error cuelga de
+ * `input[data-invalid]:not(:focus)`, y aquí la gana el modificador `focus:`,
+ * que suma una pseudoclase sobre la utilidad suelta del estado. Mientras se
+ * escribe manda el azul —que es lo que hay que ver entonces— y el rojo vuelve
+ * al salir. `Select` escribe esa misma precedencia de forma explícita con
+ * `not-focus:` porque allí el contorno vive en el `<select>` y no hay
+ * modificador que lo desempate.
+ *
+ * Deshabilitado gana a las dos: el `<input>` apaga el contorno, igual que el
+ * área de texto, para que un campo apagado no conserve el recuadro rojo de un
+ * error que ya no se puede corregir.
+ */
+export declare const textInputTheme: Record<"textInput", {
+    readonly compoundVariants: [{
+        readonly class: {
+            readonly input: "pe-[calc(var(--vuno-text-input-height)+1.5rem)]";
+            readonly stateIcon: "end-(--vuno-text-input-height)";
+        };
+        readonly invalid: "true";
+        readonly passwordToggle: "true";
+    }, {
+        readonly class: {
+            readonly input: "pe-[calc(var(--vuno-text-input-height)+1.5rem)]";
+            readonly stateIcon: "end-(--vuno-text-input-height)";
+        };
+        readonly passwordToggle: "true";
+        readonly warn: "true";
+    }, {
+        readonly class: {
+            readonly divider: "block";
+            readonly field: "not-focus-within:outline-solid not-focus-within:outline-2 not-focus-within:-outline-offset-2 not-focus-within:outline-(--vuno-support-error)";
+            readonly input: "border-b-0 pe-4 outline-none";
+        };
+        readonly fluid: "true";
+        readonly invalid: "true";
+    }, {
+        readonly class: {
+            readonly divider: "block";
+            readonly field: "border-b border-(--vuno-border-strong-01)";
+            readonly input: "border-b-0 pe-4";
+        };
+        readonly fluid: "true";
+        readonly warn: "true";
+    }, {
+        readonly class: {
+            readonly stateIcon: "top-20 translate-y-0";
+        };
+        readonly fluid: "true";
+        readonly invalid: "true";
+    }, {
+        readonly class: {
+            readonly stateIcon: "top-20 translate-y-0";
+        };
+        readonly fluid: "true";
+        readonly warn: "true";
+    }, {
+        readonly class: {
+            readonly message: "text-(--vuno-text-error)";
+        };
+        readonly inline: "true";
+        readonly invalid: "true";
+    }, {
+        readonly class: {
+            readonly input: "pe-10";
+            readonly stateIcon: "end-4";
+            readonly toggle: "top-[26px] end-2 size-8";
+        };
+        readonly fluid: "true";
+        readonly passwordToggle: "true";
+    }, {
+        readonly class: {
+            readonly input: "text-(--vuno-text-secondary)";
+            readonly wrapper: "bg-transparent";
+        };
+        readonly fluid: "true";
+        readonly readOnly: "true";
+    }];
+    readonly slots: {
+        /**
+         * `vuno--text-input__counter-alert`: la región viva que anuncia cuántos
+         * caracteres quedan. Está siempre en el DOM y siempre oculta a la vista;
+         * si apareciera y desapareciera, el lector de pantalla no llegaría a
+         * leer lo que se le pone dentro.
+         */
+        readonly announcer: "sr-only";
+        /**
+         * `vuno--text-input__label-counter`. Es un `vuno--label` más, así que
+         * comparte tipografía y margen con el rótulo y queda a su altura.
+         */
+        readonly counter: "mb-2 shrink-0 text-xs leading-4 font-normal tracking-[0.16px] whitespace-nowrap text-(--vuno-text-secondary)";
+        /** `vuno--text-input__field-inner-wrapper--decorator`, para el `AILabel`. */
+        readonly decorator: "absolute top-1/2 end-4 flex -translate-y-1/2 items-center";
+        /**
+         * `vuno--text-input__divider`, que solo existe en *fluid* y solo cuando
+         * hay mensaje: separa el campo del texto de validación que va dentro de
+         * la misma caja.
+         */
+        readonly divider: "mx-4 hidden border-t border-(--vuno-border-subtle-01)";
+        /** `vuno--text-input__field-wrapper`: el ancla de lo que se superpone. */
+        readonly field: "relative flex w-full";
+        /** `vuno--text-input__field-outer-wrapper`: campo y mensaje en columna. */
+        readonly fieldOuter: "flex w-full flex-auto flex-col items-start";
+        /**
+         * `vuno--form__helper-text`, tipografía `helper-text-01`.
+         *
+         * El selector de ancestro reproduce `fieldset[disabled]
+         * .vuno--form__helper-text`: dentro de un `FormGroup` deshabilitado la
+         * ayuda se apaga aunque el campo no declare `disabled` por su cuenta.
+         */
+        readonly helper: "z-0 mt-1 w-full text-xs leading-4 tracking-[0.16px] text-(--vuno-text-helper) [fieldset:disabled_&]:text-(--vuno-text-disabled)";
+        /** El icono inicial, extensión de Vuno. No recibe puntero: debajo está el campo. */
+        readonly icon: "pointer-events-none absolute top-1/2 start-4 size-4 -translate-y-1/2 text-(--vuno-icon-secondary)";
+        /**
+         * `vuno--text-input`. `body-compact-01` en **los cuatro tamaños**: la
+         * hoja de Vuno la aplica al campo sin condicionarla al tamaño, que
+         * solo cambia la altura.
+         *
+         * El interletrado es la única medida que no se copia. Los +0.16 px del
+         * escalón de 14 px están calculados para IBM Plex Sans, más estrecha y
+         * de x-height menor; Inter ya reparte ese aire a 14 px y con el añadido
+         * el valor tecleado se despega del placeholder y del rótulo.
+         */
+        readonly input: "block h-(--vuno-text-input-height) w-full min-w-0 appearance-none rounded-none border-0 border-b border-(--vuno-border-strong-01) bg-(--vuno-field-01) px-4 py-0 text-sm leading-[1.125rem] tracking-normal text-(--vuno-text-primary) caret-(--vuno-text-primary) outline-none transition-[background-color,outline] duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) placeholder:text-(--vuno-text-placeholder) focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-focus) disabled:cursor-not-allowed disabled:bg-(--vuno-field-01) disabled:text-(--vuno-text-disabled) disabled:outline-none disabled:[-webkit-text-fill-color:var(--vuno-text-disabled)] disabled:placeholder:text-(--vuno-text-disabled) motion-reduce:transition-none [[data-decorator]_&]:pe-10";
+        /** El rótulo. Existe para que `inline` y `fluid` lo recoloquen. */
+        readonly label: "";
+        /** `vuno--text-input__label-wrapper`: rótulo y contador en la misma línea. */
+        readonly labelWrapper: "flex w-full justify-between";
+        /**
+         * `vuno--form-requirement`. El color lo pone el estado: Vuno lo tiñe de
+         * error solo cuando el campo es inválido —la regla de `_form.scss` cuelga
+         * de `[data-invalid]`— y deja el aviso en el texto normal, porque un
+         * aviso no impide guardar.
+         */
+        readonly message: "mt-1 w-full text-xs leading-4 tracking-[0.16px] break-words text-(--vuno-text-primary)";
+        /** `vuno--text-input__invalid-icon`. El color va en la variante del estado. */
+        readonly stateIcon: "pointer-events-none absolute top-1/2 end-4 size-4 -translate-y-1/2";
+        /**
+         * `vuno--text-input--password__visibility__toggle`: un cuadrado del alto
+         * del campo pegado al borde final.
+         *
+         * El contorno cuelga de `:focus` y no de `:focus-visible` a propósito:
+         * el botón conserva el foco después de pulsarlo con el ratón, y quien
+         * alterna la visibilidad y sigue con el teclado necesita ver desde
+         * dónde arranca la tabulación.
+         */
+        readonly toggle: "absolute end-0 top-0 flex size-(--vuno-text-input-height) cursor-pointer items-center justify-center border-0 bg-transparent p-0 text-(--vuno-icon-primary) transition-[outline] duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-focus) disabled:cursor-not-allowed disabled:text-(--vuno-icon-disabled) motion-reduce:transition-none";
+        readonly toggleIcon: "size-4";
+        /** `vuno--text-input-wrapper` sobre `vuno--form-item`. */
+        readonly wrapper: "flex w-full flex-auto flex-col items-start";
+    };
+    readonly variants: {
+        readonly disabled: {
+            readonly false: {};
+            readonly true: {
+                readonly counter: "text-(--vuno-text-disabled)";
+                readonly helper: "text-(--vuno-text-disabled)";
+            };
+        };
+        readonly fluid: {
+            readonly false: {};
+            readonly true: {
+                readonly counter: "absolute top-[13px] end-4 z-1 mb-0 flex h-4 items-center";
+                readonly field: "block w-full focus-within:outline-solid focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-(--vuno-focus)";
+                readonly input: "h-auto min-h-16 pt-8 pb-[13px] focus:outline-none";
+                readonly label: "absolute top-[13px] start-4 z-1 mb-0 flex h-4 items-center overflow-x-auto whitespace-nowrap";
+                readonly message: "mt-0 px-4 py-2 pe-10";
+                readonly wrapper: "relative bg-(--vuno-field-01)";
+            };
+        };
+        readonly inline: {
+            readonly false: {};
+            readonly true: {
+                readonly fieldOuter: "flex-[8]";
+                readonly helper: "mt-0.5";
+                readonly label: "mb-0 flex-initial break-words";
+                readonly labelWrapper: "w-auto max-w-[142px] flex-initial break-words first-of-type:me-2 last-of-type:ms-2";
+                readonly message: "mt-0 block max-h-50 overflow-visible font-normal";
+                readonly wrapper: "flex-row flex-nowrap items-center";
+            };
+        };
+        readonly invalid: {
+            readonly false: {};
+            readonly true: {
+                readonly input: "pe-10 outline-solid outline-2 -outline-offset-2 outline-(--vuno-support-error) [[data-decorator]_&]:pe-16";
+                readonly message: "text-(--vuno-text-error)";
+                readonly stateIcon: "text-(--vuno-support-error) [[data-decorator]_&]:end-10";
+            };
+        };
+        /** Hay icono inicial: el texto arranca después de él. */
+        readonly leading: {
+            readonly false: {};
+            readonly true: {
+                readonly input: "ps-10";
+            };
+        };
+        /** Reserva el cuadrado final para el botón de visibilidad de la clave. */
+        readonly passwordToggle: {
+            readonly false: {};
+            readonly true: {
+                readonly input: "pe-(--vuno-text-input-height)";
+            };
+        };
+        readonly readOnly: {
+            readonly false: {};
+            readonly true: {
+                readonly input: "border-(--vuno-border-subtle-00) bg-transparent";
+            };
+        };
+        /** Las alturas de Vuno. `xs` es el mínimo de `layout.use('size')`. */
+        readonly size: {
+            readonly xs: {
+                readonly field: "[--vuno-text-input-height:1.5rem]";
+            };
+            readonly sm: {
+                readonly field: "[--vuno-text-input-height:2rem]";
+            };
+            readonly md: {
+                readonly field: "[--vuno-text-input-height:2.5rem]";
+            };
+            readonly lg: {
+                readonly field: "[--vuno-text-input-height:3rem]";
+            };
+        };
+        readonly warn: {
+            readonly false: {};
+            readonly true: {
+                readonly input: "pe-10 [[data-decorator]_&]:pe-16";
+                readonly stateIcon: "text-(--vuno-support-warning) [[data-decorator]_&]:end-10";
+            };
+        };
+    };
+}>;

package/dist/runtime/app/components/TextInput/TextInput.theme.js

@@ -0,0 +1,205 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const textInputTheme = defineTheme("textInput", {
+  compoundVariants: [
+    /*
+     * Con el botón de visibilidad, el hueco final ya no es el del icono de
+     * estado: Vuno reserva la altura del campo más 1.5 rem y empuja el
+     * icono hasta el borde interior del botón.
+     */
+    { class: { input: "pe-[calc(var(--vuno-text-input-height)+1.5rem)]", stateIcon: "end-(--vuno-text-input-height)" }, invalid: "true", passwordToggle: "true" },
+    { class: { input: "pe-[calc(var(--vuno-text-input-height)+1.5rem)]", stateIcon: "end-(--vuno-text-input-height)" }, passwordToggle: "true", warn: "true" },
+    /*
+     * En *fluid* el contorno de validación pasa al envoltorio, porque el
+     * mensaje va dentro de él: el rojo solo se ve sin foco, y con foco manda
+     * el azul. También aparece la línea que separa campo y mensaje.
+     */
+    { class: { divider: "block", field: "not-focus-within:outline-solid not-focus-within:outline-2 not-focus-within:-outline-offset-2 not-focus-within:outline-(--vuno-support-error)", input: "border-b-0 pe-4 outline-none" }, fluid: "true", invalid: "true" },
+    { class: { divider: "block", field: "border-b border-(--vuno-border-strong-01)", input: "border-b-0 pe-4" }, fluid: "true", warn: "true" },
+    /** En *fluid* el mensaje va dentro de la caja y el icono baja a su fila. */
+    { class: { stateIcon: "top-20 translate-y-0" }, fluid: "true", invalid: "true" },
+    { class: { stateIcon: "top-20 translate-y-0" }, fluid: "true", warn: "true" },
+    /** `vuno--text-input-wrapper--inline--invalid`: ahí el mensaje sí se tiñe. */
+    { class: { message: "text-(--vuno-text-error)" }, inline: "true", invalid: "true" },
+    /*
+     * En *fluid* el botón de la clave deja de ser el cuadrado del campo:
+     * mide 32 px, baja a 26 px del borde superior —por debajo del rótulo
+     * flotante— y se separa 8 px del final. El hueco que el campo reserva
+     * es entonces fijo, 40 px, y no la altura del control. Va después de
+     * las compuestas de validación porque también manda sobre el relleno
+     * que estas piden.
+     */
+    { class: { input: "pe-10", stateIcon: "end-4", toggle: "top-[26px] end-2 size-8" }, fluid: "true", passwordToggle: "true" },
+    /*
+     * En *fluid* el gris lo pinta el envoltorio, así que el fondo
+     * transparente de solo lectura tiene que apagarse ahí: sobre el
+     * `<input>` no se ve. El valor baja además a texto secundario, que es
+     * la segunda señal con la que se separa de un campo editable.
+     */
+    { class: { input: "text-(--vuno-text-secondary)", wrapper: "bg-transparent" }, fluid: "true", readOnly: "true" }
+  ],
+  slots: {
+    /**
+     * `vuno--text-input__counter-alert`: la región viva que anuncia cuántos
+     * caracteres quedan. Está siempre en el DOM y siempre oculta a la vista;
+     * si apareciera y desapareciera, el lector de pantalla no llegaría a
+     * leer lo que se le pone dentro.
+     */
+    announcer: "sr-only",
+    /**
+     * `vuno--text-input__label-counter`. Es un `vuno--label` más, así que
+     * comparte tipografía y margen con el rótulo y queda a su altura.
+     */
+    counter: "mb-2 shrink-0 text-xs leading-4 font-normal tracking-[0.16px] whitespace-nowrap text-(--vuno-text-secondary)",
+    /** `vuno--text-input__field-inner-wrapper--decorator`, para el `AILabel`. */
+    decorator: "absolute top-1/2 end-4 flex -translate-y-1/2 items-center",
+    /**
+     * `vuno--text-input__divider`, que solo existe en *fluid* y solo cuando
+     * hay mensaje: separa el campo del texto de validación que va dentro de
+     * la misma caja.
+     */
+    divider: "mx-4 hidden border-t border-(--vuno-border-subtle-01)",
+    /** `vuno--text-input__field-wrapper`: el ancla de lo que se superpone. */
+    field: "relative flex w-full",
+    /** `vuno--text-input__field-outer-wrapper`: campo y mensaje en columna. */
+    fieldOuter: "flex w-full flex-auto flex-col items-start",
+    /**
+     * `vuno--form__helper-text`, tipografía `helper-text-01`.
+     *
+     * El selector de ancestro reproduce `fieldset[disabled]
+     * .vuno--form__helper-text`: dentro de un `FormGroup` deshabilitado la
+     * ayuda se apaga aunque el campo no declare `disabled` por su cuenta.
+     */
+    helper: "z-0 mt-1 w-full text-xs leading-4 tracking-[0.16px] text-(--vuno-text-helper) [fieldset:disabled_&]:text-(--vuno-text-disabled)",
+    /** El icono inicial, extensión de Vuno. No recibe puntero: debajo está el campo. */
+    icon: "pointer-events-none absolute top-1/2 start-4 size-4 -translate-y-1/2 text-(--vuno-icon-secondary)",
+    /**
+     * `vuno--text-input`. `body-compact-01` en **los cuatro tamaños**: la
+     * hoja de Vuno la aplica al campo sin condicionarla al tamaño, que
+     * solo cambia la altura.
+     *
+     * El interletrado es la única medida que no se copia. Los +0.16 px del
+     * escalón de 14 px están calculados para IBM Plex Sans, más estrecha y
+     * de x-height menor; Inter ya reparte ese aire a 14 px y con el añadido
+     * el valor tecleado se despega del placeholder y del rótulo.
+     */
+    input: "block h-(--vuno-text-input-height) w-full min-w-0 appearance-none rounded-none border-0 border-b border-(--vuno-border-strong-01) bg-(--vuno-field-01) px-4 py-0 text-sm leading-[1.125rem] tracking-normal text-(--vuno-text-primary) caret-(--vuno-text-primary) outline-none transition-[background-color,outline] duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) placeholder:text-(--vuno-text-placeholder) focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-focus) disabled:cursor-not-allowed disabled:bg-(--vuno-field-01) disabled:text-(--vuno-text-disabled) disabled:outline-none disabled:[-webkit-text-fill-color:var(--vuno-text-disabled)] disabled:placeholder:text-(--vuno-text-disabled) motion-reduce:transition-none [[data-decorator]_&]:pe-10",
+    /** El rótulo. Existe para que `inline` y `fluid` lo recoloquen. */
+    label: "",
+    /** `vuno--text-input__label-wrapper`: rótulo y contador en la misma línea. */
+    labelWrapper: "flex w-full justify-between",
+    /**
+     * `vuno--form-requirement`. El color lo pone el estado: Vuno lo tiñe de
+     * error solo cuando el campo es inválido —la regla de `_form.scss` cuelga
+     * de `[data-invalid]`— y deja el aviso en el texto normal, porque un
+     * aviso no impide guardar.
+     */
+    message: "mt-1 w-full text-xs leading-4 tracking-[0.16px] break-words text-(--vuno-text-primary)",
+    /** `vuno--text-input__invalid-icon`. El color va en la variante del estado. */
+    stateIcon: "pointer-events-none absolute top-1/2 end-4 size-4 -translate-y-1/2",
+    /**
+     * `vuno--text-input--password__visibility__toggle`: un cuadrado del alto
+     * del campo pegado al borde final.
+     *
+     * El contorno cuelga de `:focus` y no de `:focus-visible` a propósito:
+     * el botón conserva el foco después de pulsarlo con el ratón, y quien
+     * alterna la visibilidad y sigue con el teclado necesita ver desde
+     * dónde arranca la tabulación.
+     */
+    toggle: "absolute end-0 top-0 flex size-(--vuno-text-input-height) cursor-pointer items-center justify-center border-0 bg-transparent p-0 text-(--vuno-icon-primary) transition-[outline] duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-focus) disabled:cursor-not-allowed disabled:text-(--vuno-icon-disabled) motion-reduce:transition-none",
+    toggleIcon: "size-4",
+    /** `vuno--text-input-wrapper` sobre `vuno--form-item`. */
+    wrapper: "flex w-full flex-auto flex-col items-start"
+  },
+  variants: {
+    /*
+     * El `<input>` se apaga solo con `:disabled`. Lo que no puede saberlo
+     * son sus hermanos: la ayuda y el contador, que Vuno también atenúa.
+     */
+    disabled: {
+      false: {},
+      true: { counter: "text-(--vuno-text-disabled)", helper: "text-(--vuno-text-disabled)" }
+    },
+    /*
+     * *Fluid*: el rótulo y el contador se meten dentro de la caja en
+     * posición absoluta, el campo crece hasta 64 px para dejarles sitio
+     * arriba, la ayuda desaparece —en Vuno su hueco lo ocupa un
+     * `Toggletip` junto al rótulo— y el mensaje se pinta dentro.
+     */
+    fluid: {
+      false: {},
+      true: {
+        counter: "absolute top-[13px] end-4 z-1 mb-0 flex h-4 items-center",
+        field: "block w-full focus-within:outline-solid focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-(--vuno-focus)",
+        input: "h-auto min-h-16 pt-8 pb-[13px] focus:outline-none",
+        label: "absolute top-[13px] start-4 z-1 mb-0 flex h-4 items-center overflow-x-auto whitespace-nowrap",
+        message: "mt-0 px-4 py-2 pe-10",
+        wrapper: "relative bg-(--vuno-field-01)"
+      }
+    },
+    /*
+     * *Inline*: el rótulo se pone a la izquierda del campo y el mensaje o la
+     * ayuda a su derecha, cada uno en una columna estrecha de 142 px como
+     * máximo. Los dos laterales comparten el slot `labelWrapper`.
+     *
+     * Esa columna **no** se apila: el original la parte en dos elementos
+     * —la columna de 142 px por fuera y la fila de rótulo y contador por
+     * dentro— y aquí los dos papeles viven en el mismo slot, así que basta
+     * con que la caja siga siendo una fila con `justify-between`. Con
+     * `flex-col` el contador caía debajo del rótulo en vez de a su derecha.
+     *
+     * La columna del campo toma `flex: 8` —base 0 y crecimiento 8— para que
+     * el encogimiento no se reparta con el lateral y el rótulo conserve sus
+     * 142 px.
+     */
+    inline: {
+      false: {},
+      true: {
+        fieldOuter: "flex-[8]",
+        helper: "mt-0.5",
+        label: "mb-0 flex-initial break-words",
+        labelWrapper: "w-auto max-w-[142px] flex-initial break-words first-of-type:me-2 last-of-type:ms-2",
+        message: "mt-0 block max-h-50 overflow-visible font-normal",
+        wrapper: "flex-row flex-nowrap items-center"
+      }
+    },
+    invalid: {
+      false: {},
+      true: {
+        input: "pe-10 outline-solid outline-2 -outline-offset-2 outline-(--vuno-support-error) [[data-decorator]_&]:pe-16",
+        message: "text-(--vuno-text-error)",
+        stateIcon: "text-(--vuno-support-error) [[data-decorator]_&]:end-10"
+      }
+    },
+    /** Hay icono inicial: el texto arranca después de él. */
+    leading: {
+      false: {},
+      true: { input: "ps-10" }
+    },
+    /** Reserva el cuadrado final para el botón de visibilidad de la clave. */
+    passwordToggle: {
+      false: {},
+      true: { input: "pe-(--vuno-text-input-height)" }
+    },
+    /*
+     * Solo lectura: fondo transparente y borde apagado, como Vuno. No
+     * cambia el cursor ni el color del texto —el valor se tiene que poder
+     * leer y seleccionar—, y el atributo `readonly` evita la escritura sin
+     * sacar el campo del tabulador.
+     */
+    readOnly: {
+      false: {},
+      true: { input: "border-(--vuno-border-subtle-00) bg-transparent" }
+    },
+    /** Las alturas de Vuno. `xs` es el mínimo de `layout.use('size')`. */
+    size: {
+      xs: { field: "[--vuno-text-input-height:1.5rem]" },
+      sm: { field: "[--vuno-text-input-height:2rem]" },
+      md: { field: "[--vuno-text-input-height:2.5rem]" },
+      lg: { field: "[--vuno-text-input-height:3rem]" }
+    },
+    warn: {
+      false: {},
+      true: { input: "pe-10 [[data-decorator]_&]:pe-16", stateIcon: "text-(--vuno-support-warning) [[data-decorator]_&]:end-10" }
+    }
+  }
+});

package/dist/runtime/app/components/TextInput/TextInput.types.d.ts

@@ -0,0 +1,81 @@
+import type { ControlSize, ControlUi } from '#vuno/types/control';
+import type { TextInputType } from '#vuno/types/input';
+/**
+ * La escala del campo.
+ *
+ * El tipo de Vuno admite un paso más corto que los tres que documenta la
+ * guía de uso —`xs`, 24 px, el mínimo de `layout.use('size')` en
+ * `_text-input.scss`—, así que se declara aquí en vez de ensanchar
+ * `ControlSize`, que es la escala de los controles en general. Es el mismo
+ * recurso que usa `SelectSize`.
+ */
+export type TextInputSize = 'xs' | ControlSize;
+/**
+ * Los slots del campo, con los nombres de la anatomía de Vuno.
+ *
+ * Sustituyen a los tres anteriores —`root`, `base` y `field`—, que nombraban la
+ * caja compartida de `PrimitiveControl` y no las partes que Vuno define. El
+ * cambio es deliberado: `field` designaba el envoltorio externo y `root` la
+ * caja, justo al contrario de lo que esas palabras significan en el CSS de
+ * Vuno, así que conservarlos habría dejado el tema ilegible al compararlo con
+ * la hoja original.
+ */
+export type TextInputSlot = 'announcer' | 'counter' | 'decorator' | 'divider' | 'field' | 'fieldOuter' | 'helper' | 'icon' | 'input' | 'label' | 'labelWrapper' | 'message' | 'stateIcon' | 'toggle' | 'toggleIcon' | 'wrapper';
+export type TextInputProps = {
+    id?: string;
+    name?: string;
+    autocomplete?: string;
+    autofocus?: boolean;
+    disabled?: boolean;
+    /**
+     * El contador de caracteres de Vuno. Necesita `maxCount` para tener algo
+     * que contar; sin él no se pinta, como en React.
+     */
+    enableCounter?: boolean;
+    /**
+     * El estilo *fluid* de Vuno: el rótulo entra en la caja, la ayuda
+     * desaparece y el mensaje de validación se pinta dentro del campo bajo una
+     * línea divisoria.
+     *
+     * Es una prop y no un contexto heredado de `Form` porque `FluidForm` ya se
+     * recogió así en `FormProps.fluid`, y porque el contexto `isFluid` de React
+     * todavía no lo consume ningún control del runtime.
+     */
+    fluid?: boolean;
+    helperText?: string;
+    /** Oculta el rótulo a la vista conservándolo en el árbol de accesibilidad. */
+    hideLabel?: boolean;
+    /** Nombre accesible del botón de visibilidad cuando la clave está a la vista. */
+    hidePasswordLabel?: string;
+    /**
+     * Icono al principio del campo. Es una extensión propia —el sistema de origen
+     * no la tiene— y por eso el relleno inicial crece solo cuando se usa.
+     */
+    icon?: string;
+    /** La variante *inline* de Vuno: el rótulo se coloca al lado del campo. */
+    inline?: boolean;
+    invalid?: boolean;
+    invalidText?: string;
+    labelText: string;
+    max?: string;
+    /** Límite del contador. Fija `maxlength` cuando el contador está activo. */
+    maxCount?: number;
+    maxlength?: number;
+    min?: string;
+    /**
+     * El `PasswordInput` del sistema de origen, que allí es un componente aparte cuya única
+     * diferencia es el botón que alterna la visibilidad. Aquí es un modificador
+     * para no duplicar el contrato del campo; solo actúa con `type="password"`.
+     */
+    passwordToggle?: boolean;
+    placeholder?: string;
+    readonly?: boolean;
+    required?: boolean;
+    /** Nombre accesible del botón de visibilidad cuando la clave está oculta. */
+    showPasswordLabel?: string;
+    size?: TextInputSize;
+    type?: TextInputType;
+    ui?: ControlUi<TextInputSlot>;
+    warn?: boolean;
+    warnText?: string;
+};