arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-26 09:50:33 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(Button): use focus:outline-none instead of focus:outline-hidden

Browse Source 
Resolves #3658
This commit is contained in:
Benjamin Canac
2025-03-24 10:50:06 +01:00
parent 1769d5ed6e
commit c231fe5f26
25 changed files with 1487 additions and 1487 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
test/components/__snapshots__/Toast.spec.ts.snap
View File

@@ -14,13 +14,13 @@ exports[`Toast > renders with actions correctly 1`] = `
<div class="w-0 flex-1 flex flex-col">
<div class="text-sm font-medium text-(--ui-text-highlighted)">Toast</div>
<!--v-if-->
<div class="flex gap-1.5 shrink-0 items-start mt-2.5"><button type="button" data-reka-toast-announce-exclude="" data-reka-toast-announce-alt="Action" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
<div class="flex gap-1.5 shrink-0 items-start mt-2.5"><button type="button" data-reka-toast-announce-exclude="" data-reka-toast-announce-alt="Action" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
<!--v-if--><span class="truncate">Action</span>
<!--v-if-->
</button></div>
</div>
<div class="flex gap-1.5 shrink-0 items-center">
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
<!--v-if-->
<!--v-if-->
</button>
@@ -51,7 +51,7 @@ exports[`Toast > renders with as correctly 1`] = `
<!--v-if-->
</div>
<div class="flex gap-1.5 shrink-0 items-center">
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
<!--v-if-->
<!--v-if-->
</button>
@@ -81,7 +81,7 @@ exports[`Toast > renders with avatar correctly 1`] = `
<!--v-if-->
</div>
<div class="flex gap-1.5 shrink-0 items-center">
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
<!--v-if-->
<!--v-if-->
</button>
@@ -112,7 +112,7 @@ exports[`Toast > renders with class correctly 1`] = `
<!--v-if-->
</div>
<div class="flex gap-1.5 shrink-0 items-center">
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
<!--v-if-->
<!--v-if-->
</button>
@@ -171,7 +171,7 @@ exports[`Toast > renders with closeIcon correctly 1`] = `
<!--v-if-->
</div>
<div class="flex gap-1.5 shrink-0 items-center">
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-0"><span class="iconify i-lucide:trash shrink-0 size-5" aria-hidden="true"></span>
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-0"><span class="iconify i-lucide:trash shrink-0 size-5" aria-hidden="true"></span>
<!--v-if-->
<!--v-if-->
</button>
@@ -202,7 +202,7 @@ exports[`Toast > renders with color neutral correctly 1`] = `
<!--v-if-->
</div>
<div class="flex gap-1.5 shrink-0 items-center">
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
<!--v-if-->
<!--v-if-->
</button>
@@ -233,7 +233,7 @@ exports[`Toast > renders with description correctly 1`] = `
<!--v-if-->
</div>
<div class="flex gap-1.5 shrink-0 items-center">
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
<!--v-if-->
<!--v-if-->
</button>
@@ -264,7 +264,7 @@ exports[`Toast > renders with description slot correctly 1`] = `
<!--v-if-->
</div>
<div class="flex gap-1.5 shrink-0 items-center">
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
<!--v-if-->
<!--v-if-->
</button>
@@ -294,7 +294,7 @@ exports[`Toast > renders with icon correctly 1`] = `
<!--v-if-->
</div>
<div class="flex gap-1.5 shrink-0 items-center">
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
<!--v-if-->
<!--v-if-->
</button>
@@ -323,7 +323,7 @@ exports[`Toast > renders with leading slot correctly 1`] = `
<!--v-if-->
</div>
<div class="flex gap-1.5 shrink-0 items-center">
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
<!--v-if-->
<!--v-if-->
</button>
@@ -352,10 +352,10 @@ exports[`Toast > renders with orientation horizontal correctly 1`] = `
<div class="text-sm text-(--ui-text-muted) mt-1">This is a toast</div>
<!--v-if-->
</div>
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" data-reka-toast-announce-exclude="" data-reka-toast-announce-alt="Action" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" data-reka-toast-announce-exclude="" data-reka-toast-announce-alt="Action" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
<!--v-if--><span class="truncate">Action</span>
<!--v-if-->
</button><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
</button><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
<!--v-if-->
<!--v-if-->
</button></div>
@@ -381,13 +381,13 @@ exports[`Toast > renders with orientation vertical correctly 1`] = `
<div class="w-0 flex-1 flex flex-col">
<div class="text-sm font-medium text-(--ui-text-highlighted)">Toast</div>
<div class="text-sm text-(--ui-text-muted) mt-1">This is a toast</div>
<div class="flex gap-1.5 shrink-0 items-start mt-2.5"><button type="button" data-reka-toast-announce-exclude="" data-reka-toast-announce-alt="Action" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
<div class="flex gap-1.5 shrink-0 items-start mt-2.5"><button type="button" data-reka-toast-announce-exclude="" data-reka-toast-announce-alt="Action" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
<!--v-if--><span class="truncate">Action</span>
<!--v-if-->
</button></div>
</div>
<div class="flex gap-1.5 shrink-0 items-center">
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
<!--v-if-->
<!--v-if-->
</button>
@@ -418,7 +418,7 @@ exports[`Toast > renders with title correctly 1`] = `
<!--v-if-->
</div>
<div class="flex gap-1.5 shrink-0 items-center">
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
<!--v-if-->
<!--v-if-->
</button>
@@ -449,7 +449,7 @@ exports[`Toast > renders with title slot correctly 1`] = `
<!--v-if-->
</div>
<div class="flex gap-1.5 shrink-0 items-center">
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
<!--v-if-->
<!--v-if-->
</button>
@@ -480,7 +480,7 @@ exports[`Toast > renders with type correctly 1`] = `
<!--v-if-->
</div>
<div class="flex gap-1.5 shrink-0 items-center">
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
<!--v-if-->
<!--v-if-->
</button>
@@ -511,7 +511,7 @@ exports[`Toast > renders with ui correctly 1`] = `
<!--v-if-->
</div>
<div class="flex gap-1.5 shrink-0 items-center">
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
<!--v-if-->
<!--v-if-->
</button>