arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 20:19:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(Checkbox/RadioGroup): render correct element without variant

Browse Source 
Resolves #3998
This commit is contained in:
Benjamin Canac
2025-05-15 11:32:15 +02:00
parent d79da9d7b6
commit f2fd778c0a
10 changed files with 1142 additions and 1120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
test/components/__snapshots__/Checkbox-vue.spec.ts.snap
View File

@@ -1,191 +1,187 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Checkbox > renders with ariaLabel correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button aria-label="Aria label" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label>"
</div>"
`;
exports[`Checkbox > renders with as correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<section class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label>"
</section>"
`;
exports[`Checkbox > renders with class correctly 1`] = `
"<label class="relative items-start flex-row inline-flex">
"<div class="relative items-start flex-row inline-flex">
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label>"
</div>"
`;
exports[`Checkbox > renders with defaultValue correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-full" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
<!---->
</button></div>
<!--v-if-->
</label>"
</div>"
`;
exports[`Checkbox > renders with description correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
<!---->
</button></div>
<div class="w-full ms-2 text-sm">
<p for="v-0" class="block font-medium text-default">Label</p>
<div class="w-full ms-2 text-sm"><label for="v-0" class="block font-medium text-default">Label</label>
<p class="text-muted">Description</p>
</div>
</label>"
</div>"
`;
exports[`Checkbox > renders with description slot correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
<!---->
</button></div>
<div class="w-full ms-2 text-sm">
<p for="v-0" class="block font-medium text-default">Description slot</p>
<div class="w-full ms-2 text-sm"><label for="v-0" class="block font-medium text-default">Description slot</label>
<!--v-if-->
</div>
</label>"
</div>"
`;
exports[`Checkbox > renders with disabled correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="">
<!---->
<!---->
</button></div>
<!--v-if-->
</label>"
</div>"
`;
exports[`Checkbox > renders with icon correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label>"
</div>"
`;
exports[`Checkbox > renders with id correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="id" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label>"
</div>"
`;
exports[`Checkbox > renders with indeterminate correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span data-state="indeterminate" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-full" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
<!---->
</button></div>
<!--v-if-->
</label>"
</div>"
`;
exports[`Checkbox > renders with indeterminateIcon correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span data-state="indeterminate" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-full" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
<!---->
</button></div>
<!--v-if-->
</label>"
</div>"
`;
exports[`Checkbox > renders with indicator end correctly 1`] = `
"<label class="relative flex items-start flex-row-reverse">
"<div class="relative flex items-start flex-row-reverse">
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label>"
</div>"
`;
exports[`Checkbox > renders with indicator hidden correctly 1`] = `
"<label class="relative flex items-start">
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sr-only size-4" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label>"
</div>"
`;
exports[`Checkbox > renders with indicator start correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label>"
</div>"
`;
exports[`Checkbox > renders with label correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
<!---->
</button></div>
<div class="w-full ms-2 text-sm">
<p for="v-0" class="block font-medium text-default">Label</p>
<div class="w-full ms-2 text-sm"><label for="v-0" class="block font-medium text-default">Label</label>
<!--v-if-->
</div>
</label>"
</div>"
`;
exports[`Checkbox > renders with label slot correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
<!---->
</button></div>
<div class="w-full ms-2 text-sm">
<p for="v-0" class="block font-medium text-default">Label slot</p>
<div class="w-full ms-2 text-sm"><label for="v-0" class="block font-medium text-default">Label slot</label>
<!--v-if-->
</div>
</label>"
</div>"
`;
exports[`Checkbox > renders with modelValue correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-full" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
<!---->
</button></div>
<!--v-if-->
</label>"
</div>"
`;
exports[`Checkbox > renders with name correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label>"
</div>"
`;
exports[`Checkbox > renders with neutral variant card correctly 1`] = `
@@ -229,84 +225,83 @@ exports[`Checkbox > renders with primary variant list correctly 1`] = `
`;
exports[`Checkbox > renders with required correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="true" data-state="unchecked">
<!---->
<!---->
</button></div>
<div class="w-full ms-2 text-sm">
<p for="v-0" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">Label</p>
<div class="w-full ms-2 text-sm"><label for="v-0" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">Label</label>
<!--v-if-->
</div>
</label>"
</div>"
`;
exports[`Checkbox > renders with size lg correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4.5" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label>"
</div>"
`;
exports[`Checkbox > renders with size md correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label>"
</div>"
`;
exports[`Checkbox > renders with size sm correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<div class="relative flex items-start flex-row">
<div class="flex items-center h-4"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label>"
</div>"
`;
exports[`Checkbox > renders with size xl correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<div class="relative flex items-start flex-row">
<div class="flex items-center h-6"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label>"
</div>"
`;
exports[`Checkbox > renders with size xs correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<div class="relative flex items-start flex-row">
<div class="flex items-center h-4"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label>"
</div>"
`;
exports[`Checkbox > renders with ui correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label>"
</div>"
`;
exports[`Checkbox > renders with value correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label>"
</div>"
`;

119
test/components/__snapshots__/Checkbox.spec.ts.snap
View File

@@ -1,191 +1,187 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Checkbox > renders with ariaLabel correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button aria-label="Aria label" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label>"
</div>"
`;
exports[`Checkbox > renders with as correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<section class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label>"
</section>"
`;
exports[`Checkbox > renders with class correctly 1`] = `
"<label class="relative items-start flex-row inline-flex">
"<div class="relative items-start flex-row inline-flex">
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label>"
</div>"
`;
exports[`Checkbox > renders with defaultValue correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true"></span></span>
<!---->
</button></div>
<!--v-if-->
</label>"
</div>"
`;
exports[`Checkbox > renders with description correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
<!---->
</button></div>
<div class="w-full ms-2 text-sm">
<p for="v-0-0" class="block font-medium text-default">Label</p>
<div class="w-full ms-2 text-sm"><label for="v-0-0" class="block font-medium text-default">Label</label>
<p class="text-muted">Description</p>
</div>
</label>"
</div>"
`;
exports[`Checkbox > renders with description slot correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
<!---->
</button></div>
<div class="w-full ms-2 text-sm">
<p for="v-0-0" class="block font-medium text-default">Description slot</p>
<div class="w-full ms-2 text-sm"><label for="v-0-0" class="block font-medium text-default">Description slot</label>
<!--v-if-->
</div>
</label>"
</div>"
`;
exports[`Checkbox > renders with disabled correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="">
<!---->
<!---->
</button></div>
<!--v-if-->
</label>"
</div>"
`;
exports[`Checkbox > renders with icon correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label>"
</div>"
`;
exports[`Checkbox > renders with id correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="id" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label>"
</div>"
`;
exports[`Checkbox > renders with indeterminate correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span data-state="indeterminate" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:minus shrink-0 size-full" aria-hidden="true"></span></span>
<!---->
</button></div>
<!--v-if-->
</label>"
</div>"
`;
exports[`Checkbox > renders with indeterminateIcon correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span data-state="indeterminate" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:trash shrink-0 size-full" aria-hidden="true"></span></span>
<!---->
</button></div>
<!--v-if-->
</label>"
</div>"
`;
exports[`Checkbox > renders with indicator end correctly 1`] = `
"<label class="relative flex items-start flex-row-reverse">
"<div class="relative flex items-start flex-row-reverse">
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label>"
</div>"
`;
exports[`Checkbox > renders with indicator hidden correctly 1`] = `
"<label class="relative flex items-start">
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sr-only size-4" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label>"
</div>"
`;
exports[`Checkbox > renders with indicator start correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label>"
</div>"
`;
exports[`Checkbox > renders with label correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
<!---->
</button></div>
<div class="w-full ms-2 text-sm">
<p for="v-0-0" class="block font-medium text-default">Label</p>
<div class="w-full ms-2 text-sm"><label for="v-0-0" class="block font-medium text-default">Label</label>
<!--v-if-->
</div>
</label>"
</div>"
`;
exports[`Checkbox > renders with label slot correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
<!---->
</button></div>
<div class="w-full ms-2 text-sm">
<p for="v-0-0" class="block font-medium text-default">Label slot</p>
<div class="w-full ms-2 text-sm"><label for="v-0-0" class="block font-medium text-default">Label slot</label>
<!--v-if-->
</div>
</label>"
</div>"
`;
exports[`Checkbox > renders with modelValue correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true"></span></span>
<!---->
</button></div>
<!--v-if-->
</label>"
</div>"
`;
exports[`Checkbox > renders with name correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label>"
</div>"
`;
exports[`Checkbox > renders with neutral variant card correctly 1`] = `
@@ -229,84 +225,83 @@ exports[`Checkbox > renders with primary variant list correctly 1`] = `
`;
exports[`Checkbox > renders with required correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="true" data-state="unchecked">
<!---->
<!---->
</button></div>
<div class="w-full ms-2 text-sm">
<p for="v-0-0" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">Label</p>
<div class="w-full ms-2 text-sm"><label for="v-0-0" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">Label</label>
<!--v-if-->
</div>
</label>"
</div>"
`;
exports[`Checkbox > renders with size lg correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4.5" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label>"
</div>"
`;
exports[`Checkbox > renders with size md correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label>"
</div>"
`;
exports[`Checkbox > renders with size sm correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<div class="relative flex items-start flex-row">
<div class="flex items-center h-4"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label>"
</div>"
`;
exports[`Checkbox > renders with size xl correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<div class="relative flex items-start flex-row">
<div class="flex items-center h-6"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label>"
</div>"
`;
exports[`Checkbox > renders with size xs correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<div class="relative flex items-start flex-row">
<div class="flex items-center h-4"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label>"
</div>"
`;
exports[`Checkbox > renders with ui correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label>"
</div>"
`;
exports[`Checkbox > renders with value correctly 1`] = `
"<label class="relative flex items-start flex-row">
"<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label>"
</div>"
`;

480
test/components/__snapshots__/CheckboxGroup-vue.spec.ts.snap
View File

File diff suppressed because it is too large Load Diff

480
test/components/__snapshots__/CheckboxGroup.spec.ts.snap
View File

File diff suppressed because it is too large Load Diff

480
test/components/__snapshots__/RadioGroup-vue.spec.ts.snap
View File

File diff suppressed because it is too large Load Diff

480
test/components/__snapshots__/RadioGroup.spec.ts.snap
View File

File diff suppressed because it is too large Load Diff

48
test/components/__snapshots__/Table-vue.spec.ts.snap
View File

@@ -271,13 +271,15 @@ exports[`Table > renders with columns correctly 1`] = `
<!--v-if-->
<thead class="relative [&amp;>tr]:after:absolute [&amp;>tr]:after:inset-x-0 [&amp;>tr]:after:bottom-0 [&amp;>tr]:after:h-px [&amp;>tr]:after:bg-(--ui-border-accented)">
<tr class="data-[selected=true]:bg-elevated/50">
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button arialabel="Select all" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label></th>
</div>
</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">#</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Date</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
@@ -294,13 +296,15 @@ exports[`Table > renders with columns correctly 1`] = `
</thead>
<tbody class="divide-y divide-default [&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary">
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label></td>
</div>
</td>
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#m5gr84i9</td>
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
@@ -323,13 +327,15 @@ exports[`Table > renders with columns correctly 1`] = `
</tr>
<!--v-if-->
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label></td>
</div>
</td>
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#3u1reuv4</td>
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
@@ -352,13 +358,15 @@ exports[`Table > renders with columns correctly 1`] = `
</tr>
<!--v-if-->
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-5" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label></td>
</div>
</td>
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#derv1ws0</td>
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->processing<!--v-if--></span></td>
@@ -381,13 +389,15 @@ exports[`Table > renders with columns correctly 1`] = `
</tr>
<!--v-if-->
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label></td>
</div>
</td>
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#5kma53ae</td>
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
@@ -410,13 +420,15 @@ exports[`Table > renders with columns correctly 1`] = `
</tr>
<!--v-if-->
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label></td>
</div>
</td>
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#bhqecj4p</td>
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-error/10 text-error ring ring-inset ring-error/25 capitalize"><!--v-if-->failed<!--v-if--></span></td>
@@ -518,13 +530,15 @@ exports[`Table > renders with empty slot correctly 1`] = `
<!--v-if-->
<thead class="relative [&amp;>tr]:after:absolute [&amp;>tr]:after:inset-x-0 [&amp;>tr]:after:bottom-0 [&amp;>tr]:after:h-px [&amp;>tr]:after:bg-(--ui-border-accented)">
<tr class="data-[selected=true]:bg-elevated/50">
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button arialabel="Select all" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label></th>
</div>
</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">#</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Date</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
@@ -1296,13 +1310,15 @@ exports[`Table > renders with loading slot correctly 1`] = `
<!--v-if-->
<thead class="relative [&amp;>tr]:after:absolute [&amp;>tr]:after:inset-x-0 [&amp;>tr]:after:bottom-0 [&amp;>tr]:after:h-px [&amp;>tr]:after:bg-(--ui-border-accented) after:absolute after:bottom-0 after:inset-x-0 after:h-px after:bg-primary after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
<tr class="data-[selected=true]:bg-elevated/50">
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button arialabel="Select all" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label></th>
</div>
</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">#</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Date</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>

48
test/components/__snapshots__/Table.spec.ts.snap
View File

@@ -271,13 +271,15 @@ exports[`Table > renders with columns correctly 1`] = `
<!--v-if-->
<thead class="relative [&amp;>tr]:after:absolute [&amp;>tr]:after:inset-x-0 [&amp;>tr]:after:bottom-0 [&amp;>tr]:after:h-px [&amp;>tr]:after:bg-(--ui-border-accented)">
<tr class="data-[selected=true]:bg-elevated/50">
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button arialabel="Select all" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label></th>
</div>
</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">#</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Date</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
@@ -294,13 +296,15 @@ exports[`Table > renders with columns correctly 1`] = `
</thead>
<tbody class="divide-y divide-default [&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary">
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label></td>
</div>
</td>
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#m5gr84i9</td>
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
@@ -323,13 +327,15 @@ exports[`Table > renders with columns correctly 1`] = `
</tr>
<!--v-if-->
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label></td>
</div>
</td>
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#3u1reuv4</td>
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
@@ -352,13 +358,15 @@ exports[`Table > renders with columns correctly 1`] = `
</tr>
<!--v-if-->
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-5" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label></td>
</div>
</td>
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#derv1ws0</td>
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->processing<!--v-if--></span></td>
@@ -381,13 +389,15 @@ exports[`Table > renders with columns correctly 1`] = `
</tr>
<!--v-if-->
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label></td>
</div>
</td>
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#5kma53ae</td>
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
@@ -410,13 +420,15 @@ exports[`Table > renders with columns correctly 1`] = `
</tr>
<!--v-if-->
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label></td>
</div>
</td>
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#bhqecj4p</td>
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-error/10 text-error ring ring-inset ring-error/25 capitalize"><!--v-if-->failed<!--v-if--></span></td>
@@ -518,13 +530,15 @@ exports[`Table > renders with empty slot correctly 1`] = `
<!--v-if-->
<thead class="relative [&amp;>tr]:after:absolute [&amp;>tr]:after:inset-x-0 [&amp;>tr]:after:bottom-0 [&amp;>tr]:after:h-px [&amp;>tr]:after:bg-(--ui-border-accented)">
<tr class="data-[selected=true]:bg-elevated/50">
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button arialabel="Select all" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label></th>
</div>
</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">#</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Date</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
@@ -1296,13 +1310,15 @@ exports[`Table > renders with loading slot correctly 1`] = `
<!--v-if-->
<thead class="relative [&amp;>tr]:after:absolute [&amp;>tr]:after:inset-x-0 [&amp;>tr]:after:bottom-0 [&amp;>tr]:after:h-px [&amp;>tr]:after:bg-(--ui-border-accented) after:absolute after:bottom-0 after:inset-x-0 after:h-px after:bg-primary after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
<tr class="data-[selected=true]:bg-elevated/50">
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
<div class="relative flex items-start flex-row">
<div class="flex items-center h-5"><button arialabel="Select all" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
<!---->
</button></div>
<!--v-if-->
</label></th>
</div>
</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">#</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Date</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>