@groupteknology/vuno 3.0.0 → 4.0.0

package/dist/runtime/app/components/TextArea/TextArea.vue

@@ -0,0 +1,230 @@
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref, useId, watch } from "vue";
+import { useIcons, useTheme } from "#vuno/composables/useTheme";
+import FormLabel from "#vuno/components/FormLabel/FormLabel.vue";
+import Icon from "#vuno/primitives/PrimitiveIcon/PrimitiveIcon.vue";
+defineOptions({ name: "TextArea", inheritAttrs: false });
+const model = defineModel({ type: null, ...{ default: void 0 } });
+const props = defineProps({
+  id: { type: String, required: false, default: void 0 },
+  name: { type: String, required: false, default: void 0 },
+  cols: { type: Number, required: false, default: void 0 },
+  counterMode: { type: String, required: false, default: "character" },
+  disabled: { type: Boolean, required: false, default: false },
+  enableCounter: { type: Boolean, required: false, default: false },
+  fluid: { type: Boolean, required: false, default: false },
+  helperText: { type: String, required: false, default: void 0 },
+  hideLabel: { type: Boolean, required: false, default: false },
+  invalid: { type: Boolean, required: false, default: false },
+  invalidText: { type: String, required: false, default: void 0 },
+  labelText: { type: String, required: true },
+  maxCount: { type: Number, required: false, default: void 0 },
+  maxrows: { type: Number, required: false, default: void 0 },
+  placeholder: { type: String, required: false, default: void 0 },
+  readonly: { type: Boolean, required: false, default: false },
+  required: { type: Boolean, required: false, default: false },
+  rows: { type: Number, required: false, default: 4 },
+  ui: { type: Object, required: false, default: void 0 },
+  warn: { type: Boolean, required: false, default: false },
+  warnText: { type: String, required: false, default: void 0 }
+});
+defineSlots();
+const icons = useIcons();
+const uid = useId();
+const announced = ref("");
+let timer;
+const controlId = computed(() => props.id ?? uid);
+const counterDescriptionId = computed(() => `${controlId.value}-counter-desc`);
+const errorId = computed(() => `${controlId.value}-error-msg`);
+const helperId = computed(() => `${controlId.value}-helper-text`);
+const warnId = computed(() => `${controlId.value}-warn-msg`);
+const disabled = computed(() => !props.readonly && props.disabled);
+const invalid = computed(() => !props.readonly && !disabled.value && props.invalid);
+const warn = computed(() => !props.readonly && !invalid.value && !disabled.value && props.warn);
+const ui = useTheme(
+  "textArea",
+  () => props.ui,
+  () => ({
+    cols: String(props.cols !== void 0),
+    disabled: String(disabled.value),
+    fluid: String(props.fluid),
+    invalid: String(invalid.value),
+    readOnly: String(props.readonly),
+    warn: String(warn.value)
+  })
+);
+const message = computed(() => invalid.value ? props.invalidText : warn.value ? props.warnText : void 0);
+const messageId = computed(() => invalid.value ? errorId.value : warnId.value);
+const showHelper = computed(() => Boolean(props.helperText) && !message.value && !props.fluid);
+const stateIcon = computed(() => invalid.value ? icons.value.notifyError : warn.value ? icons.value.notifyWarning : void 0);
+const isWords = computed(() => props.counterMode === "word");
+const showCounter = computed(() => props.enableCounter && props.maxCount !== void 0);
+const value = computed(() => model.value ?? "");
+const count = computed(() => isWords.value ? words(value.value).length : value.value.length);
+const counter = computed(() => `${count.value}/${props.maxCount}`);
+const counterDescription = computed(() => `L\xEDmite de ${props.maxCount} ${isWords.value ? "palabras" : "caracteres"}`);
+const maxlength = computed(() => showCounter.value && !isWords.value ? props.maxCount : void 0);
+const describedBy = computed(() => {
+  const ids = [invalid.value ? void 0 : warn.value && message.value ? warnId.value : showHelper.value ? helperId.value : void 0, showCounter.value ? counterDescriptionId.value : void 0].filter(Boolean);
+  return ids.length ? ids.join(" ") : void 0;
+});
+const announcement = computed(() => {
+  if (!showCounter.value || props.maxCount === void 0) return "";
+  const remaining = props.maxCount - count.value;
+  if (remaining <= 0) return isWords.value ? "Se alcanz\xF3 el m\xE1ximo de palabras." : "Se alcanz\xF3 el m\xE1ximo de caracteres.";
+  if (remaining > 10) return "";
+  if (remaining === 1) return isWords.value ? "Queda 1 palabra." : "Queda 1 car\xE1cter.";
+  return isWords.value ? `Quedan ${remaining} palabras.` : `Quedan ${remaining} caracteres.`;
+});
+const sizing = computed(() => props.maxrows === void 0 ? void 0 : { "--vuno-text-area-max-height": `calc(${props.maxrows} * 1lh + 22px)` });
+function announce(next) {
+  clearTimeout(timer);
+  announced.value = "";
+  if (!next) return;
+  timer = setTimeout(
+    () => {
+      announced.value = next;
+    },
+    isWords.value ? 2e3 : 1e3
+  );
+}
+function onInput(event) {
+  model.value = event.target.value;
+}
+function onKeydown(event) {
+  if (!showCounter.value || !isWords.value || props.maxCount === void 0) return;
+  if (count.value < props.maxCount) return;
+  if (event.key !== " " && event.key !== "Enter") return;
+  event.preventDefault();
+}
+function words(text) {
+  return text.match(/\p{L}+/gu) ?? [];
+}
+function onPaste(event) {
+  if (!showCounter.value || !isWords.value || props.maxCount === void 0) return;
+  const pasted = words(event.clipboardData?.getData("text") ?? "");
+  const existing = words(value.value);
+  if (existing.length + pasted.length <= props.maxCount) return;
+  event.preventDefault();
+  model.value = existing.concat(pasted).slice(0, props.maxCount).join(" ");
+}
+watch(announcement, announce);
+onMounted(() => announce(announcement.value));
+onBeforeUnmount(() => clearTimeout(timer));
+</script>
+
+<template>
+    <div :class="ui.root">
+        <div :class="ui.labelWrapper">
+            <FormLabel
+                :disabled="disabled"
+                :for="controlId"
+                :hideLabel="props.hideLabel"
+                :invalid="invalid"
+                :ui="{ label: ui.label }"
+            >
+                {{ props.labelText }}
+            </FormLabel>
+
+            <div
+                v-if="showCounter"
+                aria-hidden="true"
+                :class="ui.counter"
+            >
+                {{ counter }}
+            </div>
+        </div>
+
+        <span
+            v-if="showCounter"
+            :id="counterDescriptionId"
+            :class="ui.counterDescription"
+        >
+            {{ counterDescription }}
+        </span>
+
+        <div
+            :class="ui.wrapper"
+            :data-decorator="$slots.decorator ? '' : void 0"
+            :data-invalid="invalid || void 0"
+        >
+            <Icon
+                v-if="stateIcon"
+                :class="ui.stateIcon"
+                :name="stateIcon"
+            />
+
+            <textarea
+                v-bind="$attrs"
+                :id="controlId"
+                :aria-describedby="describedBy"
+                :aria-errormessage="invalid && message ? errorId : void 0"
+                :aria-invalid="invalid || void 0"
+                :aria-readonly="props.readonly || void 0"
+                :class="ui.textarea"
+                :cols="props.cols"
+                :data-invalid="invalid || void 0"
+                :disabled="disabled"
+                :maxlength="maxlength"
+                :name="props.name"
+                :placeholder="props.placeholder"
+                :readonly="props.readonly"
+                :required="props.required"
+                :rows="props.rows"
+                :style="sizing"
+                :value="model"
+                @input="onInput"
+                @keydown="onKeydown"
+                @paste="onPaste"
+            />
+
+            <div
+                v-if="$slots.decorator"
+                :class="ui.decorator"
+            >
+                <slot name="decorator" />
+            </div>
+
+            <span
+                aria-atomic="true"
+                aria-live="assertive"
+                :class="ui.announcer"
+                role="alert"
+            >
+                {{ announced }}
+            </span>
+
+            <template v-if="props.fluid">
+                <hr :class="ui.divider" />
+
+                <p
+                    v-if="message"
+                    :id="messageId"
+                    :class="ui.message"
+                    role="alert"
+                >
+                    {{ message }}
+                </p>
+            </template>
+        </div>
+
+        <template v-if="!props.fluid">
+            <p
+                v-if="message"
+                :id="messageId"
+                :class="ui.message"
+                role="alert"
+            >
+                {{ message }}
+            </p>
+
+            <p
+                v-else-if="showHelper"
+                :id="helperId"
+                :class="ui.helper"
+            >
+                {{ props.helperText }}
+            </p>
+        </template>
+    </div>
+</template>

