@groupteknology/vuno 2.0.0 → 4.0.0

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

@@ -0,0 +1,68 @@
+import type { ControlSize } from '#vuno/types/control';
+import type { ComponentUi } from '#vuno/types/slots';
+import type { ButtonKind } from '#vuno/components/Button/Button.types';
+/**
+ * Los tres estados de un archivo en Vuno: subiendo, subido y a la espera de
+ * que alguien lo quite.
+ *
+ * `edit` es el único que ofrece la «x», y por eso es el estado en el que vive
+ * una selección local que todavía no se ha enviado a ningún sitio.
+ */
+export type FileUploaderStatus = 'complete' | 'edit' | 'uploading';
+/** Las dos variantes documentadas por Vuno: botón y zona de caída. */
+export type FileUploaderVariant = 'button' | 'dropContainer';
+/**
+ * Un archivo de la lista.
+ *
+ * El `File` nativo viaja aparte del nombre porque la lista sobrevive al archivo:
+ * quien ya envió el contenido conserva la fila para mostrar su estado, y ahí lo
+ * único que queda es el nombre.
+ */
+export type FileUploaderFile = {
+    name: string;
+    /** El cuerpo del error, debajo del asunto. */
+    errorBody?: string;
+    /** El asunto del error; sin él la fila no pinta mensaje aunque sea inválida. */
+    errorSubject?: string;
+    file?: File;
+    invalid?: boolean;
+    /** Sin valor, el de `filenameStatus`. */
+    status?: FileUploaderStatus;
+    uuid: string;
+};
+export type FileUploaderProps = {
+    id?: string;
+    name?: string;
+    /**
+     * Filtro del selector nativo. El sistema de origen lo declara como lista y aquí
+     * se admite
+     * también la cadena que espera el atributo `accept`, que es la forma en la
+     * que se escribe a mano.
+     */
+    accept?: string | string[];
+    buttonKind?: ButtonKind;
+    buttonLabel?: string;
+    disabled?: boolean;
+    /**
+     * El estado de las filas que no declaran el suyo. Vuno lo exige en cada
+     * uso; aquí trae `edit`, que es el de una selección local.
+     */
+    filenameStatus?: FileUploaderStatus;
+    /** Lo que el lector de pantalla anuncia del icono de estado. */
+    iconDescription?: string;
+    labelDescription?: string;
+    labelTitle?: string;
+    /** Tope en bytes. Lo que lo supere entra en la lista marcado como inválido. */
+    maxFileSize?: number;
+    multiple?: boolean;
+    /**
+     * La expresión con la que se reconoce la extensión al validar contra
+     * `accept`. Es la de Vuno y solo se cambia para formatos con varios
+     * puntos.
+     */
+    pattern?: string;
+    required?: boolean;
+    size?: ControlSize;
+    ui?: ComponentUi<'fileUploader'>;
+    variant?: FileUploaderVariant;
+};

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

