ui/test/components/__snapshots__/RadioGroup.spec.ts.snap

// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`RadioGroup > renders with class correctly 1`] = `
"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="13" 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" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="13:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="13: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" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="13:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="13: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" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="13:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="13: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 green correctly 1`] = `
"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="11" 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-green-500 dark:focus-visible:outline-green-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="11:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="11: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-green-500 dark:focus-visible:outline-green-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="11:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="11: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-green-500 dark:focus-visible:outline-green-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="11:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="11: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 primary correctly 1`] = `
"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="10" 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" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="10:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="10: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" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="10:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="10: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" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="10:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="10: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 red correctly 1`] = `
"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="12" 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-red-500 dark:focus-visible:outline-red-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="12:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="12: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-red-500 dark:focus-visible:outline-red-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="12:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="12: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-red-500 dark:focus-visible:outline-red-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="12:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="12: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 defaultValue correctly 1`] = `
"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="1" 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" data-radix-vue-collection-item="" tabindex="-1" 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>
          <!---->
        </button></div>
      <div class="ms-2"><label for="1: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" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="1:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="1: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" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="1:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="1: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-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="3" 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" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="3:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="3: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" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="3:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="3: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" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="3:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="3: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-required="false" dir="ltr" tabindex="-1" style="outline-color: none; outline-style: none; outline-width: initial;" id="17" class="relative">
  <fieldset class="flex flex-col gap-1">
    <!--v-if-->
  </fieldset>
</div>"
`;

exports[`RadioGroup > renders with disabled correctly 1`] = `
"<div role="radiogroup" data-disabled="" required="false" aria-required="false" dir="ltr" tabindex="-1" style="outline-color: none; outline-style: none; outline-width: initial;" id="2" 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" data-radix-vue-collection-item="" tabindex="-1" 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">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="2: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" data-radix-vue-collection-item="" tabindex="-1" 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">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="2: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" data-radix-vue-collection-item="" tabindex="-1" 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">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="2: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 label slot correctly 1`] = `
"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="16" 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" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="16:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="16: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" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="16:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="16: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" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="16:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="16: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-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="15" 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" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="15:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="15: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" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="15:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="15: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" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="15:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="15: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 options correctly 1`] = `
"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="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" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="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" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="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" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="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-required="true" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="4" 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 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-active="false" id="4:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" value="1" aria-label="1">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="4: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" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="4:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="4: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" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="4:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="4: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-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="8" 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" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="8:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="8: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" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="8:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="8: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" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="8:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="8: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-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="7" 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" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="7:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="7: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" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="7:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="7: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" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="7:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="7: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-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="6" 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" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="6:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="6: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" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="6:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="6: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" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="6:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="6: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-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="9" 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" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="9:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="9: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" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="9:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="9: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" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="9:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="9: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-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="5" 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" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="5:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="5: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" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="5:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="5: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" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="5:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
          <!---->
          <!---->
        </button></div>
      <div class="ms-2"><label for="5: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-required="false" dir="ltr" tabindex="-1" style="outline-color: none; outline-style: none; outline-width: initial;" id="14" class="relative">
  <fieldset class="flex flex-col gap-1">
    <!--v-if-->
  </fieldset>
</div>"
`;