@groupteknology/vuno 2.0.0 → 4.0.0

package/dist/runtime/app/components/Dropdown/useDropdownState.js

@@ -0,0 +1,182 @@
+import { computed, nextTick, ref } from "vue";
+import { fromOptionKey, toOptionKey } from "./option.js";
+const TYPEAHEAD_TIMEOUT = 500;
+export function useDropdownState(options) {
+  const open = ref(false);
+  const query = ref("");
+  const highlighted = ref(-1);
+  const locked = () => options.disabled() || options.readonly();
+  let typed = "";
+  let typedAt = 0;
+  const selectedKeys = computed(() => {
+    if (options.multiple()) return (Array.isArray(options.model.value) ? options.model.value : []).map(toOptionKey);
+    return options.model.value === void 0 ? [] : [toOptionKey(options.model.value)];
+  });
+  const isSelected = (item) => selectedKeys.value.includes(toOptionKey(item.value));
+  const displayValue = computed(() => {
+    const labelByKey = new Map(options.items().map((item) => [toOptionKey(item.value), item.label]));
+    return selectedKeys.value.map((key) => labelByKey.get(key) ?? fromOptionKey(key)).filter((label) => label !== "").join(", ");
+  });
+  const text = computed(() => open.value && options.searchable() ? query.value : displayValue.value);
+  const visibleItems = computed(() => {
+    if (!options.searchable() || query.value.trim() === "") return options.items();
+    const needle = normalize(query.value);
+    return options.items().filter((item) => normalize(item.label).includes(needle));
+  });
+  const selectableIndexes = computed(() => visibleItems.value.map((item, index) => item.disabled ? -1 : index).filter((index) => index >= 0));
+  const activeKey = computed(() => {
+    const item = visibleItems.value[highlighted.value];
+    return item ? toOptionKey(item.value) : void 0;
+  });
+  function scrollHighlightIntoView() {
+    void nextTick(() => {
+      const key = activeKey.value;
+      if (!key) return;
+      options.list()?.querySelector(`#${CSS.escape(options.optionId(key))}`)?.scrollIntoView({ block: "nearest" });
+    });
+  }
+  function moveHighlight(step) {
+    const candidates = selectableIndexes.value;
+    if (candidates.length === 0) return;
+    const current = candidates.indexOf(highlighted.value);
+    const entry = step === 1 ? 0 : candidates.length - 1;
+    const next = current === -1 ? entry : (current + step + candidates.length) % candidates.length;
+    highlighted.value = candidates[next] ?? -1;
+    scrollHighlightIntoView();
+  }
+  function highlightEdge(edge) {
+    const candidates = selectableIndexes.value;
+    highlighted.value = (edge === "first" ? candidates[0] : candidates[candidates.length - 1]) ?? -1;
+    scrollHighlightIntoView();
+  }
+  function close(refocus = false) {
+    if (!open.value) return;
+    open.value = false;
+    query.value = "";
+    highlighted.value = -1;
+    if (refocus) options.field()?.focus();
+  }
+  function choose(item) {
+    if (item.disabled) return;
+    if (!options.multiple()) {
+      options.model.value = item.value;
+      close();
+      return;
+    }
+    const key = toOptionKey(item.value);
+    const current = Array.isArray(options.model.value) ? options.model.value : [];
+    options.model.value = current.some((value) => toOptionKey(value) === key) ? current.filter((value) => toOptionKey(value) !== key) : [...current, item.value];
+  }
+  function openList(edge) {
+    if (locked() || open.value) return;
+    open.value = true;
+    query.value = "";
+    const selected = visibleItems.value.findIndex((item) => isSelected(item) && !item.disabled);
+    if (selected >= 0) highlighted.value = selected;
+    else if (edge) highlightEdge(edge);
+    else highlighted.value = -1;
+    void nextTick(scrollHighlightIntoView);
+  }
+  function toggle() {
+    if (open.value) close(true);
+    else {
+      options.field()?.focus();
+      openList();
+    }
+  }
+  function commitHighlighted() {
+    const item = visibleItems.value[highlighted.value];
+    if (item) choose(item);
+    else close(true);
+  }
+  function onNavigationKey(event) {
+    switch (event.key) {
+      /*
+       * `Alt` separa abrir de recorrer, que es lo que pide el patrón de
+       * combobox de la APG: `Alt+Abajo` despliega sin mover la opción
+       * activa y `Alt+Arriba` acepta la activa y cierra. Sin esa
+       * distinción, desplegar solo para mirar la lista ya cambia la
+       * opción que se anuncia como activa.
+       */
+      case "ArrowDown":
+        event.preventDefault();
+        if (!open.value) openList(event.altKey ? void 0 : "first");
+        else if (!event.altKey) moveHighlight(1);
+        return true;
+      case "ArrowUp":
+        event.preventDefault();
+        if (!open.value) openList(event.altKey ? void 0 : "last");
+        else if (event.altKey) commitHighlighted();
+        else moveHighlight(-1);
+        return true;
+      case "End":
+      case "Home":
+        if (!open.value) return true;
+        event.preventDefault();
+        highlightEdge(event.key === "Home" ? "first" : "last");
+        return true;
+      default:
+        return false;
+    }
+  }
+  function onTypeahead(event) {
+    if (options.searchable()) return false;
+    if (event.altKey || event.ctrlKey || event.metaKey) return false;
+    if (event.key.length !== 1) return false;
+    const now = Date.now();
+    const active = typed !== "" && now - typedAt <= TYPEAHEAD_TIMEOUT;
+    if (event.key === " " && !active) return false;
+    event.preventDefault();
+    typed = active ? typed + event.key : event.key;
+    typedAt = now;
+    const needle = normalize(typed);
+    const match = visibleItems.value.findIndex((item2) => !item2.disabled && normalize(item2.label).startsWith(needle));
+    const item = visibleItems.value[match];
+    if (!item) return true;
+    if (!open.value && !options.multiple()) {
+      choose(item);
+      return true;
+    }
+    openList();
+    highlighted.value = match;
+    scrollHighlightIntoView();
+    return true;
+  }
+  function onCommitKey(event) {
+    if (event.key === " " && options.searchable()) return false;
+    if (event.key !== "Enter" && event.key !== " ") return false;
+    if (!open.value) {
+      event.preventDefault();
+      openList();
+      return true;
+    }
+    const item = visibleItems.value[highlighted.value];
+    if (!item && event.key === " ") return true;
+    event.preventDefault();
+    commitHighlighted();
+    return true;
+  }
+  function onKeydown(event) {
+    if (locked()) return;
+    if (onNavigationKey(event)) return;
+    if (onTypeahead(event)) return;
+    if (onCommitKey(event)) return;
+    if (event.key === "Escape") {
+      if (!open.value) return;
+      event.preventDefault();
+      close(true);
+      return;
+    }
+    if (event.key === "Tab") close();
+  }
+  function onInput(event) {
+    if (!options.searchable()) return;
+    query.value = event.target.value;
+    highlighted.value = selectableIndexes.value[0] ?? -1;
+    if (!open.value) open.value = true;
+  }
+  return { onInput, onKeydown, activeKey, choose, close, displayValue, highlighted, isSelected, open, openList, query, text, toggle, visibleItems };
+}
+function normalize(value) {
+  return value.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
+}

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