package/dist/runtime/app/components/TextArea/TextArea.vue.d.ts

@@ -0,0 +1,44 @@
+import type { TextAreaProps } from './TextArea.types.js';
+type __VLS_Props = TextAreaProps;
+type __VLS_Slots = {
+    /** El `decorator` de Vuno: un `AILabel` dentro del campo, arriba a la derecha. */
+    decorator?: () => unknown;
+};
+type __VLS_ModelProps = {
+    modelValue?: string | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {
+    disabled: boolean;
+    invalid: boolean;
+    warn: boolean;
+    placeholder: string;
+    name: string;
+    fluid: boolean;
+    hideLabel: boolean;
+    helperText: string;
+    readonly: boolean;
+    cols: number;
+    id: string;
+    ui: import("../../types/control.js").ControlUi<import("./TextArea.types.js").TextAreaSlot>;
+    required: boolean;
+    invalidText: string;
+    warnText: string;
+    rows: number;
+    counterMode: import("./TextArea.types.js").TextAreaCounterMode;
+    enableCounter: boolean;
+    maxCount: number;
+    maxrows: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,56 @@
+import type { TextInputProps } from './TextInput.types.js';
+type __VLS_Props = TextInputProps;
+type __VLS_Slots = {
+    /**
+     * El `decorator` de Vuno: un `AILabel` dentro del campo. Se coloca al
+     * final, en el sitio del icono de estado, y los dos se apartan cuando
+     * coinciden.
+     */
+    decorator?: () => unknown;
+};
+type __VLS_ModelProps = {
+    modelValue?: string | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {
+    disabled: boolean;
+    size: import("./TextInput.types.js").TextInputSize;
+    inline: boolean;
+    icon: string;
+    invalid: boolean;
+    warn: boolean;
+    type: import("../../types/input.js").TextInputType;
+    placeholder: string;
+    name: string;
+    fluid: boolean;
+    hideLabel: boolean;
+    helperText: string;
+    readonly: boolean;
+    passwordToggle: boolean;
+    id: string;
+    ui: import("../../types/control.js").ControlUi<import("./TextInput.types.js").TextInputSlot>;
+    required: boolean;
+    invalidText: string;
+    warnText: string;
+    max: string;
+    autocomplete: string;
+    min: string;
+    autofocus: boolean;
+    enableCounter: boolean;
+    maxCount: number;
+    maxlength: number;
+    hidePasswordLabel: string;
+    showPasswordLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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";
+            };
+        };
+    };
+}>;