@@ -0,0 +1,140 @@
+<script setup>
+import { computed, ref, useId } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import { defaultFilePattern, validateFile } from "./internal/files";
+import FileUploaderButton from "./internal/FileUploaderButton/FileUploaderButton.vue";
+import FileUploaderDropContainer from "./internal/FileUploaderDropContainer/FileUploaderDropContainer.vue";
+import FileUploaderItem from "./internal/FileUploaderItem/FileUploaderItem.vue";
+defineOptions({ name: "FileUploader" });
+const model = defineModel({ type: Array, ...{ default: () => [] } });
+const props = defineProps({
+  id: { type: String, required: false, default: void 0 },
+  name: { type: String, required: false, default: void 0 },
+  accept: { type: [String, Array], required: false, default: void 0 },
+  buttonKind: { type: String, required: false, default: "primary" },
+  buttonLabel: { type: String, required: false, default: "Agregar archivo" },
+  disabled: { type: Boolean, required: false },
+  filenameStatus: { type: String, required: false, default: "edit" },
+  iconDescription: { type: String, required: false, default: void 0 },
+  labelDescription: { type: String, required: false, default: void 0 },
+  labelTitle: { type: String, required: false, default: void 0 },
+  maxFileSize: { type: Number, required: false, default: void 0 },
+  multiple: { type: Boolean, required: false },
+  pattern: { type: String, required: false, default: defaultFilePattern },
+  required: { type: Boolean, required: false },
+  size: { type: String, required: false, default: "md" },
+  ui: { type: Object, required: false, default: void 0 },
+  variant: { type: String, required: false, default: "button" }
+});
+const emit = defineEmits(["addFiles", "delete"]);
+const ui = useTheme(
+  "fileUploader",
+  () => props.ui,
+  () => ({
+    disabled: props.disabled ? "true" : "false",
+    size: props.size,
+    variant: props.variant
+  })
+);
+const descriptionId = useId();
+const instanceId = useId();
+const sequence = ref(0);
+const trigger = ref(null);
+const isRequired = computed(() => Boolean(props.required) && model.value.length === 0);
+function nextUuid() {
+  sequence.value += 1;
+  return `${instanceId}-${sequence.value}`;
+}
+function addFiles(incoming) {
+  if (props.disabled || incoming.length === 0) return;
+  const selected = props.multiple ? incoming : incoming.slice(0, 1);
+  const added = selected.map((file) => ({
+    ...validateFile(file, { accept: props.accept, maxFileSize: props.maxFileSize, pattern: props.pattern }),
+    name: file.name,
+    file,
+    uuid: nextUuid()
+  }));
+  const present = new Set(model.value.map((item) => item.name));
+  model.value = props.multiple ? [...model.value, ...added.filter((item) => !present.has(item.name))] : added;
+  emit("addFiles", selected);
+}
+function clearFiles() {
+  model.value = [];
+}
+function removeFile(file) {
+  model.value = model.value.filter((item) => item.uuid !== file.uuid);
+  emit("delete", file);
+  trigger.value?.focus();
+}
+defineExpose({ clearFiles });
+</script>
+
+<template>
+    <div :class="ui.root">
+        <h3
+            v-if="props.labelTitle"
+            :class="ui.label"
+        >
+            {{ props.labelTitle }}
+        </h3>
+
+        <p
+            v-if="props.labelDescription"
+            :id="descriptionId"
+            :class="ui.description"
+        >
+            {{ props.labelDescription }}
+        </p>
+
+        <FileUploaderDropContainer
+            v-if="props.variant === 'dropContainer'"
+            :id="props.id"
+            ref="trigger"
+            :accept="props.accept"
+            :aria-describedby="props.labelDescription ? descriptionId : void 0"
+            :disabled="props.disabled"
+            :label="props.buttonLabel"
+            :multiple="props.multiple"
+            :name="props.name"
+            :required="isRequired"
+            :ui="props.ui"
+            @add-files="addFiles"
+        />
+
+        <FileUploaderButton
+            v-else
+            :id="props.id"
+            ref="trigger"
+            :accept="props.accept"
+            :aria-describedby="props.labelDescription ? descriptionId : void 0"
+            :disabled="props.disabled"
+            :kind="props.buttonKind"
+            :label="props.buttonLabel"
+            :multiple="props.multiple"
+            :name="props.name"
+            :required="isRequired"
+            :size="props.size"
+            @add-files="addFiles"
+        />
+
+        <div
+            v-if="model.length > 0"
+            :class="ui.container"
+        >
+            <FileUploaderItem
+                v-for="file in model"
+                :key="file.uuid"
+                :disabled="props.disabled"
+                :errorBody="file.errorBody"
+                :errorSubject="file.errorSubject"
+                :iconDescription="props.iconDescription"
+                :invalid="file.invalid"
+                :name="file.name"
+                :size="props.size"
+                :status="file.status ?? props.filenameStatus"
+                :ui="props.ui"
+                @delete="removeFile(file)"
+            />
+        </div>
+    </div>
+</template>

package/dist/runtime/app/components/FileUploader/FileUploader.vue.d.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/internal/FileUploaderButton/FileUploaderButton.d.vue.ts