@@ -0,0 +1,31 @@
+import type { ExpandableTileProps } from './ExpandableTile.types.js';
+type __VLS_Props = ExpandableTileProps;
+type __VLS_Slots = {
+    aboveTheFold?: () => unknown;
+    belowTheFold?: () => unknown;
+};
+type __VLS_ModelProps = {
+    'expanded'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:expanded": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:expanded"?: ((value: boolean) => any) | undefined;
+}>, {
+    disabled: boolean;
+    ui: import("../../types/slots.js").ComponentUi<"tile">;
+    tileCollapsedIconText: string;
+    tileCollapsedLabel: string;
+    tileExpandedIconText: string;
+    tileExpandedLabel: string;
+    withInteractive: boolean;
+}, {}, {}, {}, 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/ExpandableTile/ExpandableTile.types.d.ts

@@ -0,0 +1,27 @@
+import type { ComponentUi } from '#vuno/types/slots';
+export type ExpandableTileProps = {
+    disabled?: boolean;
+    /**
+     * Texto del chevron mientras la tile está plegada. Es el nombre accesible
+     * del botón, no una etiqueta visible.
+     */
+    tileCollapsedIconText?: string;
+    /** Rótulo visible junto al chevron mientras la tile está plegada, del estilo «Ver más». */
+    tileCollapsedLabel?: string;
+    tileExpandedIconText?: string;
+    tileExpandedLabel?: string;
+    ui?: ComponentUi<'tile'>;
+    /**
+     * Declara que los pliegues llevan enlaces, botones u otros controles.
+     *
+     * Cambia quién es el control: sin contenido interactivo la tile entera es
+     * el botón que pliega y despliega, y con él lo es únicamente el chevron,
+     * que es lo que el sistema de origen describe como «expandable with interactive».
+     *
+     * Allí se deduce inspeccionando el DOM tras montar. Aquí se declara
+     * porque esa deducción cambia el elemento raíz —de `button` a `div`— y
+     * hacerlo en cliente rompe la hidratación y deja el servidor pintando una
+     * semántica distinta de la final.
+     */
+    withInteractive?: boolean;
+};

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

