@groupteknology/vuno 2.0.0 → 4.0.0

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

@@ -0,0 +1,144 @@
+export declare const tagTheme: Record<"tag", {
+    readonly compoundVariants: [{
+        readonly class: {
+            readonly root: "bg-(--vuno-layer-selected-inverse) text-(--vuno-text-inverse) hover:bg-(--vuno-layer-selected-inverse)";
+        };
+        readonly kind: "selectable";
+        readonly selected: "true";
+    }, {
+        readonly class: {
+            readonly root: "py-0 pe-0";
+        };
+        readonly kind: "dismissible";
+    }, {
+        readonly class: {
+            readonly root: "ps-1";
+        };
+        readonly size: "md";
+        readonly withIcon: "true";
+    }, {
+        readonly class: {
+            readonly root: "ps-2";
+        };
+        readonly size: "lg";
+        readonly withIcon: "true";
+    }, {
+        readonly class: {
+            readonly close: "box-border bg-clip-content p-px";
+        };
+        readonly kind: "dismissible";
+        readonly type: "outline";
+    }, {
+        readonly class: {
+            readonly close: "cursor-not-allowed hover:bg-transparent";
+            readonly closeIcon: "fill-(--vuno-icon-disabled)";
+            readonly root: "bg-(--vuno-layer-01) text-(--vuno-text-disabled) shadow-none outline-none";
+        };
+        readonly disabled: "true";
+    }, {
+        readonly class: {
+            readonly root: "cursor-not-allowed";
+        };
+        readonly disabled: "true";
+        readonly kind: "readonly";
+    }, {
+        readonly class: {
+            readonly root: "cursor-not-allowed border-(--vuno-border-disabled) hover:bg-(--vuno-layer-01)";
+        };
+        readonly disabled: "true";
+        readonly kind: "operational";
+    }, {
+        readonly class: {
+            readonly root: "cursor-not-allowed border-(--vuno-border-disabled) hover:bg-(--vuno-layer-01)";
+        };
+        readonly disabled: "true";
+        readonly kind: "selectable";
+    }];
+    readonly slots: {
+        readonly close: "flex shrink-0 cursor-pointer items-center justify-center rounded-full border-0 bg-transparent p-0 text-current transition-[background-color,box-shadow] duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) hover:bg-(--vuno-tag-hover) focus:z-[99999] focus:shadow-[inset_0_0_0_1px_var(--vuno-tag-focus)] focus:outline-none motion-reduce:transition-none forced-colors:focus:text-[Highlight] forced-colors:focus:outline-solid forced-colors:focus:outline-1 forced-colors:focus:outline-[Highlight]";
+        readonly closeIcon: "size-4 fill-current";
+        /** El `decorator` de Vuno: un `AILabel` en línea dentro de la tag. */
+        readonly decorator: "ms-px inline-flex h-4 shrink-0 items-center justify-center text-current";
+        readonly icon: "me-1 size-4 shrink-0 fill-current";
+        readonly root: "inline-flex max-w-52 min-w-8 cursor-default items-center justify-center rounded-2xl border-0 bg-(--vuno-tag-background) align-middle text-xs leading-4 font-normal tracking-[0.32px] wrap-break-word text-(--vuno-tag-color) [--vuno-tag-focus:var(--vuno-focus)] forced-colors:[outline:1px_solid_transparent]";
+        /** El truncado necesita `min-w-0`: sin él una caja flexible no baja de su contenido. */
+        readonly text: "block min-w-0 truncate";
+    };
+    readonly variants: {
+        readonly disabled: {
+            readonly false: {};
+            readonly true: {};
+        };
+        readonly kind: {
+            readonly dismissible: {};
+            readonly operational: {
+                readonly root: "cursor-pointer border border-(--vuno-tag-border) hover:bg-(--vuno-tag-hover) focus:outline-solid focus:outline-2 focus:outline-offset-1 focus:outline-(--vuno-focus)";
+            };
+            readonly readonly: {};
+            /** El interruptor no usa los colores de tag: Vuno le da los de capa. */
+            readonly selectable: {
+                readonly root: "cursor-pointer border border-(--vuno-border-inverse) bg-(--vuno-layer-01) text-(--vuno-text-primary) hover:bg-(--vuno-layer-hover-01) focus:outline-solid focus:outline-2 focus:outline-offset-1 focus:outline-(--vuno-focus)";
+            };
+        };
+        readonly selected: {
+            readonly false: {};
+            readonly true: {};
+        };
+        readonly size: {
+            readonly sm: {
+                readonly close: "ms-[5px] size-[18px]";
+                readonly root: "min-h-[18px] px-2";
+            };
+            readonly md: {
+                readonly close: "ms-[2px] size-6";
+                readonly root: "min-h-6 px-2";
+            };
+            readonly lg: {
+                readonly close: "ms-[2px] size-8";
+                readonly root: "min-h-8 px-3";
+            };
+        };
+        readonly type: {
+            readonly blue: {
+                readonly root: "[--vuno-tag-background:var(--vuno-tag-background-blue)] [--vuno-tag-border:var(--vuno-tag-border-blue)] [--vuno-tag-color:var(--vuno-tag-color-blue)] [--vuno-tag-hover:var(--vuno-tag-hover-blue)]";
+            };
+            readonly 'cool-gray': {
+                readonly root: "[--vuno-tag-background:var(--vuno-tag-background-cool-gray)] [--vuno-tag-border:var(--vuno-tag-border-cool-gray)] [--vuno-tag-color:var(--vuno-tag-color-cool-gray)] [--vuno-tag-hover:var(--vuno-tag-hover-cool-gray)]";
+            };
+            readonly cyan: {
+                readonly root: "[--vuno-tag-background:var(--vuno-tag-background-cyan)] [--vuno-tag-border:var(--vuno-tag-border-cyan)] [--vuno-tag-color:var(--vuno-tag-color-cyan)] [--vuno-tag-hover:var(--vuno-tag-hover-cyan)]";
+            };
+            readonly gray: {
+                readonly root: "[--vuno-tag-background:var(--vuno-tag-background-gray)] [--vuno-tag-border:var(--vuno-tag-border-gray)] [--vuno-tag-color:var(--vuno-tag-color-gray)] [--vuno-tag-hover:var(--vuno-tag-hover-gray)]";
+            };
+            readonly green: {
+                readonly root: "[--vuno-tag-background:var(--vuno-tag-background-green)] [--vuno-tag-border:var(--vuno-tag-border-green)] [--vuno-tag-color:var(--vuno-tag-color-green)] [--vuno-tag-hover:var(--vuno-tag-hover-green)]";
+            };
+            readonly 'high-contrast': {
+                readonly root: "[--vuno-tag-background:var(--vuno-background-inverse)] [--vuno-tag-color:var(--vuno-text-inverse)] [--vuno-tag-focus:var(--vuno-focus-inverse)] [--vuno-tag-hover:var(--vuno-background-inverse-hover)]";
+            };
+            readonly magenta: {
+                readonly root: "[--vuno-tag-background:var(--vuno-tag-background-magenta)] [--vuno-tag-border:var(--vuno-tag-border-magenta)] [--vuno-tag-color:var(--vuno-tag-color-magenta)] [--vuno-tag-hover:var(--vuno-tag-hover-magenta)]";
+            };
+            readonly outline: {
+                readonly root: "shadow-[inset_0_0_0_1px_var(--vuno-background-inverse)] [--vuno-tag-background:var(--vuno-background)] [--vuno-tag-color:var(--vuno-text-primary)] [--vuno-tag-hover:var(--vuno-layer-hover-01)]";
+            };
+            readonly purple: {
+                readonly root: "[--vuno-tag-background:var(--vuno-tag-background-purple)] [--vuno-tag-border:var(--vuno-tag-border-purple)] [--vuno-tag-color:var(--vuno-tag-color-purple)] [--vuno-tag-hover:var(--vuno-tag-hover-purple)]";
+            };
+            readonly red: {
+                readonly root: "[--vuno-tag-background:var(--vuno-tag-background-red)] [--vuno-tag-border:var(--vuno-tag-border-red)] [--vuno-tag-color:var(--vuno-tag-color-red)] [--vuno-tag-hover:var(--vuno-tag-hover-red)]";
+            };
+            readonly teal: {
+                readonly root: "[--vuno-tag-background:var(--vuno-tag-background-teal)] [--vuno-tag-border:var(--vuno-tag-border-teal)] [--vuno-tag-color:var(--vuno-tag-color-teal)] [--vuno-tag-hover:var(--vuno-tag-hover-teal)]";
+            };
+            readonly 'warm-gray': {
+                readonly root: "[--vuno-tag-background:var(--vuno-tag-background-warm-gray)] [--vuno-tag-border:var(--vuno-tag-border-warm-gray)] [--vuno-tag-color:var(--vuno-tag-color-warm-gray)] [--vuno-tag-hover:var(--vuno-tag-hover-warm-gray)]";
+            };
+        };
+        readonly withIcon: {
+            readonly false: {};
+            readonly true: {};
+        };
+    };
+}>;

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