@@ -0,0 +1,31 @@
+import type { ControlSize } from '#vuno/types/control';
+import type { ButtonKind } from '#vuno/components/Button/Button.types';
+type Props = {
+    id?: string;
+    name?: string;
+    accept?: string | string[];
+    disabled?: boolean;
+    kind?: ButtonKind;
+    label: string;
+    multiple?: boolean;
+    required?: boolean;
+    size?: ControlSize;
+};
+/** Vuno devuelve el foco aquí cuando se quita un archivo de la lista. */
+declare function focus(): void;
+declare const __VLS_export: import("vue").DefineComponent<Props, {
+    focus: typeof focus;
+    inputRef: import("vue").Ref<HTMLInputElement | null, HTMLInputElement | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    addFiles: (files: File[]) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onAddFiles?: ((files: File[]) => any) | undefined;
+}>, {
+    size: ControlSize;
+    kind: ButtonKind;
+    name: string;
+    id: string;
+    accept: string | string[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/FileUploader/internal/FileUploaderButton/FileUploaderButton.vue

@@ -0,0 +1,72 @@
+<script setup>
+import { ref, useId } from "vue";
+import Button from "#vuno/components/Button/Button.vue";
+import { toAcceptAttribute } from "#vuno/components/FileUploader/internal/files";
+defineOptions({ name: "FileUploaderButton", inheritAttrs: false });
+const props = defineProps({
+  id: { type: String, required: false, default: void 0 },
+  name: { type: String, required: false, default: void 0 },
+  accept: { type: [String, Array], required: false, default: void 0 },
+  disabled: { type: Boolean, required: false },
+  kind: { type: String, required: false, default: "primary" },
+  label: { type: String, required: true },
+  multiple: { type: Boolean, required: false },
+  required: { type: Boolean, required: false },
+  size: { type: String, required: false, default: "md" }
+});
+const emit = defineEmits(["addFiles"]);
+const fallbackId = useId();
+const inputRef = ref(null);
+const trigger = ref(null);
+function focus() {
+  const element = trigger.value?.$el;
+  if (element instanceof HTMLElement) element.focus();
+}
+function open() {
+  if (props.disabled) return;
+  inputRef.value?.click();
+}
+function onChange(event) {
+  const input = event.target;
+  emit("addFiles", [...input.files ?? []]);
+}
+function resetValue(event) {
+  ;
+  event.target.value = "";
+}
+defineExpose({ focus, inputRef });
+</script>
+
+<template>
+    <Button
+        ref="trigger"
+        v-bind="$attrs"
+        :disabled="props.disabled"
+        :kind="props.kind"
+        :label="props.label"
+        :size="props.size"
+        @click="open"
+    />
+
+    <label
+        class="sr-only"
+        :for="props.id ?? fallbackId"
+    >
+        {{ props.label }}
+    </label>
+
+    <input
+        :id="props.id ?? fallbackId"
+        ref="inputRef"
+        :accept="toAcceptAttribute(props.accept)"
+        class="sr-only"
+        :disabled="props.disabled"
+        :multiple="props.multiple"
+        :name="props.name"
+        :required="props.required"
+        tabindex="-1"
+        type="file"
+        @change="onChange"
+        @click="resetValue"
+    />
+</template>

package/dist/runtime/app/components/FileUploader/internal/FileUploaderButton/FileUploaderButton.vue.d.ts

@@ -0,0 +1,31 @@
+import type { ControlSize } from '#vuno/types/control';
+import type { ButtonKind } from '#vuno/components/Button/Button.types';
+type Props = {
+    id?: string;
+    name?: string;
+    accept?: string | string[];
+    disabled?: boolean;
+    kind?: ButtonKind;
+    label: string;
+    multiple?: boolean;
+    required?: boolean;
+    size?: ControlSize;
+};
+/** Vuno devuelve el foco aquí cuando se quita un archivo de la lista. */
+declare function focus(): void;
+declare const __VLS_export: import("vue").DefineComponent<Props, {
+    focus: typeof focus;
+    inputRef: import("vue").Ref<HTMLInputElement | null, HTMLInputElement | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    addFiles: (files: File[]) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onAddFiles?: ((files: File[]) => any) | undefined;
+}>, {
+    size: ControlSize;
+    kind: ButtonKind;
+    name: string;
+    id: string;
+    accept: string | string[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/FileUploader/internal/FileUploaderDropContainer/FileUploaderDropContainer.d.vue.ts

@@ -0,0 +1,27 @@
+import type { ComponentUi } from '#vuno/types/slots';
+type Props = {
+    id?: string;
+    name?: string;
+    accept?: string | string[];
+    disabled?: boolean;
+    label: string;
+    multiple?: boolean;
+    required?: boolean;
+    ui?: ComponentUi<'fileUploader'>;
+};
+declare function focus(): void;
+declare const __VLS_export: import("vue").DefineComponent<Props, {
+    focus: typeof focus;
+    inputRef: import("vue").Ref<HTMLInputElement | null, HTMLInputElement | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    addFiles: (files: File[]) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onAddFiles?: ((files: File[]) => any) | undefined;
+}>, {
+    name: string;
+    id: string;
+    ui: ComponentUi<"fileUploader">;
+    accept: string | string[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/FileUploader/internal/FileUploaderDropContainer/FileUploaderDropContainer.vue

@@ -0,0 +1,109 @@
+<script setup>
+import { ref, useId } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import { filesFromTransfer, toAcceptAttribute } from "#vuno/components/FileUploader/internal/files";
+defineOptions({ name: "FileUploaderDropContainer", inheritAttrs: false });
+const props = defineProps({
+  id: { type: String, required: false, default: void 0 },
+  name: { type: String, required: false, default: void 0 },
+  accept: { type: [String, Array], required: false, default: void 0 },
+  disabled: { type: Boolean, required: false },
+  label: { type: String, required: true },
+  multiple: { type: Boolean, required: false },
+  required: { type: Boolean, required: false },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const emit = defineEmits(["addFiles"]);
+const ui = useTheme(
+  "fileUploader",
+  () => props.ui,
+  () => ({ disabled: props.disabled ? "true" : "false" })
+);
+const dragOver = ref(false);
+const fallbackId = useId();
+const inputRef = ref(null);
+const trigger = ref(null);
+function focus() {
+  trigger.value?.focus();
+}
+function open() {
+  if (props.disabled) return;
+  inputRef.value?.click();
+}
+function onChange(event) {
+  const input = event.target;
+  emit("addFiles", [...input.files ?? []]);
+}
+function onDragLeave() {
+  dragOver.value = false;
+}
+function onDragOver(event) {
+  if (props.disabled) return;
+  dragOver.value = true;
+  if (event.dataTransfer) event.dataTransfer.dropEffect = "copy";
+}
+function fillInput(files) {
+  if (!inputRef.value) return;
+  try {
+    const transfer = new DataTransfer();
+    for (const file of files) transfer.items.add(file);
+    inputRef.value.files = transfer.files;
+  } catch {
+  }
+}
+function onDrop(event) {
+  dragOver.value = false;
+  if (props.disabled) return;
+  const dropped = filesFromTransfer(event.dataTransfer);
+  if (dropped.length === 0) return;
+  fillInput(dropped);
+  emit("addFiles", dropped);
+}
+function resetValue(event) {
+  ;
+  event.target.value = "";
+}
+defineExpose({ focus, inputRef });
+</script>
+
+<template>
+    <div
+        :class="ui.dropzoneRoot"
+        @dragleave.prevent.stop="onDragLeave"
+        @dragover.prevent.stop="onDragOver"
+        @drop.prevent.stop="onDrop"
+    >
+        <button
+            ref="trigger"
+            v-bind="$attrs"
+            :class="[ui.dropzone, dragOver && ui.dropzoneDragOver]"
+            :disabled="props.disabled"
+            type="button"
+            @click="open"
+        >
+            {{ props.label }}
+        </button>
+
+        <label
+            class="sr-only"
+            :for="props.id ?? fallbackId"
+        >
+            {{ props.label }}
+        </label>
+
+        <input
+            :id="props.id ?? fallbackId"
+            ref="inputRef"
+            :accept="toAcceptAttribute(props.accept)"
+            class="sr-only"
+            :disabled="props.disabled"
+            :multiple="props.multiple"
+            :name="props.name"
+            :required="props.required"
+            tabindex="-1"
+            type="file"
+            @change="onChange"
+            @click="resetValue"
+        />
+    </div>
+</template>

package/dist/runtime/app/components/FileUploader/internal/FileUploaderDropContainer/FileUploaderDropContainer.vue.d.ts

@@ -0,0 +1,27 @@
+import type { ComponentUi } from '#vuno/types/slots';
+type Props = {
+    id?: string;
+    name?: string;
+    accept?: string | string[];
+    disabled?: boolean;
+    label: string;
+    multiple?: boolean;
+    required?: boolean;
+    ui?: ComponentUi<'fileUploader'>;
+};
+declare function focus(): void;
+declare const __VLS_export: import("vue").DefineComponent<Props, {
+    focus: typeof focus;
+    inputRef: import("vue").Ref<HTMLInputElement | null, HTMLInputElement | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    addFiles: (files: File[]) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onAddFiles?: ((files: File[]) => any) | undefined;
+}>, {
+    name: string;
+    id: string;
+    ui: ComponentUi<"fileUploader">;
+    accept: string | string[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/FileUploader/internal/FileUploaderItem/FileUploaderItem.d.vue.ts

@@ -0,0 +1,29 @@
+import type { ControlSize } from '#vuno/types/control';
+import type { ComponentUi } from '#vuno/types/slots';
+import type { FileUploaderStatus } from '#vuno/components/FileUploader/FileUploader.types';
+type Props = {
+    name?: string;
+    disabled?: boolean;
+    errorBody?: string;
+    errorSubject?: string;
+    iconDescription?: string;
+    invalid?: boolean;
+    size?: ControlSize;
+    status?: FileUploaderStatus;
+    ui?: ComponentUi<'fileUploader'>;
+};
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    delete: () => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onDelete?: (() => any) | undefined;
+}>, {
+    size: ControlSize;
+    name: string;
+    errorBody: string;
+    status: FileUploaderStatus;
+    ui: ComponentUi<"fileUploader">;
+    iconDescription: string;
+    errorSubject: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/FileUploader/internal/FileUploaderItem/FileUploaderItem.vue

@@ -0,0 +1,107 @@
+<script setup>
+import { computed, useId } from "vue";
+import { useIcons, useMessages, useTheme } from "#vuno/composables/useTheme";
+import Loading from "#vuno/components/Loading/Loading.vue";
+import Icon from "#vuno/primitives/PrimitiveIcon/PrimitiveIcon.vue";
+defineOptions({ name: "FileUploaderItem" });
+const props = defineProps({
+  name: { type: String, required: false, default: void 0 },
+  disabled: { type: Boolean, required: false },
+  errorBody: { type: String, required: false, default: void 0 },
+  errorSubject: { type: String, required: false, default: void 0 },
+  iconDescription: { type: String, required: false, default: void 0 },
+  invalid: { type: Boolean, required: false },
+  size: { type: String, required: false, default: "md" },
+  status: { type: String, required: false, default: "uploading" },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const emit = defineEmits(["delete"]);
+const icons = useIcons();
+const messages = useMessages();
+const ui = useTheme(
+  "fileUploader",
+  () => props.ui,
+  () => ({
+    disabled: props.disabled ? "true" : "false",
+    invalid: props.invalid ? "true" : "false",
+    size: props.size
+  })
+);
+const errorId = useId();
+const hasError = computed(() => Boolean(props.invalid && props.errorSubject));
+const statusDescription = computed(() => props.iconDescription ?? (props.status === "uploading" ? "Subiendo el archivo" : "Archivo subido"));
+</script>
+
+<template>
+    <div :class="ui.item">
+        <p
+            :class="ui.name"
+            :title="props.name"
+        >
+            {{ props.name }}
+        </p>
+
+        <span :class="ui.state">
+            <Loading
+                v-if="props.status === 'uploading'"
+                :description="statusDescription"
+                small
+                :ui="{ root: ui.loading, svg: ui.loadingIcon }"
+                :withOverlay="false"
+            />
+
+            <template v-else-if="props.status === 'edit'">
+                <Icon
+                    v-if="props.invalid"
+                    :class="ui.invalidIcon"
+                    :name="icons.notifyError"
+                />
+
+                <button
+                    :aria-describedby="hasError ? errorId : void 0"
+                    :aria-label="`${messages.fileRemove} ${props.name ?? ''}`.trim()"
+                    :class="ui.remove"
+                    :disabled="props.disabled"
+                    type="button"
+                    @click="emit('delete')"
+                >
+                    <Icon
+                        :class="ui.removeIcon"
+                        :name="icons.fileRemove"
+                    />
+                </button>
+            </template>
+
+            <template v-else>
+                <Icon
+                    :class="ui.complete"
+                    :name="icons.notifySuccess"
+                />
+
+                <span class="sr-only">{{ statusDescription }}</span>
+            </template>
+        </span>
+
+        <!--
+            El error se anuncia solo: `role="alert"` porque aparece después de la
+            interacción y nadie lo va a buscar, y el botón de quitar lo referencia
+            con `aria-describedby` para que se lea junto al archivo al que
+            pertenece.
+        -->
+        <div
+            v-if="hasError"
+            :id="errorId"
+            :class="ui.error"
+            role="alert"
+        >
+            <div :class="ui.errorTitle">{{ props.errorSubject }}</div>
+
+            <p
+                v-if="props.errorBody"
+                :class="ui.errorBody"
+            >
+                {{ props.errorBody }}
+            </p>
+        </div>
+    </div>
+</template>