@@ -0,0 +1,103 @@
+<script setup>
+import { computed, useId } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import Icon from "#vuno/primitives/PrimitiveIcon/PrimitiveIcon.vue";
+defineOptions({ name: "ExpandableTile" });
+const expanded = defineModel("expanded", { type: Boolean, ...{ default: false } });
+const props = defineProps({
+  disabled: { type: Boolean, required: false, default: false },
+  tileCollapsedIconText: { type: String, required: false, default: "Expandir" },
+  tileCollapsedLabel: { type: String, required: false, default: void 0 },
+  tileExpandedIconText: { type: String, required: false, default: "Contraer" },
+  tileExpandedLabel: { type: String, required: false, default: void 0 },
+  ui: { type: Object, required: false, default: void 0 },
+  withInteractive: { type: Boolean, required: false, default: false }
+});
+defineSlots();
+const panelId = useId();
+const iconText = computed(() => expanded.value ? props.tileExpandedIconText : props.tileCollapsedIconText);
+const chevronLabel = computed(() => expanded.value ? props.tileExpandedLabel : props.tileCollapsedLabel);
+const ui = useTheme(
+  "tile",
+  () => props.ui,
+  () => ({
+    disabled: String(props.disabled),
+    expanded: String(expanded.value),
+    interactive: String(!props.withInteractive),
+    variant: "expandable"
+  })
+);
+function toggle() {
+  expanded.value = !expanded.value;
+}
+</script>
+
+<template>
+    <div
+        v-if="props.withInteractive"
+        :class="ui.root"
+    >
+        <slot name="aboveTheFold" />
+
+        <button
+            :aria-controls="panelId"
+            :aria-expanded="expanded"
+            :aria-label="chevronLabel ? void 0 : iconText"
+            :class="ui.chevron"
+            :disabled="props.disabled"
+            type="button"
+            @click="toggle"
+        >
+            <span
+                v-if="chevronLabel"
+                :class="ui.chevronLabel"
+            >
+                {{ chevronLabel }}
+            </span>
+            <Icon
+                :class="ui.chevronIcon"
+                name="carbon:chevron-down"
+            />
+        </button>
+
+        <div
+            :id="panelId"
+            :class="ui.panel"
+        >
+            <slot name="belowTheFold" />
+        </div>
+    </div>
+
+    <button
+        v-else
+        :aria-controls="panelId"
+        :aria-expanded="expanded"
+        :class="ui.root"
+        :disabled="props.disabled"
+        :title="iconText"
+        type="button"
+        @click="toggle"
+    >
+        <slot name="aboveTheFold" />
+
+        <span :class="ui.chevron">
+            <span
+                v-if="chevronLabel"
+                :class="ui.chevronLabel"
+            >
+                {{ chevronLabel }}
+            </span>
+            <Icon
+                :class="ui.chevronIcon"
+                name="carbon:chevron-down"
+            />
+        </span>
+
+        <div
+            :id="panelId"
+            :class="ui.panel"
+        >
+            <slot name="belowTheFold" />
+        </div>
+    </button>
+</template>

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

@@ -0,0 +1,31 @@
+import type { ExpandableTileProps } from './ExpandableTile.types.js';
+type __VLS_Props = ExpandableTileProps;
+type __VLS_Slots = {
+    aboveTheFold?: () => unknown;
+    belowTheFold?: () => unknown;
+};
+type __VLS_ModelProps = {
+    'expanded'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:expanded": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:expanded"?: ((value: boolean) => any) | undefined;
+}>, {
+    disabled: boolean;
+    ui: import("../../types/slots.js").ComponentUi<"tile">;
+    tileCollapsedIconText: string;
+    tileCollapsedLabel: string;
+    tileExpandedIconText: string;
+    tileExpandedLabel: string;
+    withInteractive: boolean;
+}, {}, {}, {}, 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/FileUploader/FileUploader.d.vue.ts

