@groupteknology/vuno 3.0.0 → 4.0.0

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

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

@@ -0,0 +1,256 @@
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref, useAttrs, 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: "TextInput", 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 },
+  autocomplete: { type: String, required: false, default: void 0 },
+  autofocus: { type: Boolean, required: false, default: false },
+  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 },
+  hidePasswordLabel: { type: String, required: false, default: "Ocultar la clave" },
+  icon: { type: String, required: false, default: void 0 },
+  inline: { 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 },
+  max: { type: String, required: false, default: void 0 },
+  maxCount: { type: Number, required: false, default: void 0 },
+  maxlength: { type: Number, required: false, default: void 0 },
+  min: { type: String, required: false, default: void 0 },
+  passwordToggle: { type: Boolean, required: false, default: false },
+  placeholder: { type: String, required: false, default: void 0 },
+  readonly: { type: Boolean, required: false, default: false },
+  required: { type: Boolean, required: false, default: false },
+  showPasswordLabel: { type: String, required: false, default: "Mostrar la clave" },
+  size: { type: String, required: false, default: "md" },
+  type: { type: String, required: false, default: "text" },
+  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 attrs = useAttrs();
+const icons = useIcons();
+const uid = useId();
+const announced = ref("");
+const revealed = ref(false);
+let timer;
+const controlId = computed(() => props.id ?? uid);
+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 showToggle = computed(() => props.passwordToggle && props.type === "password");
+const ui = useTheme(
+  "textInput",
+  () => props.ui,
+  () => ({
+    disabled: String(disabled.value),
+    fluid: String(props.fluid),
+    inline: String(props.inline && !props.fluid),
+    invalid: String(invalid.value),
+    leading: String(Boolean(props.icon)),
+    passwordToggle: String(showToggle.value),
+    readOnly: String(props.readonly),
+    size: props.size,
+    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 describedBy = computed(() => invalid.value ? void 0 : warn.value && message.value ? warnId.value : showHelper.value ? helperId.value : void 0);
+const stateIcon = computed(() => invalid.value ? icons.value.notifyError : warn.value ? icons.value.notifyWarning : void 0);
+const resolvedType = computed(() => showToggle.value && revealed.value ? "text" : props.type);
+const title = computed(() => attrs.title ?? props.placeholder);
+const maxlength = computed(() => props.maxlength ?? (props.enableCounter ? props.maxCount : void 0));
+const count = computed(() => (model.value ?? "").length);
+const showCounter = computed(() => props.enableCounter && props.maxCount !== void 0);
+const counter = computed(() => `${count.value}/${props.maxCount}`);
+const announcement = computed(() => {
+  if (!showCounter.value || props.maxCount === void 0) return "";
+  const remaining = props.maxCount - count.value;
+  if (remaining <= 0) return "Se alcanz\xF3 el m\xE1ximo de caracteres.";
+  if (remaining > 10) return "";
+  return remaining === 1 ? "Queda 1 car\xE1cter." : `Quedan ${remaining} caracteres.`;
+});
+function announce(value) {
+  clearTimeout(timer);
+  announced.value = "";
+  if (!value) return;
+  timer = setTimeout(() => {
+    announced.value = value;
+  }, 1e3);
+}
+function onInput(event) {
+  model.value = event.target.value;
+}
+watch(announcement, announce);
+onMounted(() => announce(announcement.value));
+onBeforeUnmount(() => clearTimeout(timer));
+</script>
+
+<template>
+    <div :class="ui.wrapper">
+        <!-- `vuno--text-input__label-wrapper`. En inline es además el lateral izquierdo de la fila. -->
+        <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"
+                :class="ui.counter"
+            >
+                {{ counter }}
+            </div>
+        </div>
+
+        <div :class="ui.fieldOuter">
+            <div
+                :class="ui.field"
+                :data-decorator="$slots.decorator ? '' : void 0"
+                :data-invalid="invalid || void 0"
+            >
+                <Icon
+                    v-if="props.icon"
+                    :class="ui.icon"
+                    :name="props.icon"
+                />
+
+                <input
+                    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"
+                    :autocomplete="props.autocomplete"
+                    :autofocus="props.autofocus"
+                    :class="ui.input"
+                    :data-invalid="invalid || void 0"
+                    :disabled="disabled"
+                    :max="props.max"
+                    :maxlength="maxlength"
+                    :min="props.min"
+                    :name="props.name"
+                    :placeholder="props.placeholder"
+                    :readonly="props.readonly"
+                    :required="props.required"
+                    :title="title"
+                    :type="resolvedType"
+                    :value="model"
+                    @input="onInput"
+                />
+
+                <Icon
+                    v-if="stateIcon"
+                    :class="ui.stateIcon"
+                    :name="stateIcon"
+                />
+
+                <button
+                    v-if="showToggle"
+                    :aria-label="revealed ? props.hidePasswordLabel : props.showPasswordLabel"
+                    :class="ui.toggle"
+                    :disabled="disabled"
+                    :title="revealed ? props.hidePasswordLabel : props.showPasswordLabel"
+                    type="button"
+                    @click="revealed = !revealed"
+                >
+                    <Icon
+                        :class="ui.toggleIcon"
+                        :name="revealed ? 'carbon:view-off' : 'carbon:view'"
+                    />
+                </button>
+
+                <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 && !props.inline">
+                <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>
+
+        <!-- En inline el mensaje o la ayuda ocupan el lateral derecho de la fila. -->
+        <div
+            v-if="props.inline && !props.fluid && (message || showHelper)"
+            :class="ui.labelWrapper"
+        >
+            <p
+                v-if="message"
+                :id="messageId"
+                :class="ui.message"
+                role="alert"
+            >
+                {{ message }}
+            </p>
+
+            <p
+                v-else
+                :id="helperId"
+                :class="ui.helper"
+            >
+                {{ props.helperText }}
+            </p>
+        </div>
+    </div>
+</template>

package/dist/runtime/app/components/TextInput/TextInput.vue.d.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/Tile/Tile.d.vue.ts

@@ -0,0 +1,16 @@
+import type { TileProps } from './Tile.types.js';
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<TileProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TileProps> & Readonly<{}>, {
+    tag: import("vue").Component | string;
+    ui: import("../../types/slots.js").ComponentUi<"tile">;
+}, {}, {}, {}, 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;
+    };
+};