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

chore(deps): update

Browse Source
This commit is contained in:
Benjamin Canac
2024-06-18 11:00:41 +02:00
parent 20d49d9e16
commit cd7888cac7
10 changed files with 2363 additions and 1687 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
package.json
View File

@@ -44,32 +44,32 @@
"release": "release-it"
},
"dependencies": {
"@nuxt/kit": "^3.12.1",
"@nuxt/schema": "^3.12.1",
"@nuxt/kit": "^3.12.2",
"@nuxt/schema": "^3.12.2",
"@nuxtjs/color-mode": "^3.4.1",
"@tailwindcss/vite": "4.0.0-alpha.16",
"@vueuse/core": "^10.10.0",
"@vueuse/integrations": "^10.10.0",
"@vueuse/core": "^10.11.0",
"@vueuse/integrations": "^10.11.0",
"defu": "^6.1.4",
"fuse.js": "^7.0.0",
"nuxt-icon": "1.0.0-beta.4",
"ohash": "^1.1.3",
"radix-vue": "^1.8.3",
"radix-vue": "^1.8.4",
"scule": "^1.3.0",
"tailwind-variants": "^0.2.1",
"tailwindcss": "4.0.0-alpha.16",
"vaul-vue": "^0.1.2"
"vaul-vue": "^0.2.0"
},
"devDependencies": {
"@nuxt/eslint-config": "^0.3.13",
"@nuxt/module-builder": "^0.7.0",
"@nuxt/module-builder": "^0.7.1",
"@nuxt/test-utils": "^3.13.1",
"@release-it/conventional-changelog": "^8.0.1",
"@vue/test-utils": "^2.4.6",
"eslint": "^9.4.0",
"eslint": "^9.5.0",
"happy-dom": "^14.7.1",
"joi": "^17.13.1",
"nuxt": "^3.12.1",
"nuxt": "^3.12.2",
"release-it": "^17.3.0",
"valibot": "^0.30.0",
"vitest": "^1.6.0",

2
playground/package.json
View File

@@ -9,6 +9,6 @@
},
"dependencies": {
"@nuxt/ui": "latest",
"nuxt": "^3.12.1"
"nuxt": "^3.12.2"
}
}

1976
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

600
test/components/__snapshots__/CommandPalette.spec.ts.snap
View File

File diff suppressed because it is too large Load Diff

24
test/components/__snapshots__/Drawer.spec.ts.snap
View File