@@ -0,0 +1,78 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const tagTheme = defineTheme("tag", {
+  compoundVariants: [
+    /* El interruptor marcado invierte la capa, y el hover no lo deshace. */
+    { class: { root: "bg-(--vuno-layer-selected-inverse) text-(--vuno-text-inverse) hover:bg-(--vuno-layer-selected-inverse)" }, kind: "selectable", selected: "true" },
+    /*
+     * El botón de cierre se come el relleno final y el vertical. En `lg` el
+     * inicial se queda en 12 px, así que solo se anula el del otro lado.
+     */
+    { class: { root: "py-0 pe-0" }, kind: "dismissible" },
+    /* Con icono el relleno inicial se recorta: el icono ya separa 4 px del texto. */
+    { class: { root: "ps-1" }, size: "md", withIcon: "true" },
+    { class: { root: "ps-2" }, size: "lg", withIcon: "true" },
+    /*
+     * `outline` dibuja su contorno con una sombra interior y no con `border`,
+     * para que no ocupe caja y la tag conserve su altura. El botón de cierre
+     * se separa un píxel de esa línea recortando su fondo al contenido.
+     */
+    { class: { close: "box-border bg-clip-content p-px" }, kind: "dismissible", type: "outline" },
+    /* Desde aquí, lo deshabilitado. Va al final para ganar al color y al borde. */
+    { class: { close: "cursor-not-allowed hover:bg-transparent", closeIcon: "fill-(--vuno-icon-disabled)", root: "bg-(--vuno-layer-01) text-(--vuno-text-disabled) shadow-none outline-none" }, disabled: "true" },
+    /* El cursor lo cambia la tag entera salvo en `dismissible`, donde solo el cierre está vivo. */
+    { class: { root: "cursor-not-allowed" }, disabled: "true", kind: "readonly" },
+    { class: { root: "cursor-not-allowed border-(--vuno-border-disabled) hover:bg-(--vuno-layer-01)" }, disabled: "true", kind: "operational" },
+    { class: { root: "cursor-not-allowed border-(--vuno-border-disabled) hover:bg-(--vuno-layer-01)" }, disabled: "true", kind: "selectable" }
+  ],
+  slots: {
+    close: "flex shrink-0 cursor-pointer items-center justify-center rounded-full border-0 bg-transparent p-0 text-current transition-[background-color,box-shadow] duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) hover:bg-(--vuno-tag-hover) focus:z-[99999] focus:shadow-[inset_0_0_0_1px_var(--vuno-tag-focus)] focus:outline-none motion-reduce:transition-none forced-colors:focus:text-[Highlight] forced-colors:focus:outline-solid forced-colors:focus:outline-1 forced-colors:focus:outline-[Highlight]",
+    closeIcon: "size-4 fill-current",
+    /** El `decorator` de Vuno: un `AILabel` en línea dentro de la tag. */
+    decorator: "ms-px inline-flex h-4 shrink-0 items-center justify-center text-current",
+    icon: "me-1 size-4 shrink-0 fill-current",
+    root: "inline-flex max-w-52 min-w-8 cursor-default items-center justify-center rounded-2xl border-0 bg-(--vuno-tag-background) align-middle text-xs leading-4 font-normal tracking-[0.32px] wrap-break-word text-(--vuno-tag-color) [--vuno-tag-focus:var(--vuno-focus)] forced-colors:[outline:1px_solid_transparent]",
+    /** El truncado necesita `min-w-0`: sin él una caja flexible no baja de su contenido. */
+    text: "block min-w-0 truncate"
+  },
+  variants: {
+    disabled: {
+      false: {},
+      true: {}
+    },
+    kind: {
+      dismissible: {},
+      operational: { root: "cursor-pointer border border-(--vuno-tag-border) hover:bg-(--vuno-tag-hover) focus:outline-solid focus:outline-2 focus:outline-offset-1 focus:outline-(--vuno-focus)" },
+      readonly: {},
+      /** El interruptor no usa los colores de tag: Vuno le da los de capa. */
+      selectable: { root: "cursor-pointer border border-(--vuno-border-inverse) bg-(--vuno-layer-01) text-(--vuno-text-primary) hover:bg-(--vuno-layer-hover-01) focus:outline-solid focus:outline-2 focus:outline-offset-1 focus:outline-(--vuno-focus)" }
+    },
+    selected: {
+      false: {},
+      true: {}
+    },
+    size: {
+      sm: { close: "ms-[5px] size-[18px]", root: "min-h-[18px] px-2" },
+      md: { close: "ms-[2px] size-6", root: "min-h-6 px-2" },
+      lg: { close: "ms-[2px] size-8", root: "min-h-8 px-3" }
+    },
+    type: {
+      blue: { root: "[--vuno-tag-background:var(--vuno-tag-background-blue)] [--vuno-tag-border:var(--vuno-tag-border-blue)] [--vuno-tag-color:var(--vuno-tag-color-blue)] [--vuno-tag-hover:var(--vuno-tag-hover-blue)]" },
+      "cool-gray": { root: "[--vuno-tag-background:var(--vuno-tag-background-cool-gray)] [--vuno-tag-border:var(--vuno-tag-border-cool-gray)] [--vuno-tag-color:var(--vuno-tag-color-cool-gray)] [--vuno-tag-hover:var(--vuno-tag-hover-cool-gray)]" },
+      cyan: { root: "[--vuno-tag-background:var(--vuno-tag-background-cyan)] [--vuno-tag-border:var(--vuno-tag-border-cyan)] [--vuno-tag-color:var(--vuno-tag-color-cyan)] [--vuno-tag-hover:var(--vuno-tag-hover-cyan)]" },
+      gray: { root: "[--vuno-tag-background:var(--vuno-tag-background-gray)] [--vuno-tag-border:var(--vuno-tag-border-gray)] [--vuno-tag-color:var(--vuno-tag-color-gray)] [--vuno-tag-hover:var(--vuno-tag-hover-gray)]" },
+      green: { root: "[--vuno-tag-background:var(--vuno-tag-background-green)] [--vuno-tag-border:var(--vuno-tag-border-green)] [--vuno-tag-color:var(--vuno-tag-color-green)] [--vuno-tag-hover:var(--vuno-tag-hover-green)]" },
+      /* Sin borde ni hover de tag propios: por eso no es un color operacional. */
+      "high-contrast": { root: "[--vuno-tag-background:var(--vuno-background-inverse)] [--vuno-tag-color:var(--vuno-text-inverse)] [--vuno-tag-focus:var(--vuno-focus-inverse)] [--vuno-tag-hover:var(--vuno-background-inverse-hover)]" },
+      magenta: { root: "[--vuno-tag-background:var(--vuno-tag-background-magenta)] [--vuno-tag-border:var(--vuno-tag-border-magenta)] [--vuno-tag-color:var(--vuno-tag-color-magenta)] [--vuno-tag-hover:var(--vuno-tag-hover-magenta)]" },
+      outline: { root: "shadow-[inset_0_0_0_1px_var(--vuno-background-inverse)] [--vuno-tag-background:var(--vuno-background)] [--vuno-tag-color:var(--vuno-text-primary)] [--vuno-tag-hover:var(--vuno-layer-hover-01)]" },
+      purple: { root: "[--vuno-tag-background:var(--vuno-tag-background-purple)] [--vuno-tag-border:var(--vuno-tag-border-purple)] [--vuno-tag-color:var(--vuno-tag-color-purple)] [--vuno-tag-hover:var(--vuno-tag-hover-purple)]" },
+      red: { root: "[--vuno-tag-background:var(--vuno-tag-background-red)] [--vuno-tag-border:var(--vuno-tag-border-red)] [--vuno-tag-color:var(--vuno-tag-color-red)] [--vuno-tag-hover:var(--vuno-tag-hover-red)]" },
+      teal: { root: "[--vuno-tag-background:var(--vuno-tag-background-teal)] [--vuno-tag-border:var(--vuno-tag-border-teal)] [--vuno-tag-color:var(--vuno-tag-color-teal)] [--vuno-tag-hover:var(--vuno-tag-hover-teal)]" },
+      "warm-gray": { root: "[--vuno-tag-background:var(--vuno-tag-background-warm-gray)] [--vuno-tag-border:var(--vuno-tag-border-warm-gray)] [--vuno-tag-color:var(--vuno-tag-color-warm-gray)] [--vuno-tag-hover:var(--vuno-tag-hover-warm-gray)]" }
+    },
+    withIcon: {
+      false: {},
+      true: {}
+    }
+  }
+});

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