@@ -0,0 +1,35 @@
+import type { FileUploaderFile, FileUploaderProps } from './FileUploader.types.js';
+type __VLS_Props = FileUploaderProps;
+declare function clearFiles(): void;
+type __VLS_ModelProps = {
+    modelValue?: FileUploaderFile[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    clearFiles: typeof clearFiles;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    delete: (file: FileUploaderFile) => any;
+    "update:modelValue": (value: FileUploaderFile[]) => any;
+    addFiles: (files: File[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onDelete?: ((file: FileUploaderFile) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: FileUploaderFile[]) => any) | undefined;
+    onAddFiles?: ((files: File[]) => any) | undefined;
+}>, {
+    size: import("../../types/control.js").ControlSize;
+    name: string;
+    variant: import("./FileUploader.types.js").FileUploaderVariant;
+    pattern: string;
+    id: string;
+    ui: import("../../types/slots.js").ComponentUi<"fileUploader">;
+    iconDescription: string;
+    accept: string | string[];
+    buttonKind: import("../Button/Button.types.js").ButtonKind;
+    buttonLabel: string;
+    filenameStatus: import("./FileUploader.types.js").FileUploaderStatus;
+    labelDescription: string;
+    labelTitle: string;
+    maxFileSize: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,109 @@
+/**
+ * La subida de archivos de Vuno: encabezado, descripción, disparador y la
+ * lista de lo seleccionado.
+ *
+ * Las dos variantes comparten todo menos el disparador —un botón o un recuadro
+ * de rayas— y la separación de la lista, que Vuno fija en 16 px tras el botón
+ * y en 8 px tras la zona de caída.
+ *
+ * La fila de archivo es una rejilla de dos columnas y no una fila flexible: el
+ * mensaje de error ocupa las dos, y con `flex` habría que envolverlo en otra
+ * caja para que bajara. Así el error es un hijo más que declara `col-span-full`.
+ *
+ * El alto mínimo de la fila iguala el del botón en cada tamaño —32, 40 y 48 px—
+ * porque Vuno lo pide explícitamente: un archivo más bajo que su botón parte
+ * la columna que forman los dos.
+ */
+export declare const fileUploaderTheme: Record<"fileUploader", {
+    readonly compoundVariants: [{
+        readonly class: {
+            readonly error: "pt-4";
+            readonly item: "py-3";
+        };
+        readonly invalid: "true";
+        readonly size: "lg";
+    }, {
+        readonly class: {
+            readonly error: "pt-[11px]";
+            readonly item: "py-2";
+        };
+        readonly invalid: "true";
+        readonly size: "md";
+    }, {
+        readonly class: {
+            readonly error: "pt-[7px]";
+            readonly item: "py-1";
+        };
+        readonly invalid: "true";
+        readonly size: "sm";
+    }];
+    readonly slots: {
+        readonly name: "ms-4 overflow-hidden text-sm leading-[1.125rem] tracking-[0.16px] text-ellipsis whitespace-nowrap text-(--vuno-text-primary)";
+        readonly complete: "size-4 text-(--vuno-interactive)";
+        readonly container: "flex w-full max-w-80 flex-col gap-2";
+        readonly description: "mb-4 text-sm leading-[1.125rem] tracking-[0.16px] text-(--vuno-text-secondary)";
+        /**
+         * El recuadro de rayas: 96 px de alto y el texto en color de enlace.
+         *
+         * Al pulsar, el texto baja a primario y se subraya: es la confirmación
+         * de la pulsación que pide Vuno, y sin ella mantener el botón apretado
+         * no devuelve ninguna señal.
+         */
+        readonly dropzone: "flex h-24 w-full max-w-80 cursor-pointer items-start justify-between overflow-hidden border border-dashed border-(--vuno-border-strong-01) p-4 text-start text-sm leading-[1.125rem] tracking-[0.16px] text-(--vuno-link-primary) outline-solid outline-2 -outline-offset-2 outline-transparent transition-[outline-color] duration-(--vuno-duration-fast-02) ease-(--vuno-easing-standard-productive) hover:underline hover:outline-(--vuno-focus) focus:underline focus:outline-(--vuno-focus) active:text-(--vuno-text-primary) active:underline motion-reduce:transition-none";
+        readonly dropzoneDragOver: "outline-(--vuno-focus)";
+        readonly dropzoneRoot: "w-full";
+        readonly error: "col-span-full block border-t border-(--vuno-border-subtle-00) px-4";
+        readonly errorBody: "text-xs leading-4 tracking-[0.32px] text-(--vuno-text-primary)";
+        readonly errorTitle: "text-xs leading-4 tracking-[0.32px] text-(--vuno-text-error)";
+        readonly invalidIcon: "me-2 size-4 shrink-0 text-(--vuno-support-error)";
+        readonly item: "grid w-full max-w-80 grid-cols-[1fr_auto] items-center bg-(--vuno-field-01) break-words forced-colors:outline-solid forced-colors:outline-1 forced-colors:outline-transparent";
+        readonly label: "mb-2 text-sm leading-[1.125rem] font-semibold tracking-[0.16px] text-(--vuno-text-primary)";
+        readonly loading: "flex h-4 w-6 items-center justify-center p-1";
+        readonly loadingIcon: "size-4 text-(--vuno-icon-primary)";
+        /**
+         * La «x» es un botón de 24 px sin relleno, no un `Button` de Vuno: el
+         * más pequeño de aquellos mide 32 y rompería el alto de la fila menor.
+         */
+        readonly remove: "flex size-6 cursor-pointer items-center justify-center border-0 bg-transparent p-0 text-(--vuno-icon-primary) outline-solid outline-2 -outline-offset-2 outline-transparent focus:outline-(--vuno-focus) disabled:cursor-not-allowed disabled:text-(--vuno-icon-disabled)";
+        readonly removeIcon: "size-4";
+        readonly root: "flex w-full flex-col items-start";
+        readonly state: "flex min-w-6 items-center justify-center pe-3";
+    };
+    readonly variants: {
+        readonly disabled: {
+            readonly false: {};
+            readonly true: {
+                readonly name: "text-(--vuno-text-disabled)";
+                readonly description: "text-(--vuno-text-disabled)";
+                readonly dropzone: "cursor-no-drop border-(--vuno-button-disabled) text-(--vuno-text-disabled) hover:no-underline hover:outline-transparent";
+                readonly item: "cursor-not-allowed text-(--vuno-text-disabled)";
+                readonly label: "text-(--vuno-text-disabled)";
+            };
+        };
+        readonly invalid: {
+            readonly false: {};
+            readonly true: {
+                readonly item: "outline-solid outline-2 -outline-offset-2 outline-(--vuno-support-error)";
+            };
+        };
+        readonly size: {
+            readonly sm: {
+                readonly item: "min-h-8 gap-y-1";
+            };
+            readonly md: {
+                readonly item: "min-h-10 gap-y-2";
+            };
+            readonly lg: {
+                readonly item: "min-h-12 gap-y-3";
+            };
+        };
+        readonly variant: {
+            readonly button: {
+                readonly container: "mt-4";
+            };
+            readonly dropContainer: {
+                readonly container: "mt-2";
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,87 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const fileUploaderTheme = defineTheme("fileUploader", {
+  compoundVariants: [
+    /*
+     * El recuadro de error no cabe dentro del alto mínimo, así que la fila
+     * inválida crece con relleno vertical. Vuno lo escala con el tamaño, y
+     * los valores impares del separador son los suyos: 7 y 11 px salen de
+     * restar el borde de 1 px al espacio de 8 y 12.
+     */
+    { class: { error: "pt-4", item: "py-3" }, invalid: "true", size: "lg" },
+    { class: { error: "pt-[11px]", item: "py-2" }, invalid: "true", size: "md" },
+    { class: { error: "pt-[7px]", item: "py-1" }, invalid: "true", size: "sm" }
+  ],
+  slots: {
+    name: "ms-4 overflow-hidden text-sm leading-[1.125rem] tracking-[0.16px] text-ellipsis whitespace-nowrap text-(--vuno-text-primary)",
+    /* La marca de completado mide 16 px, como el aviso de inválido y la «x». */
+    complete: "size-4 text-(--vuno-interactive)",
+    container: "flex w-full max-w-80 flex-col gap-2",
+    description: "mb-4 text-sm leading-[1.125rem] tracking-[0.16px] text-(--vuno-text-secondary)",
+    /**
+     * El recuadro de rayas: 96 px de alto y el texto en color de enlace.
+     *
+     * Al pulsar, el texto baja a primario y se subraya: es la confirmación
+     * de la pulsación que pide Vuno, y sin ella mantener el botón apretado
+     * no devuelve ninguna señal.
+     */
+    dropzone: "flex h-24 w-full max-w-80 cursor-pointer items-start justify-between overflow-hidden border border-dashed border-(--vuno-border-strong-01) p-4 text-start text-sm leading-[1.125rem] tracking-[0.16px] text-(--vuno-link-primary) outline-solid outline-2 -outline-offset-2 outline-transparent transition-[outline-color] duration-(--vuno-duration-fast-02) ease-(--vuno-easing-standard-productive) hover:underline hover:outline-(--vuno-focus) focus:underline focus:outline-(--vuno-focus) active:text-(--vuno-text-primary) active:underline motion-reduce:transition-none",
+    /* Vuno marca la caída con el mismo contorno del foco y sin tocar el fondo. */
+    dropzoneDragOver: "outline-(--vuno-focus)",
+    dropzoneRoot: "w-full",
+    /* El filete del error usa el filete sutil contextual, que en la base es `-00`. */
+    error: "col-span-full block border-t border-(--vuno-border-subtle-00) px-4",
+    errorBody: "text-xs leading-4 tracking-[0.32px] text-(--vuno-text-primary)",
+    errorTitle: "text-xs leading-4 tracking-[0.32px] text-(--vuno-text-error)",
+    invalidIcon: "me-2 size-4 shrink-0 text-(--vuno-support-error)",
+    /*
+     * El contorno transparente es el arreglo de alto contraste forzado: al
+     * desaparecer el fondo de la fila, el sistema tiñe ese contorno y la
+     * fila conserva su caja. Es lo que Vuno pide para el archivo elegido.
+     */
+    item: "grid w-full max-w-80 grid-cols-[1fr_auto] items-center bg-(--vuno-field-01) break-words forced-colors:outline-solid forced-colors:outline-1 forced-colors:outline-transparent",
+    label: "mb-2 text-sm leading-[1.125rem] font-semibold tracking-[0.16px] text-(--vuno-text-primary)",
+    /* La caja del indicador va clavada en 16 × 24, como los otros dos estados. */
+    loading: "flex h-4 w-6 items-center justify-center p-1",
+    loadingIcon: "size-4 text-(--vuno-icon-primary)",
+    /**
+     * La «x» es un botón de 24 px sin relleno, no un `Button` de Vuno: el
+     * más pequeño de aquellos mide 32 y rompería el alto de la fila menor.
+     */
+    remove: "flex size-6 cursor-pointer items-center justify-center border-0 bg-transparent p-0 text-(--vuno-icon-primary) outline-solid outline-2 -outline-offset-2 outline-transparent focus:outline-(--vuno-focus) disabled:cursor-not-allowed disabled:text-(--vuno-icon-disabled)",
+    removeIcon: "size-4",
+    root: "flex w-full flex-col items-start",
+    state: "flex min-w-6 items-center justify-center pe-3"
+  },
+  variants: {
+    disabled: {
+      false: {},
+      /*
+       * Deshabilitado, Vuno apaga los textos y el recuadro pierde su
+       * respuesta al ratón: sin quitar el subrayado y el contorno, la zona
+       * seguiría pareciendo pulsable. El cursor es `no-drop` y no
+       * `not-allowed` porque lo que describe es que ahí no se puede
+       * soltar, no que el control esté prohibido.
+       */
+      true: {
+        name: "text-(--vuno-text-disabled)",
+        description: "text-(--vuno-text-disabled)",
+        dropzone: "cursor-no-drop border-(--vuno-button-disabled) text-(--vuno-text-disabled) hover:no-underline hover:outline-transparent",
+        item: "cursor-not-allowed text-(--vuno-text-disabled)",
+        label: "text-(--vuno-text-disabled)"
+      }
+    },
+    invalid: {
+      false: {},
+      true: { item: "outline-solid outline-2 -outline-offset-2 outline-(--vuno-support-error)" }
+    },
+    size: {
+      sm: { item: "min-h-8 gap-y-1" },
+      md: { item: "min-h-10 gap-y-2" },
+      lg: { item: "min-h-12 gap-y-3" }
+    },
+    variant: {
+      button: { container: "mt-4" },
+      dropContainer: { container: "mt-2" }
+    }
+  }
+});