@@ -6,7 +6,7 @@ exports[`Drawer > renders with body slot correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 z-50 bg-gray-200/75 dark:bg-gray-800/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-23" aria-labelledby="radix-vue-dialog-title-22" data-state="open" vaul-drawer="" vaul-drawer-visible="false" tabindex="-1" class="fixed inset-x-0 bottom-0 z-50 mt-24 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-t-lg h-auto max-h-[96%] flex flex-col focus:outline-none">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-23" aria-labelledby="radix-vue-dialog-title-22" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed inset-x-0 bottom-0 z-50 mt-24 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-t-lg h-auto max-h-[96%] flex flex-col focus:outline-none">
<div class="mx-auto w-12 my-4 h-1.5 shrink-0 rounded-full bg-gray-200 dark:bg-gray-700"></div>
<div class="mx-auto w-full max-w-md flex flex-col gap-4 px-4 pb-8 overflow-y-auto">
<!--v-if-->
@@ -25,7 +25,7 @@ exports[`Drawer > renders with class correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 z-50 bg-gray-200/75 dark:bg-gray-800/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-8" aria-labelledby="radix-vue-dialog-title-7" data-state="open" vaul-drawer="" vaul-drawer-visible="false" tabindex="-1" class="fixed inset-x-0 bottom-0 z-50 mt-24 ring ring-gray-200 dark:ring-gray-800 rounded-t-lg h-auto max-h-[96%] flex flex-col focus:outline-none bg-gray-50 dark:bg-gray-800">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-8" aria-labelledby="radix-vue-dialog-title-7" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed inset-x-0 bottom-0 z-50 mt-24 ring ring-gray-200 dark:ring-gray-800 rounded-t-lg h-auto max-h-[96%] flex flex-col focus:outline-none bg-gray-50 dark:bg-gray-800">
<div class="mx-auto w-12 my-4 h-1.5 shrink-0 rounded-full bg-gray-200 dark:bg-gray-700"></div>
<div class="mx-auto w-full max-w-md flex flex-col gap-4 px-4 pb-8 overflow-y-auto">
<!--v-if-->
@@ -44,7 +44,7 @@ exports[`Drawer > renders with content slot correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 z-50 bg-gray-200/75 dark:bg-gray-800/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-15" aria-labelledby="radix-vue-dialog-title-14" data-state="open" vaul-drawer="" vaul-drawer-visible="false" tabindex="-1" class="fixed inset-x-0 bottom-0 z-50 mt-24 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-t-lg h-auto max-h-[96%] flex flex-col focus:outline-none">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-15" aria-labelledby="radix-vue-dialog-title-14" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed inset-x-0 bottom-0 z-50 mt-24 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-t-lg h-auto max-h-[96%] flex flex-col focus:outline-none">
<div class="mx-auto w-12 my-4 h-1.5 shrink-0 rounded-full bg-gray-200 dark:bg-gray-700"></div>Content slot
</div>
@@ -58,7 +58,7 @@ exports[`Drawer > renders with default slot correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 z-50 bg-gray-200/75 dark:bg-gray-800/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="radix-vue-dialog-content-11" role="dialog" aria-describedby="radix-vue-dialog-description-13" aria-labelledby="radix-vue-dialog-title-12" data-state="open" vaul-drawer="" vaul-drawer-visible="false" tabindex="-1" class="fixed inset-x-0 bottom-0 z-50 mt-24 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-t-lg h-auto max-h-[96%] flex flex-col focus:outline-none">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="radix-vue-dialog-content-11" role="dialog" aria-describedby="radix-vue-dialog-description-13" aria-labelledby="radix-vue-dialog-title-12" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed inset-x-0 bottom-0 z-50 mt-24 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-t-lg h-auto max-h-[96%] flex flex-col focus:outline-none">
<div class="mx-auto w-12 my-4 h-1.5 shrink-0 rounded-full bg-gray-200 dark:bg-gray-700"></div>
<div class="mx-auto w-full max-w-md flex flex-col gap-4 px-4 pb-8 overflow-y-auto">
<!--v-if-->
@@ -77,7 +77,7 @@ exports[`Drawer > renders with description correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 z-50 bg-gray-200/75 dark:bg-gray-800/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-4" aria-labelledby="radix-vue-dialog-title-3" data-state="open" vaul-drawer="" vaul-drawer-visible="false" tabindex="-1" class="fixed inset-x-0 bottom-0 z-50 mt-24 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-t-lg h-auto max-h-[96%] flex flex-col focus:outline-none">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-4" aria-labelledby="radix-vue-dialog-title-3" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed inset-x-0 bottom-0 z-50 mt-24 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-t-lg h-auto max-h-[96%] flex flex-col focus:outline-none">
<div class="mx-auto w-12 my-4 h-1.5 shrink-0 rounded-full bg-gray-200 dark:bg-gray-700"></div>
<div class="mx-auto w-full max-w-md flex flex-col gap-4 px-4 pb-8 overflow-y-auto">
<div class="">
@@ -99,7 +99,7 @@ exports[`Drawer > renders with description slot correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 z-50 bg-gray-200/75 dark:bg-gray-800/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-21" aria-labelledby="radix-vue-dialog-title-20" data-state="open" vaul-drawer="" vaul-drawer-visible="false" tabindex="-1" class="fixed inset-x-0 bottom-0 z-50 mt-24 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-t-lg h-auto max-h-[96%] flex flex-col focus:outline-none">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-21" aria-labelledby="radix-vue-dialog-title-20" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed inset-x-0 bottom-0 z-50 mt-24 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-t-lg h-auto max-h-[96%] flex flex-col focus:outline-none">
<div class="mx-auto w-12 my-4 h-1.5 shrink-0 rounded-full bg-gray-200 dark:bg-gray-700"></div>
<div class="mx-auto w-full max-w-md flex flex-col gap-4 px-4 pb-8 overflow-y-auto">
<div class="">
@@ -121,7 +121,7 @@ exports[`Drawer > renders with footer slot correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 z-50 bg-gray-200/75 dark:bg-gray-800/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-25" aria-labelledby="radix-vue-dialog-title-24" data-state="open" vaul-drawer="" vaul-drawer-visible="false" tabindex="-1" class="fixed inset-x-0 bottom-0 z-50 mt-24 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-t-lg h-auto max-h-[96%] flex flex-col focus:outline-none">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-25" aria-labelledby="radix-vue-dialog-title-24" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed inset-x-0 bottom-0 z-50 mt-24 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-t-lg h-auto max-h-[96%] flex flex-col focus:outline-none">
<div class="mx-auto w-12 my-4 h-1.5 shrink-0 rounded-full bg-gray-200 dark:bg-gray-700"></div>
<div class="mx-auto w-full max-w-md flex flex-col gap-4 px-4 pb-8 overflow-y-auto">
<!--v-if-->
@@ -140,7 +140,7 @@ exports[`Drawer > renders with header slot correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 z-50 bg-gray-200/75 dark:bg-gray-800/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-17" aria-labelledby="radix-vue-dialog-title-16" data-state="open" vaul-drawer="" vaul-drawer-visible="false" tabindex="-1" class="fixed inset-x-0 bottom-0 z-50 mt-24 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-t-lg h-auto max-h-[96%] flex flex-col focus:outline-none">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-17" aria-labelledby="radix-vue-dialog-title-16" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed inset-x-0 bottom-0 z-50 mt-24 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-t-lg h-auto max-h-[96%] flex flex-col focus:outline-none">
<div class="mx-auto w-12 my-4 h-1.5 shrink-0 rounded-full bg-gray-200 dark:bg-gray-700"></div>
<div class="mx-auto w-full max-w-md flex flex-col gap-4 px-4 pb-8 overflow-y-auto">
<div class="">Header slot</div>
@@ -159,7 +159,7 @@ exports[`Drawer > renders with title correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 z-50 bg-gray-200/75 dark:bg-gray-800/75"></div>
<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-2" aria-labelledby="radix-vue-dialog-title-1" data-state="open" vaul-drawer="" vaul-drawer-visible="false" tabindex="-1" class="fixed inset-x-0 bottom-0 z-50 mt-24 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-t-lg h-auto max-h-[96%] flex flex-col focus:outline-none">
<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-2" aria-labelledby="radix-vue-dialog-title-1" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed inset-x-0 bottom-0 z-50 mt-24 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-t-lg h-auto max-h-[96%] flex flex-col focus:outline-none">
<div class="mx-auto w-12 my-4 h-1.5 shrink-0 rounded-full bg-gray-200 dark:bg-gray-700"></div>
<div class="mx-auto w-full max-w-md flex flex-col gap-4 px-4 pb-8 overflow-y-auto">
<div class="">
@@ -181,7 +181,7 @@ exports[`Drawer > renders with title slot correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 z-50 bg-gray-200/75 dark:bg-gray-800/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-19" aria-labelledby="radix-vue-dialog-title-18" data-state="open" vaul-drawer="" vaul-drawer-visible="false" tabindex="-1" class="fixed inset-x-0 bottom-0 z-50 mt-24 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-t-lg h-auto max-h-[96%] flex flex-col focus:outline-none">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-19" aria-labelledby="radix-vue-dialog-title-18" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed inset-x-0 bottom-0 z-50 mt-24 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-t-lg h-auto max-h-[96%] flex flex-col focus:outline-none">
<div class="mx-auto w-12 my-4 h-1.5 shrink-0 rounded-full bg-gray-200 dark:bg-gray-700"></div>
<div class="mx-auto w-full max-w-md flex flex-col gap-4 px-4 pb-8 overflow-y-auto">
<div class="">
@@ -203,7 +203,7 @@ exports[`Drawer > renders with ui correctly 1`] = `
<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 z-50 bg-gray-200/75 dark:bg-gray-800/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-10" aria-labelledby="radix-vue-dialog-title-9" data-state="open" vaul-drawer="" vaul-drawer-visible="false" tabindex="-1" class="fixed inset-x-0 bottom-0 z-50 mt-24 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-t-lg h-auto max-h-[96%] flex flex-col focus:outline-none">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-10" aria-labelledby="radix-vue-dialog-title-9" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed inset-x-0 bottom-0 z-50 mt-24 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-t-lg h-auto max-h-[96%] flex flex-col focus:outline-none">
<div class="mx-auto my-4 h-1.5 shrink-0 rounded-full bg-gray-200 dark:bg-gray-700 w-20"></div>
<div class="mx-auto w-full max-w-md flex flex-col gap-4 px-4 pb-8 overflow-y-auto">
<!--v-if-->
@@ -222,7 +222,7 @@ exports[`Drawer > renders without overlay correctly 1`] = `
<!--v-if-->
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-6" aria-labelledby="radix-vue-dialog-title-5" data-state="open" vaul-drawer="" vaul-drawer-visible="false" tabindex="-1" class="fixed inset-x-0 bottom-0 z-50 mt-24 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-t-lg h-auto max-h-[96%] flex flex-col focus:outline-none">
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-6" aria-labelledby="radix-vue-dialog-title-5" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed inset-x-0 bottom-0 z-50 mt-24 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-t-lg h-auto max-h-[96%] flex flex-col focus:outline-none">
<div class="mx-auto w-12 my-4 h-1.5 shrink-0 rounded-full bg-gray-200 dark:bg-gray-700"></div>
<div class="mx-auto w-full max-w-md flex flex-col gap-4 px-4 pb-8 overflow-y-auto">
<div class="">

40
test/components/__snapshots__/Form.spec.ts.snap
View File

@@ -8,7 +8,7 @@ exports[`Form > custom validation works > with error 1`] = `
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" value="bob@dylan.com">
<!--v-if-->
<!--v-if-->
</div>
@@ -21,7 +21,7 @@ exports[`Form > custom validation works > with error 1`] = `
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-inset ring-red-500 dark:ring-red-400 focus-visible:ring-2 focus-visible:ring-red-500 dark:focus-visible:ring-red-400">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-inset ring-red-500 dark:ring-red-400 focus-visible:ring-2 focus-visible:ring-red-500 dark:focus-visible:ring-red-400" value="short">
<!--v-if-->
<!--v-if-->
</div>
@@ -39,7 +39,7 @@ exports[`Form > custom validation works > without error 1`] = `
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" value="bob@dylan.com">
<!--v-if-->
<!--v-if-->
</div>
@@ -52,7 +52,7 @@ exports[`Form > custom validation works > without error 1`] = `
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" value="validpassword">
<!--v-if-->
<!--v-if-->
</div>
@@ -70,7 +70,7 @@ exports[`Form > joi validation works > with error 1`] = `
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" value="bob@dylan.com">
<!--v-if-->
<!--v-if-->
</div>
@@ -83,7 +83,7 @@ exports[`Form > joi validation works > with error 1`] = `
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-inset ring-red-500 dark:ring-red-400 focus-visible:ring-2 focus-visible:ring-red-500 dark:focus-visible:ring-red-400">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-inset ring-red-500 dark:ring-red-400 focus-visible:ring-2 focus-visible:ring-red-500 dark:focus-visible:ring-red-400" value="short">
<!--v-if-->
<!--v-if-->
</div>
@@ -101,7 +101,7 @@ exports[`Form > joi validation works > without error 1`] = `
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" value="bob@dylan.com">
<!--v-if-->
<!--v-if-->
</div>
@@ -114,7 +114,7 @@ exports[`Form > joi validation works > without error 1`] = `
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" value="validpassword">
<!--v-if-->
<!--v-if-->
</div>
@@ -136,7 +136,7 @@ exports[`Form > valibot validation works > with error 1`] = `
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" value="bob@dylan.com">
<!--v-if-->
<!--v-if-->
</div>
@@ -149,7 +149,7 @@ exports[`Form > valibot validation works > with error 1`] = `
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-inset ring-red-500 dark:ring-red-400 focus-visible:ring-2 focus-visible:ring-red-500 dark:focus-visible:ring-red-400">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-inset ring-red-500 dark:ring-red-400 focus-visible:ring-2 focus-visible:ring-red-500 dark:focus-visible:ring-red-400" value="short">
<!--v-if-->
<!--v-if-->
</div>
@@ -167,7 +167,7 @@ exports[`Form > valibot validation works > without error 1`] = `
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" value="bob@dylan.com">
<!--v-if-->
<!--v-if-->
</div>
@@ -180,7 +180,7 @@ exports[`Form > valibot validation works > without error 1`] = `
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" value="validpassword">
<!--v-if-->
<!--v-if-->
</div>
@@ -198,7 +198,7 @@ exports[`Form > yup validation works > with error 1`] = `
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" value="bob@dylan.com">
<!--v-if-->
<!--v-if-->
</div>
@@ -211,7 +211,7 @@ exports[`Form > yup validation works > with error 1`] = `
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-inset ring-red-500 dark:ring-red-400 focus-visible:ring-2 focus-visible:ring-red-500 dark:focus-visible:ring-red-400">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-inset ring-red-500 dark:ring-red-400 focus-visible:ring-2 focus-visible:ring-red-500 dark:focus-visible:ring-red-400" value="short">
<!--v-if-->
<!--v-if-->
</div>
@@ -229,7 +229,7 @@ exports[`Form > yup validation works > without error 1`] = `
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" value="bob@dylan.com">
<!--v-if-->
<!--v-if-->
</div>
@@ -242,7 +242,7 @@ exports[`Form > yup validation works > without error 1`] = `
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" value="validpassword">
<!--v-if-->
<!--v-if-->
</div>
@@ -260,7 +260,7 @@ exports[`Form > zod validation works > with error 1`] = `
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" value="bob@dylan.com">
<!--v-if-->
<!--v-if-->
</div>
@@ -273,7 +273,7 @@ exports[`Form > zod validation works > with error 1`] = `
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-inset ring-red-500 dark:ring-red-400 focus-visible:ring-2 focus-visible:ring-red-500 dark:focus-visible:ring-red-400">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-inset ring-red-500 dark:ring-red-400 focus-visible:ring-2 focus-visible:ring-red-500 dark:focus-visible:ring-red-400" value="short">
<!--v-if-->
<!--v-if-->
</div>
@@ -291,7 +291,7 @@ exports[`Form > zod validation works > without error 1`] = `
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" value="bob@dylan.com">
<!--v-if-->
<!--v-if-->
</div>
@@ -304,7 +304,7 @@ exports[`Form > zod validation works > without error 1`] = `
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" value="validpassword">
<!--v-if-->
<!--v-if-->
</div>

578
test/components/__snapshots__/InputMenu.spec.ts.snap
View File

File diff suppressed because it is too large Load Diff

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

@@ -5,7 +5,7 @@ exports[`RadioGroup > renders with class correctly 1`] = `
<fieldset class="flex flex-col gap-1">
<!--v-if-->
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="14:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="14:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
<!---->
<!---->
</button></div>
@@ -14,7 +14,7 @@ exports[`RadioGroup > renders with class correctly 1`] = `
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="14:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="14:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
<!---->
<!---->
</button></div>
@@ -23,7 +23,7 @@ exports[`RadioGroup > renders with class correctly 1`] = `
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="14:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="14:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
<!---->
<!---->
</button></div>
@@ -40,7 +40,7 @@ exports[`RadioGroup > renders with color black correctly 1`] = `
<fieldset class="flex flex-col gap-1">
<!--v-if-->
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 dark:focus-visible:outline-white size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="13:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 dark:focus-visible:outline-white size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="13:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
<!---->
<!---->
</button></div>
@@ -49,7 +49,7 @@ exports[`RadioGroup > renders with color black correctly 1`] = `
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 dark:focus-visible:outline-white size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="13:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 dark:focus-visible:outline-white size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="13:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
<!---->
<!---->
</button></div>
@@ -58,7 +58,7 @@ exports[`RadioGroup > renders with color black correctly 1`] = `
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 dark:focus-visible:outline-white size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="13:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 dark:focus-visible:outline-white size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="13:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
<!---->
<!---->
</button></div>
@@ -75,7 +75,7 @@ exports[`RadioGroup > renders with color green correctly 1`] = `
<fieldset class="flex flex-col gap-1">
<!--v-if-->
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-500 dark:focus-visible:outline-green-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="11:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-500 dark:focus-visible:outline-green-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="11:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
<!---->
<!---->
</button></div>
@@ -84,7 +84,7 @@ exports[`RadioGroup > renders with color green correctly 1`] = `
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-500 dark:focus-visible:outline-green-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="11:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-500 dark:focus-visible:outline-green-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="11:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
<!---->
<!---->
</button></div>
@@ -93,7 +93,7 @@ exports[`RadioGroup > renders with color green correctly 1`] = `
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-500 dark:focus-visible:outline-green-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="11:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-500 dark:focus-visible:outline-green-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="11:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
<!---->
<!---->
</button></div>
@@ -110,7 +110,7 @@ exports[`RadioGroup > renders with color primary correctly 1`] = `
<fieldset class="flex flex-col gap-1">
<!--v-if-->
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="10:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="10:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
<!---->
<!---->
</button></div>
@@ -119,7 +119,7 @@ exports[`RadioGroup > renders with color primary correctly 1`] = `
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="10:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="10:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
<!---->
<!---->
</button></div>
@@ -128,7 +128,7 @@ exports[`RadioGroup > renders with color primary correctly 1`] = `
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="10:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="10:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
<!---->
<!---->
</button></div>
@@ -145,7 +145,7 @@ exports[`RadioGroup > renders with color red correctly 1`] = `
<fieldset class="flex flex-col gap-1">
<!--v-if-->
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:focus-visible:outline-red-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="12:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:focus-visible:outline-red-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="12:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
<!---->
<!---->
</button></div>
@@ -154,7 +154,7 @@ exports[`RadioGroup > renders with color red correctly 1`] = `
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:focus-visible:outline-red-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="12:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:focus-visible:outline-red-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="12:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
<!---->
<!---->
</button></div>
@@ -163,7 +163,7 @@ exports[`RadioGroup > renders with color red correctly 1`] = `
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:focus-visible:outline-red-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="12:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:focus-visible:outline-red-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="12:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
<!---->
<!---->
</button></div>
@@ -180,7 +180,7 @@ exports[`RadioGroup > renders with defaultValue correctly 1`] = `
<fieldset class="flex flex-col gap-1">
<!--v-if-->
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="true" id="1:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full rounded-full after:bg-white dark:after:bg-gray-900 after:rounded-full bg-primary-500 dark:bg-primary-400 after:size-1.5"></span>
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="true" id="1:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" aria-label="1" value="1"><span data-state="checked" class="flex items-center justify-center size-full rounded-full after:bg-white dark:after:bg-gray-900 after:rounded-full bg-primary-500 dark:bg-primary-400 after:size-1.5"></span>
<!---->
</button></div>
<div class="ms-2"><label for="1:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
@@ -188,7 +188,7 @@ exports[`RadioGroup > renders with defaultValue correctly 1`] = `
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="1:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="1:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
<!---->
<!---->
</button></div>
@@ -197,7 +197,7 @@ exports[`RadioGroup > renders with defaultValue correctly 1`] = `
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="1:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="1:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
<!---->
<!---->
</button></div>
@@ -214,7 +214,7 @@ exports[`RadioGroup > renders with description correctly 1`] = `
<fieldset class="flex flex-col gap-1">
<!--v-if-->
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="3:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="3:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
<!---->
<!---->
</button></div>
@@ -223,7 +223,7 @@ exports[`RadioGroup > renders with description correctly 1`] = `
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="3:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="3:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
<!---->
<!---->
</button></div>
@@ -232,7 +232,7 @@ exports[`RadioGroup > renders with description correctly 1`] = `
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="3:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="3:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
<!---->
<!---->
</button></div>
@@ -249,7 +249,7 @@ exports[`RadioGroup > renders with description slot correctly 1`] = `
<fieldset class="flex flex-col gap-1">
<!--v-if-->
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="19:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="19:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
<!---->
<!---->
</button></div>
@@ -258,7 +258,7 @@ exports[`RadioGroup > renders with description slot correctly 1`] = `
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="19:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="19:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
<!---->
<!---->
</button></div>
@@ -267,7 +267,7 @@ exports[`RadioGroup > renders with description slot correctly 1`] = `
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="19:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="19:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
<!---->
<!---->
</button></div>
@@ -284,7 +284,7 @@ exports[`RadioGroup > renders with disabled correctly 1`] = `
<fieldset class="flex flex-col gap-1">
<!--v-if-->
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4 cursor-not-allowed opacity-75" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" data-disabled="true" id="2:1" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" value="1" aria-label="1">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4 cursor-not-allowed opacity-75" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" data-disabled="true" id="2:1" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" aria-label="1" value="1">
<!---->
<!---->
</button></div>
@@ -293,7 +293,7 @@ exports[`RadioGroup > renders with disabled correctly 1`] = `
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4 cursor-not-allowed opacity-75" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" data-disabled="true" id="2:2" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" value="2" aria-label="2">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4 cursor-not-allowed opacity-75" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" data-disabled="true" id="2:2" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" aria-label="2" value="2">
<!---->
<!---->
</button></div>
@@ -302,7 +302,7 @@ exports[`RadioGroup > renders with disabled correctly 1`] = `
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4 cursor-not-allowed opacity-75" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" data-disabled="true" id="2:3" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" value="3" aria-label="3">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4 cursor-not-allowed opacity-75" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" data-disabled="true" id="2:3" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" aria-label="3" value="3">
<!---->
<!---->
</button></div>
@@ -319,7 +319,7 @@ exports[`RadioGroup > renders with items correctly 1`] = `
<fieldset class="flex flex-col gap-1">
<!--v-if-->
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
<!---->
<!---->
</button></div>
@@ -328,7 +328,7 @@ exports[`RadioGroup > renders with items correctly 1`] = `
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
<!---->
<!---->
</button></div>
@@ -337,7 +337,7 @@ exports[`RadioGroup > renders with items correctly 1`] = `
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
<!---->
<!---->
</button></div>
@@ -354,7 +354,7 @@ exports[`RadioGroup > renders with label slot correctly 1`] = `
<fieldset class="flex flex-col gap-1">
<!--v-if-->
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="18:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="18:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
<!---->
<!---->
</button></div>
@@ -363,7 +363,7 @@ exports[`RadioGroup > renders with label slot correctly 1`] = `
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="18:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="18:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
<!---->
<!---->
</button></div>
@@ -372,7 +372,7 @@ exports[`RadioGroup > renders with label slot correctly 1`] = `
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="18:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="18:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
<!---->
<!---->
</button></div>
@@ -389,7 +389,7 @@ exports[`RadioGroup > renders with legend slot correctly 1`] = `
<fieldset class="flex flex-col gap-1">
<!--v-if-->
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="17:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="17:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
<!---->
<!---->
</button></div>
@@ -398,7 +398,7 @@ exports[`RadioGroup > renders with legend slot correctly 1`] = `
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="17:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="17:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
<!---->
<!---->
</button></div>
@@ -407,7 +407,7 @@ exports[`RadioGroup > renders with legend slot correctly 1`] = `
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="17:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="17:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
<!---->
<!---->
</button></div>
@@ -424,7 +424,7 @@ exports[`RadioGroup > renders with orientation correctly 1`] = `
<fieldset class="flex flex-row gap-1">
<!--v-if-->
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="false" id="16:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="false" id="16:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
<!---->
<!---->
</button></div>
@@ -433,7 +433,7 @@ exports[`RadioGroup > renders with orientation correctly 1`] = `
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="false" id="16:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="false" id="16:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
<!---->
<!---->
</button></div>
@@ -442,7 +442,7 @@ exports[`RadioGroup > renders with orientation correctly 1`] = `
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="false" id="16:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="false" id="16:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
<!---->
<!---->
</button></div>
@@ -459,7 +459,7 @@ exports[`RadioGroup > renders with required correctly 1`] = `
<fieldset class="flex flex-col gap-1">
<legend class="mb-1 block font-medium text-gray-700 dark:text-gray-200 after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-400">Legend</legend>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="4:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" value="1" aria-label="1">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="4:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" aria-label="1" value="1">
<!---->
<!---->
</button></div>
@@ -468,7 +468,7 @@ exports[`RadioGroup > renders with required correctly 1`] = `
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="4:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" value="2" aria-label="2">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="4:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" aria-label="2" value="2">
<!---->
<!---->
</button></div>
@@ -477,7 +477,7 @@ exports[`RadioGroup > renders with required correctly 1`] = `
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="4:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" value="3" aria-label="3">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="4:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" aria-label="3" value="3">
<!---->
<!---->
</button></div>
@@ -494,7 +494,7 @@ exports[`RadioGroup > renders with size lg correctly 1`] = `
<fieldset class="flex flex-col gap-1">
<!--v-if-->
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4.5" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="8:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4.5" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="8:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
<!---->
<!---->
</button></div>
@@ -503,7 +503,7 @@ exports[`RadioGroup > renders with size lg correctly 1`] = `
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4.5" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="8:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4.5" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="8:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
<!---->
<!---->
</button></div>
@@ -512,7 +512,7 @@ exports[`RadioGroup > renders with size lg correctly 1`] = `
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4.5" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="8:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4.5" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="8:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
<!---->
<!---->
</button></div>
@@ -529,7 +529,7 @@ exports[`RadioGroup > renders with size md correctly 1`] = `
<fieldset class="flex flex-col gap-1">
<!--v-if-->
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="7:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="7:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
<!---->
<!---->
</button></div>
@@ -538,7 +538,7 @@ exports[`RadioGroup > renders with size md correctly 1`] = `
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="7:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="7:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
<!---->
<!---->
</button></div>
@@ -547,7 +547,7 @@ exports[`RadioGroup > renders with size md correctly 1`] = `
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="7:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="7:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
<!---->
<!---->
</button></div>
@@ -564,7 +564,7 @@ exports[`RadioGroup > renders with size sm correctly 1`] = `
<fieldset class="flex flex-col gap-0.5">
<!--v-if-->
<div class="flex items-start text-xs">
<div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-3.5" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="6:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
<div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-3.5" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="6:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
<!---->
<!---->
</button></div>
@@ -573,7 +573,7 @@ exports[`RadioGroup > renders with size sm correctly 1`] = `
</div>
</div>
<div class="flex items-start text-xs">
<div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-3.5" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="6:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
<div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-3.5" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="6:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
<!---->
<!---->
</button></div>
@@ -582,7 +582,7 @@ exports[`RadioGroup > renders with size sm correctly 1`] = `
</div>
</div>
<div class="flex items-start text-xs">
<div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-3.5" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="6:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
<div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-3.5" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="6:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
<!---->
<!---->
</button></div>
@@ -599,7 +599,7 @@ exports[`RadioGroup > renders with size xl correctly 1`] = `
<fieldset class="flex flex-col gap-1.5">
<!--v-if-->
<div class="flex items-start text-base">
<div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-5" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="9:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
<div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-5" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="9:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
<!---->
<!---->
</button></div>
@@ -608,7 +608,7 @@ exports[`RadioGroup > renders with size xl correctly 1`] = `
</div>
</div>
<div class="flex items-start text-base">
<div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-5" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="9:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
<div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-5" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="9:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
<!---->
<!---->
</button></div>
@@ -617,7 +617,7 @@ exports[`RadioGroup > renders with size xl correctly 1`] = `
</div>
</div>
<div class="flex items-start text-base">
<div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-5" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="9:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
<div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-5" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="9:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
<!---->
<!---->
</button></div>
@@ -634,7 +634,7 @@ exports[`RadioGroup > renders with size xs correctly 1`] = `
<fieldset class="flex flex-col gap-0.5">
<!--v-if-->
<div class="flex items-start text-xs">
<div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-3" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="5:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
<div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-3" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="5:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
<!---->
<!---->
</button></div>
@@ -643,7 +643,7 @@ exports[`RadioGroup > renders with size xs correctly 1`] = `
</div>
</div>
<div class="flex items-start text-xs">
<div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-3" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="5:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
<div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-3" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="5:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
<!---->
<!---->
</button></div>
@@ -652,7 +652,7 @@ exports[`RadioGroup > renders with size xs correctly 1`] = `
</div>
</div>
<div class="flex items-start text-xs">
<div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-3" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="5:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
<div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-3" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="5:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
<!---->
<!---->
</button></div>
@@ -669,7 +669,7 @@ exports[`RadioGroup > renders with ui correctly 1`] = `
<fieldset class="flex flex-col gap-1">
<!--v-if-->
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="15:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="15:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
<!---->
<!---->
</button></div>
@@ -678,7 +678,7 @@ exports[`RadioGroup > renders with ui correctly 1`] = `
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="15:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="15:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
<!---->
<!---->
</button></div>
@@ -687,7 +687,7 @@ exports[`RadioGroup > renders with ui correctly 1`] = `
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="15:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="15:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
<!---->
<!---->
</button></div>

70
test/components/__snapshots__/Select.spec.ts.snap
View File

@@ -50,7 +50,7 @@ exports[`Select > renders with class correctly 1`] = `
<!--teleport end-->
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1">
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1" value="">
<!---->
<option value="backlog">Backlog</option>
<option value="todo">Todo</option>
@@ -110,7 +110,7 @@ exports[`Select > renders with color gray correctly 1`] = `
<!--teleport end-->
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1">
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1" value="">
<!---->
<option value="backlog">Backlog</option>
<option value="todo">Todo</option>
@@ -170,7 +170,7 @@ exports[`Select > renders with color green correctly 1`] = `
<!--teleport end-->
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1">
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1" value="">
<!---->
<option value="backlog">Backlog</option>
<option value="todo">Todo</option>
@@ -230,7 +230,7 @@ exports[`Select > renders with color primary correctly 1`] = `
<!--teleport end-->
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1">
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1" value="">
<!---->
<option value="backlog">Backlog</option>
<option value="todo">Todo</option>
@@ -290,7 +290,7 @@ exports[`Select > renders with color red correctly 1`] = `
<!--teleport end-->
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1">
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1" value="">
<!---->
<option value="backlog">Backlog</option>
<option value="todo">Todo</option>
@@ -350,7 +350,7 @@ exports[`Select > renders with color white correctly 1`] = `
<!--teleport end-->
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1">
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1" value="">
<!---->
<option value="backlog">Backlog</option>
<option value="todo">Todo</option>
@@ -410,7 +410,7 @@ exports[`Select > renders with defaultValue correctly 1`] = `
<!--teleport end-->
<select default-value="[object Object]" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1">
<select default-value="[object Object]" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1" value="[object Object]">
<!---->
<option value="backlog">Backlog</option>
<option value="todo">Todo</option>
@@ -470,7 +470,7 @@ exports[`Select > renders with disabled correctly 1`] = `
<!--teleport end-->
<select disabled="" default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1">
<select disabled="" default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1" value="">
<!---->
<option value="backlog">Backlog</option>
<option value="todo">Todo</option>
@@ -528,7 +528,7 @@ exports[`Select > renders with icon correctly 1`] = `
<!--teleport end-->
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1">
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1" value="">
<!---->
<option value="backlog">Backlog</option>
<option value="todo">Todo</option>
@@ -588,7 +588,7 @@ exports[`Select > renders with id correctly 1`] = `
<!--teleport end-->
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" id="id" aria-hidden="" tabindex="-1">
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" id="id" aria-hidden="" tabindex="-1" value="">
<!---->
<option value="backlog">Backlog</option>
<option value="todo">Todo</option>
@@ -633,7 +633,7 @@ exports[`Select > renders with item slot correctly 1`] = `
<!--teleport end-->
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1"></select>"
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1" value=""></select>"
`;
exports[`Select > renders with item-label slot correctly 1`] = `
@@ -686,7 +686,7 @@ exports[`Select > renders with item-label slot correctly 1`] = `
<!--teleport end-->
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1">
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1" value="">
<!---->
<option value="backlog">Item label slot</option>
<option value="todo">Item label slot</option>
@@ -741,7 +741,7 @@ exports[`Select > renders with item-leading slot correctly 1`] = `
<!--teleport end-->
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1">
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1" value="">
<!---->
<option value="backlog">Backlog</option>
<option value="todo">Todo</option>
@@ -801,7 +801,7 @@ exports[`Select > renders with item-trailing slot correctly 1`] = `
<!--teleport end-->
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1">
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1" value="">
<!---->
<option value="backlog">Backlog</option>
<option value="todo">Todo</option>
@@ -861,7 +861,7 @@ exports[`Select > renders with items correctly 1`] = `
<!--teleport end-->
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1">
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1" value="">
<!---->
<option value="backlog">Backlog</option>
<option value="todo">Todo</option>
@@ -919,7 +919,7 @@ exports[`Select > renders with leading and icon correctly 1`] = `
<!--teleport end-->
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1">
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1" value="">
<!---->
<option value="backlog">Backlog</option>
<option value="todo">Todo</option>
@@ -977,7 +977,7 @@ exports[`Select > renders with leading slot correctly 1`] = `
<!--teleport end-->
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1">
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1" value="">
<!---->
<option value="backlog">Backlog</option>
<option value="todo">Todo</option>
@@ -1035,7 +1035,7 @@ exports[`Select > renders with leadingIcon correctly 1`] = `
<!--teleport end-->
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1">
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1" value="">
<!---->
<option value="backlog">Backlog</option>
<option value="todo">Todo</option>
@@ -1093,7 +1093,7 @@ exports[`Select > renders with loading correctly 1`] = `
<!--teleport end-->
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1">
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1" value="">
<!---->
<option value="backlog">Backlog</option>
<option value="todo">Todo</option>
@@ -1151,7 +1151,7 @@ exports[`Select > renders with loadingIcon correctly 1`] = `
<!--teleport end-->
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1">
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1" value="">
<!---->
<option value="backlog">Backlog</option>
<option value="todo">Todo</option>
@@ -1211,7 +1211,7 @@ exports[`Select > renders with modelValue correctly 1`] = `
<!--teleport end-->
<select default-value="[object Object]" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1">
<select default-value="[object Object]" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1" value="[object Object]">
<!---->
<option value="backlog">Backlog</option>
<option value="todo">Todo</option>
@@ -1271,7 +1271,7 @@ exports[`Select > renders with name correctly 1`] = `
<!--teleport end-->
<select name="name" default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1">
<select name="name" default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1" value="">
<!---->
<option value="backlog">Backlog</option>
<option value="todo">Todo</option>
@@ -1331,7 +1331,7 @@ exports[`Select > renders with placeholder correctly 1`] = `
<!--teleport end-->
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1">
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1" value="">
<!---->
<option value="backlog">Backlog</option>
<option value="todo">Todo</option>
@@ -1391,7 +1391,7 @@ exports[`Select > renders with required correctly 1`] = `
<!--teleport end-->
<select required="" default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1">
<select required="" default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1" value="">
<!---->
<option value="backlog">Backlog</option>
<option value="todo">Todo</option>
@@ -1451,7 +1451,7 @@ exports[`Select > renders with size lg correctly 1`] = `
<!--teleport end-->
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1">
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1" value="">
<!---->
<option value="backlog">Backlog</option>
<option value="todo">Todo</option>
@@ -1511,7 +1511,7 @@ exports[`Select > renders with size md correctly 1`] = `
<!--teleport end-->
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1">
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1" value="">
<!---->
<option value="backlog">Backlog</option>
<option value="todo">Todo</option>
@@ -1571,7 +1571,7 @@ exports[`Select > renders with size sm correctly 1`] = `
<!--teleport end-->
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1">
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1" value="">
<!---->
<option value="backlog">Backlog</option>
<option value="todo">Todo</option>
@@ -1631,7 +1631,7 @@ exports[`Select > renders with size xl correctly 1`] = `
<!--teleport end-->
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1">
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1" value="">
<!---->
<option value="backlog">Backlog</option>
<option value="todo">Todo</option>
@@ -1691,7 +1691,7 @@ exports[`Select > renders with size xs correctly 1`] = `
<!--teleport end-->
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1">
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1" value="">
<!---->
<option value="backlog">Backlog</option>
<option value="todo">Todo</option>
@@ -1751,7 +1751,7 @@ exports[`Select > renders with trailing and icon correctly 1`] = `
<!--teleport end-->
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1">
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1" value="">
<!---->
<option value="backlog">Backlog</option>
<option value="todo">Todo</option>
@@ -1811,7 +1811,7 @@ exports[`Select > renders with trailing slot correctly 1`] = `
<!--teleport end-->
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1">
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1" value="">
<!---->
<option value="backlog">Backlog</option>
<option value="todo">Todo</option>
@@ -1871,7 +1871,7 @@ exports[`Select > renders with trailingIcon correctly 1`] = `
<!--teleport end-->
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1">
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1" value="">
<!---->
<option value="backlog">Backlog</option>
<option value="todo">Todo</option>
@@ -1931,7 +1931,7 @@ exports[`Select > renders with ui correctly 1`] = `
<!--teleport end-->
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1">
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1" value="">
<!---->
<option value="backlog">Backlog</option>
<option value="todo">Todo</option>
@@ -1991,7 +1991,7 @@ exports[`Select > renders with variant none correctly 1`] = `
<!--teleport end-->
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1">
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1" value="">
<!---->
<option value="backlog">Backlog</option>
<option value="todo">Todo</option>
@@ -2051,7 +2051,7 @@ exports[`Select > renders with variant outline correctly 1`] = `
<!--teleport end-->
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1">
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="-1" value="">
<!---->
<option value="backlog">Backlog</option>
<option value="todo">Todo</option>

622
test/components/__snapshots__/SelectMenu.spec.ts.snap
View File

File diff suppressed because it is too large Load Diff