mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-23 00:15:05 +01:00
235f1cc330
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Benjamin Canac <canacb1@gmail.com>
569 lines
42 KiB
Plaintext
569 lines
42 KiB
Plaintext
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
|
|
|
exports[`RadioGroup > renders with class correctly 1`] = `
|
|
"<div role="radiogroup" required="false" aria-orientation="vertical" aria-required="false" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="absolute" tabindex="0">
|
|
<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" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2"><label for="v-0-0:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
|
|
<!--v-if-->
|
|
</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" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2"><label for="v-0-0:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
|
|
<!--v-if-->
|
|
</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" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2"><label for="v-0-0:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`RadioGroup > renders with color gray correctly 1`] = `
|
|
"<div role="radiogroup" required="false" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
|
|
<fieldset class="flex flex-col gap-1">
|
|
<!--v-if-->
|
|
</fieldset>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`RadioGroup > renders with defaultValue correctly 1`] = `
|
|
"<div role="radiogroup" required="false" aria-orientation="vertical" aria-required="false" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative" tabindex="0">
|
|
<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" tabindex="-1" data-orientation="vertical" data-active="true" data-radix-vue-collection-item="" id="v-0-0: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="v-0-0:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
|
|
<!--v-if-->
|
|
</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" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2"><label for="v-0-0:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
|
|
<!--v-if-->
|
|
</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" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2"><label for="v-0-0:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`RadioGroup > renders with description correctly 1`] = `
|
|
"<div role="radiogroup" required="false" aria-orientation="vertical" aria-required="false" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative" tabindex="0">
|
|
<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" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2"><label for="v-0-0:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
|
|
<p class="text-gray-500 dark:text-gray-400">Description 0</p>
|
|
</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" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2"><label for="v-0-0:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
|
|
<p class="text-gray-500 dark:text-gray-400">Description 1</p>
|
|
</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" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2"><label for="v-0-0:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
|
|
<p class="text-gray-500 dark:text-gray-400">Description 2</p>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`RadioGroup > renders with description slot correctly 1`] = `
|
|
"<div role="radiogroup" required="false" aria-orientation="vertical" aria-required="false" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative" tabindex="0">
|
|
<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" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2"><label for="v-0-0:1" class="block font-medium text-gray-700 dark:text-gray-200">Description slot</label>
|
|
<!--v-if-->
|
|
</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" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2"><label for="v-0-0:2" class="block font-medium text-gray-700 dark:text-gray-200">Description slot</label>
|
|
<!--v-if-->
|
|
</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" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2"><label for="v-0-0:3" class="block font-medium text-gray-700 dark:text-gray-200">Description slot</label>
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`RadioGroup > renders with disabled correctly 1`] = `
|
|
"<div role="radiogroup" data-disabled="" required="false" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
|
|
<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" tabindex="-1" data-orientation="vertical" data-active="false" data-disabled="" data-radix-vue-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" aria-label="1" value="1">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2"><label for="v-0-0:1" class="block font-medium text-gray-700 dark:text-gray-200 cursor-not-allowed opacity-75">Option 1</label>
|
|
<!--v-if-->
|
|
</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" tabindex="-1" data-orientation="vertical" data-active="false" data-disabled="" data-radix-vue-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" aria-label="2" value="2">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2"><label for="v-0-0:2" class="block font-medium text-gray-700 dark:text-gray-200 cursor-not-allowed opacity-75">Option 2</label>
|
|
<!--v-if-->
|
|
</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" tabindex="-1" data-orientation="vertical" data-active="false" data-disabled="" data-radix-vue-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" aria-label="3" value="3">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2"><label for="v-0-0:3" class="block font-medium text-gray-700 dark:text-gray-200 cursor-not-allowed opacity-75">Option 3</label>
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`RadioGroup > renders with items correctly 1`] = `
|
|
"<div role="radiogroup" required="false" aria-orientation="vertical" aria-required="false" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative" tabindex="0">
|
|
<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" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2"><label for="v-0-0:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
|
|
<!--v-if-->
|
|
</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" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2"><label for="v-0-0:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
|
|
<!--v-if-->
|
|
</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" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2"><label for="v-0-0:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`RadioGroup > renders with label slot correctly 1`] = `
|
|
"<div role="radiogroup" required="false" aria-orientation="vertical" aria-required="false" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative" tabindex="0">
|
|
<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" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2"><label for="v-0-0:1" class="block font-medium text-gray-700 dark:text-gray-200">Label slot</label>
|
|
<!--v-if-->
|
|
</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" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2"><label for="v-0-0:2" class="block font-medium text-gray-700 dark:text-gray-200">Label slot</label>
|
|
<!--v-if-->
|
|
</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" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2"><label for="v-0-0:3" class="block font-medium text-gray-700 dark:text-gray-200">Label slot</label>
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`RadioGroup > renders with legend slot correctly 1`] = `
|
|
"<div role="radiogroup" required="false" aria-orientation="vertical" aria-required="false" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative" tabindex="0">
|
|
<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" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2"><label for="v-0-0:1" class="block font-medium text-gray-700 dark:text-gray-200">Legend slot</label>
|
|
<!--v-if-->
|
|
</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" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2"><label for="v-0-0:2" class="block font-medium text-gray-700 dark:text-gray-200">Legend slot</label>
|
|
<!--v-if-->
|
|
</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" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2"><label for="v-0-0:3" class="block font-medium text-gray-700 dark:text-gray-200">Legend slot</label>
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`RadioGroup > renders with orientation correctly 1`] = `
|
|
"<div role="radiogroup" required="false" aria-orientation="horizontal" aria-required="false" dir="ltr" data-orientation="horizontal" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative" tabindex="0">
|
|
<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" tabindex="-1" data-orientation="horizontal" data-active="false" data-radix-vue-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2 me-2"><label for="v-0-0:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
|
|
<!--v-if-->
|
|
</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" tabindex="-1" data-orientation="horizontal" data-active="false" data-radix-vue-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2 me-2"><label for="v-0-0:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
|
|
<!--v-if-->
|
|
</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" tabindex="-1" data-orientation="horizontal" data-active="false" data-radix-vue-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2 me-2"><label for="v-0-0:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`RadioGroup > renders with required correctly 1`] = `
|
|
"<div role="radiogroup" required="true" aria-orientation="vertical" aria-required="true" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative" tabindex="0">
|
|
<fieldset class="flex flex-col gap-1">
|
|
<legend class="mb-1 block font-medium text-gray-700 dark:text-gray-200 text-sm after:content-['*'] after:ms-0.5 after:text-error-500 dark:after:text-error-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" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" aria-label="1" value="1">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2"><label for="v-0-0:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
|
|
<!--v-if-->
|
|
</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" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" aria-label="2" value="2">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2"><label for="v-0-0:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
|
|
<!--v-if-->
|
|
</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" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" aria-label="3" value="3">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2"><label for="v-0-0:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`RadioGroup > renders with size lg correctly 1`] = `
|
|
"<div role="radiogroup" required="false" aria-orientation="vertical" aria-required="false" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative" tabindex="0">
|
|
<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" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2"><label for="v-0-0:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
|
|
<!--v-if-->
|
|
</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" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2"><label for="v-0-0:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
|
|
<!--v-if-->
|
|
</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" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2"><label for="v-0-0:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`RadioGroup > renders with size md correctly 1`] = `
|
|
"<div role="radiogroup" required="false" aria-orientation="vertical" aria-required="false" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative" tabindex="0">
|
|
<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" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2"><label for="v-0-0:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
|
|
<!--v-if-->
|
|
</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" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2"><label for="v-0-0:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
|
|
<!--v-if-->
|
|
</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" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2"><label for="v-0-0:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`RadioGroup > renders with size sm correctly 1`] = `
|
|
"<div role="radiogroup" required="false" aria-orientation="vertical" aria-required="false" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative" tabindex="0">
|
|
<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" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2"><label for="v-0-0:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
|
|
<!--v-if-->
|
|
</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" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2"><label for="v-0-0:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
|
|
<!--v-if-->
|
|
</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" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2"><label for="v-0-0:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`RadioGroup > renders with size xl correctly 1`] = `
|
|
"<div role="radiogroup" required="false" aria-orientation="vertical" aria-required="false" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative" tabindex="0">
|
|
<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" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2"><label for="v-0-0:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
|
|
<!--v-if-->
|
|
</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" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2"><label for="v-0-0:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
|
|
<!--v-if-->
|
|
</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" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2"><label for="v-0-0:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`RadioGroup > renders with size xs correctly 1`] = `
|
|
"<div role="radiogroup" required="false" aria-orientation="vertical" aria-required="false" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative" tabindex="0">
|
|
<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" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2"><label for="v-0-0:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
|
|
<!--v-if-->
|
|
</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" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2"><label for="v-0-0:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
|
|
<!--v-if-->
|
|
</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" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2"><label for="v-0-0:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`RadioGroup > renders with ui correctly 1`] = `
|
|
"<div role="radiogroup" required="false" aria-orientation="vertical" aria-required="false" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative" tabindex="0">
|
|
<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" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-4"><label for="v-0-0:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
|
|
<!--v-if-->
|
|
</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" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-4"><label for="v-0-0:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
|
|
<!--v-if-->
|
|
</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" tabindex="-1" data-orientation="vertical" data-active="false" data-radix-vue-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-4"><label for="v-0-0:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>"
|
|
`;
|