From c6ad4ff158610d328e6e0a61b51cb7bf41e9e4d7 Mon Sep 17 00:00:00 2001
From: Enzo Innocenzi <enzo@innocenzi.dev>
Date: Mon, 29 Jun 2026 09:21:28 +0200
Subject: [PATCH 1/3] fix(file-upload): add `aria-disabled` attribute when
 disabled

---
 src/runtime/components/FileUpload.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/runtime/components/FileUpload.vue b/src/runtime/components/FileUpload.vue
index 71feaf5580..998973b230 100644
--- a/src/runtime/components/FileUpload.vue
+++ b/src/runtime/components/FileUpload.vue
@@ -365,6 +365,7 @@ defineExpose({
         :type="variant === 'button' ? 'button' : undefined"
         :role="variant === 'button' ? undefined : 'button'"
         :disabled="variant === 'button' ? disabled : undefined"
+        :aria-disabled="variant === 'button' ? disabled : undefined"
         :data-dragging="isDragging"
         data-slot="base"
         :class="ui.base({ class: props.ui?.base })"

From 9554e5b79ef921bf6decde764bf85fdc448e6468 Mon Sep 17 00:00:00 2001
From: Enzo Innocenzi <enzo@innocenzi.dev>
Date: Mon, 29 Jun 2026 15:19:26 +0200
Subject: [PATCH 2/3] test: update snapshots

---
 .../__snapshots__/FileUpload-vue.spec.ts.snap      | 14 +++++++-------
 .../__snapshots__/FileUpload.spec.ts.snap          | 14 +++++++-------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/test/components/__snapshots__/FileUpload-vue.spec.ts.snap b/test/components/__snapshots__/FileUpload-vue.spec.ts.snap
index 1303e28e50..b58f2ff006 100644
--- a/test/components/__snapshots__/FileUpload-vue.spec.ts.snap
+++ b/test/components/__snapshots__/FileUpload-vue.spec.ts.snap
@@ -143,7 +143,7 @@ exports[`FileUpload > renders with disabled correctly 2`] = `
 `;
 
 exports[`FileUpload > renders with disabled variant button correctly 1`] = `
-"<div data-slot="root" class="relative flex flex-col"><button type="button" disabled="" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 cursor-not-allowed opacity-75 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-1.5" tabindex="-1">
+"<div data-slot="root" class="relative flex flex-col"><button type="button" disabled="" aria-disabled="true" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 cursor-not-allowed opacity-75 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-1.5" tabindex="-1">
     <!--v-if-->
     <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5"></svg>
       <!--v-if-->
@@ -746,7 +746,7 @@ exports[`FileUpload > renders with size lg correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with size lg variant button correctly 1`] = `
-"<div data-slot="root" class="relative flex flex-col"><button type="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-2 hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col"><button type="button" aria-disabled="false" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-2 hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
     <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5"></svg>
       <!--v-if-->
@@ -785,7 +785,7 @@ exports[`FileUpload > renders with size md correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with size md variant button correctly 1`] = `
-"<div data-slot="root" class="relative flex flex-col"><button type="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-1.5 hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col"><button type="button" aria-disabled="false" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-1.5 hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
     <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5"></svg>
       <!--v-if-->
@@ -824,7 +824,7 @@ exports[`FileUpload > renders with size sm correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with size sm variant button correctly 1`] = `
-"<div data-slot="root" class="relative flex flex-col"><button type="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-xs border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-1.5 hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col"><button type="button" aria-disabled="false" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-xs border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-1.5 hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
     <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-4"></svg>
       <!--v-if-->
@@ -863,7 +863,7 @@ exports[`FileUpload > renders with size xl correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with size xl variant button correctly 1`] = `
-"<div data-slot="root" class="relative flex flex-col"><button type="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-base border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-2 hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col"><button type="button" aria-disabled="false" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-base border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-2 hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
     <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-6"></svg>
       <!--v-if-->
@@ -902,7 +902,7 @@ exports[`FileUpload > renders with size xs correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with size xs variant button correctly 1`] = `
-"<div data-slot="root" class="relative flex flex-col"><button type="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-xs border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-1 hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col"><button type="button" aria-disabled="false" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-xs border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-1 hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
     <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-4"></svg>
       <!--v-if-->
@@ -955,7 +955,7 @@ exports[`FileUpload > renders with variant area correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with variant button correctly 1`] = `
-"<div data-slot="root" class="relative flex flex-col"><button type="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-1.5 hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col"><button type="button" aria-disabled="false" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-1.5 hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
     <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5"></svg>
       <!--v-if-->
diff --git a/test/components/__snapshots__/FileUpload.spec.ts.snap b/test/components/__snapshots__/FileUpload.spec.ts.snap
index 154322c3c9..a0b1d8513e 100644
--- a/test/components/__snapshots__/FileUpload.spec.ts.snap
+++ b/test/components/__snapshots__/FileUpload.spec.ts.snap
@@ -143,7 +143,7 @@ exports[`FileUpload > renders with disabled correctly 2`] = `
 `;
 
 exports[`FileUpload > renders with disabled variant button correctly 1`] = `
-"<div data-slot="root" class="relative flex flex-col"><button type="button" disabled="" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 cursor-not-allowed opacity-75 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-1.5" tabindex="-1">
+"<div data-slot="root" class="relative flex flex-col"><button type="button" disabled="" aria-disabled="true" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 cursor-not-allowed opacity-75 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-1.5" tabindex="-1">
     <!--v-if-->
     <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center"><span class="iconify i-lucide:upload shrink-0 size-5" aria-hidden="true" data-slot="icon"></span>
       <!--v-if-->
@@ -746,7 +746,7 @@ exports[`FileUpload > renders with size lg correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with size lg variant button correctly 1`] = `
-"<div data-slot="root" class="relative flex flex-col"><button type="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-2 hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col"><button type="button" aria-disabled="false" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-2 hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
     <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center"><span class="iconify i-lucide:upload shrink-0 size-5" aria-hidden="true" data-slot="icon"></span>
       <!--v-if-->
@@ -785,7 +785,7 @@ exports[`FileUpload > renders with size md correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with size md variant button correctly 1`] = `
-"<div data-slot="root" class="relative flex flex-col"><button type="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-1.5 hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col"><button type="button" aria-disabled="false" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-1.5 hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
     <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center"><span class="iconify i-lucide:upload shrink-0 size-5" aria-hidden="true" data-slot="icon"></span>
       <!--v-if-->
@@ -824,7 +824,7 @@ exports[`FileUpload > renders with size sm correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with size sm variant button correctly 1`] = `
-"<div data-slot="root" class="relative flex flex-col"><button type="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-xs border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-1.5 hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col"><button type="button" aria-disabled="false" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-xs border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-1.5 hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
     <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center"><span class="iconify i-lucide:upload shrink-0 size-4" aria-hidden="true" data-slot="icon"></span>
       <!--v-if-->
@@ -863,7 +863,7 @@ exports[`FileUpload > renders with size xl correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with size xl variant button correctly 1`] = `
-"<div data-slot="root" class="relative flex flex-col"><button type="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-base border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-2 hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col"><button type="button" aria-disabled="false" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-base border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-2 hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
     <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center"><span class="iconify i-lucide:upload shrink-0 size-6" aria-hidden="true" data-slot="icon"></span>
       <!--v-if-->
@@ -902,7 +902,7 @@ exports[`FileUpload > renders with size xs correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with size xs variant button correctly 1`] = `
-"<div data-slot="root" class="relative flex flex-col"><button type="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-xs border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-1 hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col"><button type="button" aria-disabled="false" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-xs border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-1 hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
     <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center"><span class="iconify i-lucide:upload shrink-0 size-4" aria-hidden="true" data-slot="icon"></span>
       <!--v-if-->
@@ -955,7 +955,7 @@ exports[`FileUpload > renders with variant area correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with variant button correctly 1`] = `
-"<div data-slot="root" class="relative flex flex-col"><button type="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-1.5 hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col"><button type="button" aria-disabled="false" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-1.5 hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
     <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center"><span class="iconify i-lucide:upload shrink-0 size-5" aria-hidden="true" data-slot="icon"></span>
       <!--v-if-->

From 37690a8e930b6272c22fcc11bba3e04ee7db1f20 Mon Sep 17 00:00:00 2001
From: Enzo Innocenzi <enzo@innocenzi.dev>
Date: Mon, 6 Jul 2026 19:39:34 +0200
Subject: [PATCH 3/3] refactor: set `aria-disabled` using `area` variant

---
 src/runtime/components/FileUpload.vue          |  2 +-
 .../__snapshots__/FileUpload-vue.spec.ts.snap  | 18 +++++++++---------
 .../__snapshots__/FileUpload.spec.ts.snap      | 18 +++++++++---------
 3 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/runtime/components/FileUpload.vue b/src/runtime/components/FileUpload.vue
index 68e9dff37b..8cf392652f 100644
--- a/src/runtime/components/FileUpload.vue
+++ b/src/runtime/components/FileUpload.vue
@@ -365,7 +365,7 @@ defineExpose({
         :type="variant === 'button' ? 'button' : undefined"
         :role="variant === 'button' ? undefined : 'button'"
         :disabled="variant === 'button' ? disabled : undefined"
-        :aria-disabled="variant === 'button' ? disabled : undefined"
+        :aria-disabled="variant === 'button' ? undefined : (disabled || undefined)"
         :data-dragging="isDragging"
         data-slot="base"
         :class="ui.base({ class: props.ui?.base })"
diff --git a/test/components/__snapshots__/FileUpload-vue.spec.ts.snap b/test/components/__snapshots__/FileUpload-vue.spec.ts.snap
index 48862f6b10..165f69ca18 100644
--- a/test/components/__snapshots__/FileUpload-vue.spec.ts.snap
+++ b/test/components/__snapshots__/FileUpload-vue.spec.ts.snap
@@ -116,7 +116,7 @@ exports[`FileUpload > renders with description slot correctly 1`] = `
 
 exports[`FileUpload > renders with disabled correctly 1`] = `
 "<div data-slot="root" class="relative flex flex-col">
-  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 cursor-not-allowed opacity-75 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary" tabindex="-1">
+  <div role="button" aria-disabled="true" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 cursor-not-allowed opacity-75 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary" tabindex="-1">
     <!--v-if-->
     <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="avatar" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-muted"></svg></span>
       <!--v-if-->
@@ -130,7 +130,7 @@ exports[`FileUpload > renders with disabled correctly 1`] = `
 
 exports[`FileUpload > renders with disabled correctly 2`] = `
 "<div data-slot="root" class="relative flex flex-col">
-  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 cursor-not-allowed opacity-75 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary" tabindex="-1">
+  <div role="button" aria-disabled="true" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 cursor-not-allowed opacity-75 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary" tabindex="-1">
     <!--v-if-->
     <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="avatar" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 text-muted"></svg></span>
       <!--v-if-->
@@ -143,7 +143,7 @@ exports[`FileUpload > renders with disabled correctly 2`] = `
 `;
 
 exports[`FileUpload > renders with disabled variant button correctly 1`] = `
-"<div data-slot="root" class="relative flex flex-col"><button type="button" disabled="" aria-disabled="true" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 cursor-not-allowed opacity-75 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-1.5" tabindex="-1">
+"<div data-slot="root" class="relative flex flex-col"><button type="button" disabled="" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 cursor-not-allowed opacity-75 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-1.5" tabindex="-1">
     <!--v-if-->
     <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5"></svg>
       <!--v-if-->
@@ -746,7 +746,7 @@ exports[`FileUpload > renders with size lg correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with size lg variant button correctly 1`] = `
-"<div data-slot="root" class="relative flex flex-col"><button type="button" aria-disabled="false" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-2 hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col"><button type="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-2 hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
     <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5"></svg>
       <!--v-if-->
@@ -785,7 +785,7 @@ exports[`FileUpload > renders with size md correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with size md variant button correctly 1`] = `
-"<div data-slot="root" class="relative flex flex-col"><button type="button" aria-disabled="false" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-1.5 hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col"><button type="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-1.5 hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
     <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5"></svg>
       <!--v-if-->
@@ -824,7 +824,7 @@ exports[`FileUpload > renders with size sm correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with size sm variant button correctly 1`] = `
-"<div data-slot="root" class="relative flex flex-col"><button type="button" aria-disabled="false" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-xs border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-1.5 hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col"><button type="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-xs border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-1.5 hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
     <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-4"></svg>
       <!--v-if-->
@@ -863,7 +863,7 @@ exports[`FileUpload > renders with size xl correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with size xl variant button correctly 1`] = `
-"<div data-slot="root" class="relative flex flex-col"><button type="button" aria-disabled="false" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-base border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-2 hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col"><button type="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-base border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-2 hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
     <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-6"></svg>
       <!--v-if-->
@@ -902,7 +902,7 @@ exports[`FileUpload > renders with size xs correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with size xs variant button correctly 1`] = `
-"<div data-slot="root" class="relative flex flex-col"><button type="button" aria-disabled="false" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-xs border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-1 hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col"><button type="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-xs border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-1 hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
     <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-4"></svg>
       <!--v-if-->
@@ -955,7 +955,7 @@ exports[`FileUpload > renders with variant area correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with variant button correctly 1`] = `
-"<div data-slot="root" class="relative flex flex-col"><button type="button" aria-disabled="false" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-1.5 hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col"><button type="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-1.5 hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
     <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-5"></svg>
       <!--v-if-->
diff --git a/test/components/__snapshots__/FileUpload.spec.ts.snap b/test/components/__snapshots__/FileUpload.spec.ts.snap
index 710d1982f6..e31331c8a6 100644
--- a/test/components/__snapshots__/FileUpload.spec.ts.snap
+++ b/test/components/__snapshots__/FileUpload.spec.ts.snap
@@ -116,7 +116,7 @@ exports[`FileUpload > renders with description slot correctly 1`] = `
 
 exports[`FileUpload > renders with disabled correctly 1`] = `
 "<div data-slot="root" class="relative flex flex-col">
-  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 cursor-not-allowed opacity-75 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary" tabindex="-1">
+  <div role="button" aria-disabled="true" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 cursor-not-allowed opacity-75 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary" tabindex="-1">
     <!--v-if-->
     <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="avatar" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload shrink-0 text-muted" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
@@ -130,7 +130,7 @@ exports[`FileUpload > renders with disabled correctly 1`] = `
 
 exports[`FileUpload > renders with disabled correctly 2`] = `
 "<div data-slot="root" class="relative flex flex-col">
-  <div role="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 cursor-not-allowed opacity-75 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary" tabindex="-1">
+  <div role="button" aria-disabled="true" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 cursor-not-allowed opacity-75 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary" tabindex="-1">
     <!--v-if-->
     <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center px-4 py-3"><span data-slot="avatar" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload shrink-0 text-muted" aria-hidden="true" data-slot="icon"></span></span>
       <!--v-if-->
@@ -143,7 +143,7 @@ exports[`FileUpload > renders with disabled correctly 2`] = `
 `;
 
 exports[`FileUpload > renders with disabled variant button correctly 1`] = `
-"<div data-slot="root" class="relative flex flex-col"><button type="button" disabled="" aria-disabled="true" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 cursor-not-allowed opacity-75 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-1.5" tabindex="-1">
+"<div data-slot="root" class="relative flex flex-col"><button type="button" disabled="" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 cursor-not-allowed opacity-75 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-1.5" tabindex="-1">
     <!--v-if-->
     <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center"><span class="iconify i-lucide:upload shrink-0 size-5" aria-hidden="true" data-slot="icon"></span>
       <!--v-if-->
@@ -746,7 +746,7 @@ exports[`FileUpload > renders with size lg correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with size lg variant button correctly 1`] = `
-"<div data-slot="root" class="relative flex flex-col"><button type="button" aria-disabled="false" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-2 hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col"><button type="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-2 hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
     <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center"><span class="iconify i-lucide:upload shrink-0 size-5" aria-hidden="true" data-slot="icon"></span>
       <!--v-if-->
@@ -785,7 +785,7 @@ exports[`FileUpload > renders with size md correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with size md variant button correctly 1`] = `
-"<div data-slot="root" class="relative flex flex-col"><button type="button" aria-disabled="false" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-1.5 hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col"><button type="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-1.5 hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
     <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center"><span class="iconify i-lucide:upload shrink-0 size-5" aria-hidden="true" data-slot="icon"></span>
       <!--v-if-->
@@ -824,7 +824,7 @@ exports[`FileUpload > renders with size sm correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with size sm variant button correctly 1`] = `
-"<div data-slot="root" class="relative flex flex-col"><button type="button" aria-disabled="false" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-xs border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-1.5 hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col"><button type="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-xs border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-1.5 hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
     <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center"><span class="iconify i-lucide:upload shrink-0 size-4" aria-hidden="true" data-slot="icon"></span>
       <!--v-if-->
@@ -863,7 +863,7 @@ exports[`FileUpload > renders with size xl correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with size xl variant button correctly 1`] = `
-"<div data-slot="root" class="relative flex flex-col"><button type="button" aria-disabled="false" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-base border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-2 hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col"><button type="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-base border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-2 hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
     <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center"><span class="iconify i-lucide:upload shrink-0 size-6" aria-hidden="true" data-slot="icon"></span>
       <!--v-if-->
@@ -902,7 +902,7 @@ exports[`FileUpload > renders with size xs correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with size xs variant button correctly 1`] = `
-"<div data-slot="root" class="relative flex flex-col"><button type="button" aria-disabled="false" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-xs border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-1 hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col"><button type="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-xs border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-1 hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
     <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center"><span class="iconify i-lucide:upload shrink-0 size-4" aria-hidden="true" data-slot="icon"></span>
       <!--v-if-->
@@ -955,7 +955,7 @@ exports[`FileUpload > renders with variant area correctly 1`] = `
 `;
 
 exports[`FileUpload > renders with variant button correctly 1`] = `
-"<div data-slot="root" class="relative flex flex-col"><button type="button" aria-disabled="false" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-1.5 hover:bg-elevated/25" tabindex="0">
+"<div data-slot="root" class="relative flex flex-col"><button type="button" data-dragging="false" data-slot="base" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 outline-primary/25 focus-visible:outline-3 focus-visible:border-primary p-1.5 hover:bg-elevated/25" tabindex="0">
     <!--v-if-->
     <div data-slot="wrapper" class="flex flex-col items-center justify-center text-center"><span class="iconify i-lucide:upload shrink-0 size-5" aria-hidden="true" data-slot="icon"></span>
       <!--v-if-->