@groupteknology/vuno 3.0.0 → 4.0.0

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

@@ -0,0 +1,125 @@
+<script setup>
+import { computed, defineComponent, h } from "vue";
+import { useIcons, useMessages, useTheme } from "#vuno/composables/useTheme";
+import { filled } from "#vuno/utils/slots";
+import Tooltip from "#vuno/components/Tooltip/Tooltip.vue";
+import Icon from "#vuno/primitives/PrimitiveIcon/PrimitiveIcon.vue";
+defineOptions({ name: "Tag" });
+const selected = defineModel("selected", { type: Boolean, ...{ default: false } });
+const props = defineProps({
+  disabled: { type: Boolean, required: false, default: false },
+  dismissAlign: { type: String, required: false, default: "bottom" },
+  dismissLabel: { type: String, required: false, default: void 0 },
+  icon: { type: String, required: false, default: void 0 },
+  kind: { type: String, required: false, default: "readonly" },
+  selected: { type: Boolean, required: false, default: false },
+  size: { type: String, required: false, default: "md" },
+  tagTitle: { type: String, required: false, default: void 0 },
+  text: { type: String, required: false, default: void 0 },
+  title: { type: String, required: false, default: void 0 },
+  type: { type: String, required: false, default: "gray" },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const emit = defineEmits(["change", "click", "close"]);
+const slots = defineSlots();
+const icons = useIcons();
+const messages = useMessages();
+const text = computed(() => props.text ?? props.title);
+const interactive = computed(() => props.kind === "operational" || props.kind === "selectable");
+const NativeButton = defineComponent({
+  name: "TagButtonRoot",
+  inheritAttrs: false,
+  setup(_, { attrs, slots: nativeSlots }) {
+    return () => h("button", attrs, nativeSlots.default?.());
+  }
+});
+const NativeSpan = defineComponent({
+  name: "TagSpanRoot",
+  inheritAttrs: false,
+  setup(_, { attrs, slots: nativeSlots }) {
+    return () => h("span", attrs, nativeSlots.default?.());
+  }
+});
+const rootTag = computed(() => interactive.value ? NativeButton : NativeSpan);
+const iconName = computed(() => props.size === "sm" ? void 0 : props.icon);
+const resolvedType = computed(() => props.kind === "operational" && (props.type === "high-contrast" || props.type === "outline") ? "gray" : props.type);
+const dismissLabel = computed(() => props.dismissLabel ?? `${messages.value.close} ${text.value ?? ""}`.trim());
+const ui = useTheme(
+  "tag",
+  () => props.ui,
+  () => ({
+    disabled: String(props.disabled),
+    kind: props.kind,
+    selected: String(props.kind === "selectable" && selected.value),
+    size: props.size,
+    type: resolvedType.value,
+    withIcon: String(Boolean(iconName.value))
+  })
+);
+const hasDecorator = computed(() => filled(slots.decorator));
+function activate(event) {
+  if (props.disabled || !interactive.value) return;
+  if (props.kind === "selectable") {
+    selected.value = !selected.value;
+    emit("change", selected.value);
+  }
+  emit("click", event);
+}
+function dismiss(event) {
+  if (props.disabled) return;
+  emit("close", event);
+}
+</script>
+
+<template>
+    <component
+        :is="rootTag"
+        :aria-pressed="props.kind === 'selectable' ? selected : void 0"
+        :class="ui.root"
+        :data-disabled="!interactive && props.disabled ? 'true' : void 0"
+        :disabled="interactive ? props.disabled : void 0"
+        :type="interactive ? 'button' : void 0"
+        @click="activate"
+    >
+        <Icon
+            v-if="iconName"
+            :class="ui.icon"
+            :name="iconName"
+        />
+
+        <!-- El `title` es lo que deja leer el texto que el truncado esconde. -->
+        <span
+            :class="ui.text"
+            :title="props.tagTitle ?? text"
+        >
+            <slot>{{ text }}</slot>
+        </span>
+
+        <span
+            v-if="hasDecorator"
+            :class="ui.decorator"
+        >
+            <slot name="decorator" />
+        </span>
+
+        <Tooltip
+            v-if="props.kind === 'dismissible'"
+            :disabled="props.disabled"
+            :side="props.dismissAlign"
+            :text="dismissLabel"
+        >
+            <button
+                :aria-label="dismissLabel"
+                :class="ui.close"
+                :disabled="props.disabled"
+                type="button"
+                @click.stop="dismiss"
+            >
+                <Icon
+                    :class="ui.closeIcon"
+                    :name="icons.close"
+                />
+            </button>
+        </Tooltip>
+    </component>
+</template>

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

@@ -0,0 +1,42 @@
+import type { TagProps } from './Tag.types.js';
+type __VLS_Props = TagProps;
+type __VLS_Slots = {
+    decorator?: () => unknown;
+    default?: () => unknown;
+};
+type __VLS_ModelProps = {
+    'selected'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (event: MouseEvent) => any;
+    click: (event: MouseEvent) => any;
+    change: (selected: boolean) => any;
+    "update:selected": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: ((event: MouseEvent) => any) | undefined;
+    onClick?: ((event: MouseEvent) => any) | undefined;
+    onChange?: ((selected: boolean) => any) | undefined;
+    "onUpdate:selected"?: ((value: boolean) => any) | undefined;
+}>, {
+    text: string;
+    disabled: boolean;
+    title: string;
+    size: import("./Tag.types.js").TagSize;
+    kind: import("./Tag.types.js").TagKind;
+    icon: string;
+    selected: boolean;
+    type: import("./Tag.types.js").TagType;
+    ui: import("../../types/slots.js").ComponentUi<"tag">;
+    dismissLabel: string;
+    dismissAlign: import("../Tooltip/Tooltip.types.js").TooltipSide;
+    tagTitle: 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/TextArea/TextArea.d.vue.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/TextArea/TextArea.theme.d.ts

@@ -0,0 +1,149 @@
+/**
+ * `vuno--text-area`: el campo de varias líneas.
+ *
+ * Como en `TextInput`, el borde, el fondo, el relleno y el foco van en el
+ * propio `<textarea>` y el envoltorio solo ancla lo que se superpone. Aquí la
+ * diferencia con la caja compartida de `PrimitiveControl` se nota además en el
+ * tirador de redimensionado: con el relleno lateral en el contenedor, el tirador
+ * quedaba 16 px dentro del campo en vez de en su esquina.
+ *
+ * Las medidas son las de Vuno y no las de la escala de espaciado: relleno
+ * `11px 16px` y alto mínimo 40 px. Los 11 px salen de encajar una línea de
+ * `body-01` —20 px— en esos 40, y por eso no se redondean a 12.
+ *
+ * El campo no crece con el contenido. Vuno deja la altura en manos de quien
+ * escribe —de eso va el tirador— y un campo que se estira solo le quita ese
+ * control y hace saltar el layout mientras se teclea.
+ */
+export declare const textAreaTheme: Record<"textArea", {
+    readonly compoundVariants: [{
+        readonly class: {
+            readonly divider: "block";
+            readonly message: "border-b-0";
+            readonly textarea: "mt-[30px] resize-none border-b-0 px-[14px] outline-none";
+            readonly wrapper: "not-focus-within:border-2 not-focus-within:border-(--vuno-support-error)";
+        };
+        readonly fluid: "true";
+        readonly invalid: "true";
+    }, {
+        readonly class: {
+            readonly divider: "block";
+            readonly message: "border-b border-(--vuno-border-strong-01) text-(--vuno-text-primary)";
+            readonly textarea: "resize-none border-b-0 pe-4";
+        };
+        readonly fluid: "true";
+        readonly warn: "true";
+    }];
+    readonly slots: {
+        /**
+         * `vuno--text-area__counter-alert`: la región viva del contador. Siempre
+         * en el DOM y siempre oculta; 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-area__label-counter`. Es un `vuno--label` más, así que
+         * comparte tipografía y margen con el rótulo. Va `aria-hidden`: lo que
+         * se anuncia es el límite y los avisos, no un número que cambia en cada
+         * tecla.
+         */
+        readonly counter: "mb-2 shrink-0 text-xs leading-4 font-normal tracking-[0.16px] whitespace-nowrap text-(--vuno-text-secondary)";
+        /** El límite, solo para lectores de pantalla. */
+        readonly counterDescription: "sr-only";
+        /** `vuno--text-area__inner-wrapper--decorator`, para el `AILabel`. */
+        readonly decorator: "absolute top-3 end-4 flex items-center";
+        /** `vuno--text-area__divider`, que solo existe en *fluid* y con mensaje. */
+        readonly divider: "mx-4 hidden border-t border-(--vuno-border-subtle-01)";
+        /**
+         * `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)";
+        readonly label: "";
+        /** `vuno--text-area__label-wrapper`: rótulo y contador en la misma línea. */
+        readonly labelWrapper: "relative flex w-full justify-between";
+        /** `vuno--form-requirement`; el color lo pone el estado. */
+        readonly message: "mt-1 w-full text-xs leading-4 tracking-[0.16px] break-words text-(--vuno-text-primary)";
+        /** `vuno--form-item`: la columna que agrupa rótulo, campo y mensaje. */
+        readonly root: "relative flex w-full flex-auto flex-col items-start";
+        /**
+         * `vuno--text-area__invalid-icon`. En el área de texto no se centra: se
+         * alinea con la primera línea, a `$spacing-04` del borde superior.
+         */
+        readonly stateIcon: "pointer-events-none absolute top-3 end-4 size-4";
+        /**
+         * `vuno--text-area`, tipografía `body-01`.
+         *
+         * 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; en Inter, y en
+         * un control que muestra párrafos, ese añadido se acumula línea a línea
+         * y el bloque deja de leerse con el ritmo de 20 px.
+         */
+        readonly textarea: "block max-h-[var(--vuno-text-area-max-height,none)] min-h-10 w-full min-w-40 resize-y rounded-none border-0 border-b border-(--vuno-border-strong-01) bg-(--vuno-field-01) px-4 py-[11px] text-sm leading-5 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:resize-none disabled:border-transparent 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";
+        /** `vuno--text-area__wrapper`: el ancla de lo que se superpone. */
+        readonly wrapper: "relative flex w-full max-w-full";
+    };
+    readonly variants: {
+        /**
+         * `vuno--text-area__wrapper--cols`: con `cols` el campo deja de ocupar
+         * el ancho disponible.
+         *
+         * Solo el ancho. `cols` fija columnas, no filas, y el tirador sigue en
+         * pie: la altura la decide quien escribe. La única regla que lo apaga
+         * es `:disabled`.
+         */
+        readonly cols: {
+            readonly false: {};
+            readonly true: {
+                readonly root: "w-fit";
+                readonly textarea: "w-auto";
+                readonly wrapper: "w-auto";
+            };
+        };
+        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 label: "absolute top-[13px] start-4 z-1 mb-0 flex h-4 items-center overflow-x-auto whitespace-nowrap";
+                readonly message: "relative mt-0 max-h-50 overflow-visible bg-(--vuno-field-01) px-4 py-2 pe-10";
+                readonly stateIcon: "top-2";
+                readonly textarea: "mt-8 min-h-16 px-4 pt-0 pb-[13px] focus:outline-none";
+                readonly wrapper: "flex-col bg-(--vuno-field-01) focus-within:outline-solid focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-(--vuno-focus)";
+            };
+        };
+        readonly invalid: {
+            readonly false: {};
+            readonly true: {
+                readonly decorator: "end-10";
+                readonly message: "text-(--vuno-text-error)";
+                readonly stateIcon: "text-(--vuno-support-error)";
+                readonly textarea: "pe-10 outline-solid outline-2 -outline-offset-2 outline-(--vuno-support-error) [[data-decorator]_&]:pe-16";
+            };
+        };
+        readonly readOnly: {
+            readonly false: {};
+            readonly true: {
+                readonly textarea: "border-(--vuno-border-subtle-00) bg-transparent";
+            };
+        };
+        readonly warn: {
+            readonly false: {};
+            /** Mismo reparto que en inválido: se aparta el decorador, no el icono. */
+            readonly true: {
+                readonly decorator: "end-10";
+                readonly stateIcon: "text-(--vuno-support-warning)";
+                readonly textarea: "pe-10 [[data-decorator]_&]:pe-16";
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,142 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const textAreaTheme = defineTheme("textArea", {
+  compoundVariants: [
+    /*
+     * En *fluid* el contorno de validación pasa al envoltorio, porque el
+     * mensaje va dentro de él, y aparece la línea que los separa.
+     */
+    {
+      class: {
+        divider: "block",
+        message: "border-b-0",
+        /* 2 px de borde en vez de contorno: en un diálogo el contorno del envoltorio se recorta. */
+        textarea: "mt-[30px] resize-none border-b-0 px-[14px] outline-none",
+        wrapper: "not-focus-within:border-2 not-focus-within:border-(--vuno-support-error)"
+      },
+      fluid: "true",
+      invalid: "true"
+    },
+    { class: { divider: "block", message: "border-b border-(--vuno-border-strong-01) text-(--vuno-text-primary)", textarea: "resize-none border-b-0 pe-4" }, fluid: "true", warn: "true" }
+  ],
+  slots: {
+    /**
+     * `vuno--text-area__counter-alert`: la región viva del contador. Siempre
+     * en el DOM y siempre oculta; si apareciera y desapareciera, el lector
+     * de pantalla no llegaría a leer lo que se le pone dentro.
+     */
+    announcer: "sr-only",
+    /**
+     * `vuno--text-area__label-counter`. Es un `vuno--label` más, así que
+     * comparte tipografía y margen con el rótulo. Va `aria-hidden`: lo que
+     * se anuncia es el límite y los avisos, no un número que cambia en cada
+     * tecla.
+     */
+    counter: "mb-2 shrink-0 text-xs leading-4 font-normal tracking-[0.16px] whitespace-nowrap text-(--vuno-text-secondary)",
+    /** El límite, solo para lectores de pantalla. */
+    counterDescription: "sr-only",
+    /** `vuno--text-area__inner-wrapper--decorator`, para el `AILabel`. */
+    decorator: "absolute top-3 end-4 flex items-center",
+    /** `vuno--text-area__divider`, que solo existe en *fluid* y con mensaje. */
+    divider: "mx-4 hidden border-t border-(--vuno-border-subtle-01)",
+    /**
+     * `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)",
+    label: "",
+    /** `vuno--text-area__label-wrapper`: rótulo y contador en la misma línea. */
+    labelWrapper: "relative flex w-full justify-between",
+    /** `vuno--form-requirement`; el color lo pone el estado. */
+    message: "mt-1 w-full text-xs leading-4 tracking-[0.16px] break-words text-(--vuno-text-primary)",
+    /** `vuno--form-item`: la columna que agrupa rótulo, campo y mensaje. */
+    root: "relative flex w-full flex-auto flex-col items-start",
+    /**
+     * `vuno--text-area__invalid-icon`. En el área de texto no se centra: se
+     * alinea con la primera línea, a `$spacing-04` del borde superior.
+     */
+    stateIcon: "pointer-events-none absolute top-3 end-4 size-4",
+    /**
+     * `vuno--text-area`, tipografía `body-01`.
+     *
+     * 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; en Inter, y en
+     * un control que muestra párrafos, ese añadido se acumula línea a línea
+     * y el bloque deja de leerse con el ritmo de 20 px.
+     */
+    textarea: "block max-h-[var(--vuno-text-area-max-height,none)] min-h-10 w-full min-w-40 resize-y rounded-none border-0 border-b border-(--vuno-border-strong-01) bg-(--vuno-field-01) px-4 py-[11px] text-sm leading-5 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:resize-none disabled:border-transparent 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",
+    /** `vuno--text-area__wrapper`: el ancla de lo que se superpone. */
+    wrapper: "relative flex w-full max-w-full"
+  },
+  variants: {
+    /**
+     * `vuno--text-area__wrapper--cols`: con `cols` el campo deja de ocupar
+     * el ancho disponible.
+     *
+     * Solo el ancho. `cols` fija columnas, no filas, y el tirador sigue en
+     * pie: la altura la decide quien escribe. La única regla que lo apaga
+     * es `:disabled`.
+     */
+    cols: {
+      false: {},
+      true: { root: "w-fit", textarea: "w-auto", wrapper: "w-auto" }
+    },
+    disabled: {
+      false: {},
+      true: { counter: "text-(--vuno-text-disabled)", helper: "text-(--vuno-text-disabled)" }
+    },
+    /*
+     * *Fluid*: el rótulo y el contador entran en la caja en posición
+     * absoluta y el campo reserva 32 px arriba para ellos.
+     */
+    fluid: {
+      false: {},
+      true: {
+        counter: "absolute top-[13px] end-4 z-1 mb-0 flex h-4 items-center",
+        label: "absolute top-[13px] start-4 z-1 mb-0 flex h-4 items-center overflow-x-auto whitespace-nowrap",
+        message: "relative mt-0 max-h-50 overflow-visible bg-(--vuno-field-01) px-4 py-2 pe-10",
+        /* El icono se alinea con la primera línea, que en *fluid* empieza 32 px más abajo. */
+        stateIcon: "top-2",
+        /*
+         * El hueco del rótulo lo abre un margen y no un relleno: el
+         * relleno lo atravesaría el texto al desplazarse, y el rótulo
+         * quedaría tachado por las líneas que pasan por debajo.
+         */
+        textarea: "mt-8 min-h-16 px-4 pt-0 pb-[13px] focus:outline-none",
+        wrapper: "flex-col bg-(--vuno-field-01) focus-within:outline-solid focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-(--vuno-focus)"
+      }
+    },
+    /*
+     * Vuno no reserva hueco para el icono de validación en el área de
+     * texto, y el icono acaba encima del final de la primera línea. Aquí sí
+     * se reserva, como hace el propio sistema de origen en el campo de una línea.
+     */
+    invalid: {
+      false: {},
+      true: {
+        /*
+         * Cuando coinciden icono y decorador, el que se aparta es el
+         * **decorador**: se va a 40 px y el icono se queda en sus 16.
+         * Es lo contrario del campo de una línea, donde el que se mueve
+         * es el icono, y se reproduce tal cual para que un formulario
+         * que mezcle los dos controles alinee sus esquinas.
+         */
+        decorator: "end-10",
+        message: "text-(--vuno-text-error)",
+        stateIcon: "text-(--vuno-support-error)",
+        textarea: "pe-10 outline-solid outline-2 -outline-offset-2 outline-(--vuno-support-error) [[data-decorator]_&]:pe-16"
+      }
+    },
+    readOnly: {
+      false: {},
+      true: { textarea: "border-(--vuno-border-subtle-00) bg-transparent" }
+    },
+    warn: {
+      false: {},
+      /** Mismo reparto que en inválido: se aparta el decorador, no el icono. */
+      true: { decorator: "end-10", stateIcon: "text-(--vuno-support-warning)", textarea: "pe-10 [[data-decorator]_&]:pe-16" }
+    }
+  }
+});

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

@@ -0,0 +1,45 @@
+import type { ControlUi } from '#vuno/types/control';
+/**
+ * Qué cuenta el contador. Vuno admite caracteres o palabras, y la diferencia
+ * no es cosmética: en caracteres el límite lo impone `maxlength` y el navegador
+ * corta solo; en palabras hay que interceptar el espacio, el Intro y el pegado,
+ * porque ningún atributo nativo sabe contar palabras.
+ */
+export type TextAreaCounterMode = 'character' | 'word';
+export type TextAreaSlot = 'announcer' | 'counter' | 'counterDescription' | 'decorator' | 'divider' | 'helper' | 'label' | 'labelWrapper' | 'message' | 'root' | 'stateIcon' | 'textarea' | 'wrapper';
+export type TextAreaProps = {
+    id?: string;
+    name?: string;
+    /** Ancho en caracteres. Con él el campo deja de estirarse y de poder redimensionarse. */
+    cols?: number;
+    counterMode?: TextAreaCounterMode;
+    disabled?: boolean;
+    /** El contador de Vuno. Necesita `maxCount` para tener un límite que mostrar. */
+    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 la prop equivalente a la de `TextInput`.
+     */
+    fluid?: boolean;
+    helperText?: string;
+    hideLabel?: boolean;
+    invalid?: boolean;
+    invalidText?: string;
+    labelText: string;
+    maxCount?: number;
+    /**
+     * Tope de altura, expresado en líneas. Extensión de Vuno: acota hasta dónde
+     * puede estirar el campo quien arrastra el tirador, que en Vuno no tiene
+     * máximo.
+     */
+    maxrows?: number;
+    placeholder?: string;
+    readonly?: boolean;
+    required?: boolean;
+    /** Altura inicial en líneas. Vuno usa cuatro. */
+    rows?: number;
+    ui?: ControlUi<TextAreaSlot>;
+    warn?: boolean;
+    warnText?: string;
+};