@@ -0,0 +1,65 @@
+import type { ComponentUi } from '#vuno/types/slots';
+import type { TooltipSide } from '#vuno/components/Tooltip/Tooltip.types';
+/**
+ * Las cuatro tags de Vuno. React las publica como cuatro componentes
+ * —`Tag`, `DismissibleTag`, `SelectableTag` y `OperationalTag`— porque cada uno
+ * cierra su propio contrato de props; aquí es una dimensión de un solo
+ * componente porque comparten anatomía, tamaños, colores y tema, y separarlas
+ * obligaría a repetir cuatro veces la misma geometría.
+ *
+ * - `readonly`: metadato. No es interactiva y no recibe foco. Vuno convierte
+ *   en botón una `Tag` con `onClick`; aquí eso es `operational`, que además trae
+ *   el borde y el hover que Vuno le da a una tag que se pulsa.
+ * - `dismissible`: metadato que se puede quitar. Solo el botón de cierre es interactivo.
+ * - `selectable`: interruptor. Se anuncia con `aria-pressed` e ignora `type`.
+ * - `operational`: acción. Es un botón y admite los diez colores, no los doce.
+ */
+export type TagKind = 'dismissible' | 'operational' | 'readonly' | 'selectable';
+export type TagSize = 'lg' | 'md' | 'sm';
+export type TagType = 'blue' | 'cool-gray' | 'cyan' | 'gray' | 'green' | 'high-contrast' | 'magenta' | 'outline' | 'purple' | 'red' | 'teal' | 'warm-gray';
+/**
+ * Los diez colores de una tag operacional.
+ *
+ * `high-contrast` y `outline` quedan fuera porque Vuno los excluye en la hoja
+ * de estilos —`.vuno--tag--high-contrast:not(.vuno--tag--operational)`— y no
+ * porque falte implementarlos: una tag operacional necesita borde y color de
+ * hover propios, y esos dos no los tienen.
+ */
+export type TagOperationalType = Exclude<TagType, 'high-contrast' | 'outline'>;
+export type TagProps = {
+    disabled?: boolean;
+    /** Lado del aviso del botón de cierre. Vuno lo llama `dismissTooltipAlignment`. */
+    dismissAlign?: TooltipSide;
+    /**
+     * Nombre accesible y aviso del botón de cierre. El sistema de origen lo llama `title`, un
+     * nombre que aquí ya ocupa el texto heredado de la tag.
+     *
+     * Por defecto compone `messages.close` con el texto de la tag —«Cerrar
+     * Vuno»— y no solo «Cerrar»: diez tags de filtro con el mismo nombre
+     * accesible se anuncian igual y no hay forma de saber cuál se quita. Es la
+     * misma decisión que en el botón de quitar un archivo.
+     */
+    dismissLabel?: string;
+    /**
+     * Icono anterior al texto. Vuno lo llama `renderIcon` y **no lo dibuja en
+     * el tamaño `sm`**: en 18 px no cabe un icono de 16 con su separación.
+     */
+    icon?: string;
+    kind?: TagKind;
+    /** Estado del interruptor cuando `kind` es `selectable`. */
+    selected?: boolean;
+    size?: TagSize;
+    /** Atributo `title` del texto, para cuando el truncado esconde parte. Por defecto, el propio texto. */
+    tagTitle?: string;
+    /** Texto de la tag. El slot por defecto lo sustituye cuando trae contenido propio. */
+    text?: string;
+    /**
+     * @deprecated Es el `title` que Vuno ya dio por obsoleto: en Vuno actual
+     * `title` nombra el botón de cierre. Usa `text` o el slot por defecto; esta
+     * prop desaparecerá en la próxima mayor.
+     */
+    title?: string;
+    /** Color de la tag. En `operational` solo valen los diez de `TagOperationalType`. */
+    type?: TagType;
+    ui?: ComponentUi<'tag'>;
+};

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