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

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

exports[`Checkbox > renders with ariaLabel correctly 1`] = `
"<div class="relative flex items-start">
  <div class="flex items-center h-5"><button aria-label="Aria label" class="shrink-0 flex items-center justify-center rounded-sm text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
</div>"
`;

exports[`Checkbox > renders with as correctly 1`] = `
"<section class="relative flex items-start">
  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
</section>"
`;

exports[`Checkbox > renders with class correctly 1`] = `
"<div class="relative items-start inline-flex">
  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
</div>"
`;

exports[`Checkbox > renders with color neutral correctly 1`] = `
"<div class="relative flex items-start">
  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-(--ui-bg) ring-inset focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-border-inverted) size-4 ring-2 ring-(--ui-border-inverted) bg-(--ui-bg-inverted)" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" style="pointer-events: none;" data-state="checked"></span>
      <!---->
    </button></div>
  <!--v-if-->
</div>"
`;

exports[`Checkbox > renders with defaultValue correctly 1`] = `
"<div class="relative flex items-start">
  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-(--ui-bg) ring-inset focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4 ring-2 ring-(--ui-primary) bg-(--ui-primary)" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" style="pointer-events: none;" data-state="checked"></span>
      <!---->
    </button></div>
  <!--v-if-->
</div>"
`;

exports[`Checkbox > renders with description correctly 1`] = `
"<div class="relative flex items-start">
  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
      <!---->
      <!---->
    </button></div>
  <div class="ms-2 text-sm"><label for="v-0-0" class="block font-medium text-(--ui-text)">Label</label>
    <p class="text-(--ui-text-muted)">Description</p>
  </div>
</div>"
`;

exports[`Checkbox > renders with description slot correctly 1`] = `
"<div class="relative flex items-start">
  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
      <!---->
      <!---->
    </button></div>
  <div class="ms-2 text-sm"><label for="v-0-0" class="block font-medium text-(--ui-text)">Description slot</label>
    <!--v-if-->
  </div>
</div>"
`;

exports[`Checkbox > renders with disabled correctly 1`] = `
"<div class="relative flex items-start">
  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4 cursor-not-allowed opacity-75" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
</div>"
`;

exports[`Checkbox > renders with icon correctly 1`] = `
"<div class="relative flex items-start">
  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
</div>"
`;

exports[`Checkbox > renders with id correctly 1`] = `
"<div class="relative flex items-start">
  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" id="id" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
</div>"
`;

exports[`Checkbox > renders with indeterminate correctly 1`] = `
"<div class="relative flex items-start">
  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-(--ui-bg) ring-inset focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4 ring-2 ring-(--ui-primary) bg-(--ui-primary)" id="v-0-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span class="iconify i-lucide:minus shrink-0 size-full" aria-hidden="true" style="pointer-events: none;" data-state="indeterminate"></span>
      <!---->
    </button></div>
  <!--v-if-->
</div>"
`;

exports[`Checkbox > renders with indeterminateIcon correctly 1`] = `
"<div class="relative flex items-start">
  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-(--ui-bg) ring-inset focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4 ring-2 ring-(--ui-primary) bg-(--ui-primary)" id="v-0-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span class="iconify i-lucide:trash shrink-0 size-full" aria-hidden="true" style="pointer-events: none;" data-state="indeterminate"></span>
      <!---->
    </button></div>
  <!--v-if-->
</div>"
`;

exports[`Checkbox > renders with label correctly 1`] = `
"<div class="relative flex items-start">
  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
      <!---->
      <!---->
    </button></div>
  <div class="ms-2 text-sm"><label for="v-0-0" class="block font-medium text-(--ui-text)">Label</label>
    <!--v-if-->
  </div>
</div>"
`;

exports[`Checkbox > renders with label slot correctly 1`] = `
"<div class="relative flex items-start">
  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
      <!---->
      <!---->
    </button></div>
  <div class="ms-2 text-sm"><label for="v-0-0" class="block font-medium text-(--ui-text)">Label slot</label>
    <!--v-if-->
  </div>
</div>"
`;

exports[`Checkbox > renders with modelValue correctly 1`] = `
"<div class="relative flex items-start">
  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-(--ui-bg) ring-inset focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4 ring-2 ring-(--ui-primary) bg-(--ui-primary)" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" style="pointer-events: none;" data-state="checked"></span>
      <!---->
    </button></div>
  <!--v-if-->
</div>"
`;

exports[`Checkbox > renders with name correctly 1`] = `
"<div class="relative flex items-start">
  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
</div>"
`;

exports[`Checkbox > renders with required correctly 1`] = `
"<div class="relative flex items-start">
  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="true" data-state="unchecked">
      <!---->
      <!---->
    </button></div>
  <div class="ms-2 text-sm"><label for="v-0-0" class="block font-medium text-(--ui-text) after:content-['*'] after:ms-0.5 after:text-(--ui-error)">Label</label>
    <!--v-if-->
  </div>
</div>"
`;

exports[`Checkbox > renders with size lg correctly 1`] = `
"<div class="relative flex items-start">
  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4.5" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
</div>"
`;

exports[`Checkbox > renders with size md correctly 1`] = `
"<div class="relative flex items-start">
  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
</div>"
`;

exports[`Checkbox > renders with size sm correctly 1`] = `
"<div class="relative flex items-start">
  <div class="flex items-center h-4"><button class="shrink-0 flex items-center justify-center rounded-sm text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-3.5" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
</div>"
`;

exports[`Checkbox > renders with size xl correctly 1`] = `
"<div class="relative flex items-start">
  <div class="flex items-center h-6"><button class="shrink-0 flex items-center justify-center rounded-sm text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-5" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
</div>"
`;

exports[`Checkbox > renders with size xs correctly 1`] = `
"<div class="relative flex items-start">
  <div class="flex items-center h-4"><button class="shrink-0 flex items-center justify-center rounded-sm text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-3" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
</div>"
`;

exports[`Checkbox > renders with ui correctly 1`] = `
"<div class="relative flex items-start">
  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
</div>"
`;

exports[`Checkbox > renders with value correctly 1`] = `
"<div class="relative flex items-start">
  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-sm text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
</div>"
`;