mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
229 lines
25 KiB
Plaintext
229 lines
25 KiB
Plaintext
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
|
|
|
exports[`Switch > renders with as correctly 1`] = `
|
|
"<section class="relative flex items-start">
|
|
<div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)] w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
|
|
<!---->
|
|
</button></div>
|
|
<!--v-if-->
|
|
</section>"
|
|
`;
|
|
|
|
exports[`Switch > renders with checkedIcon correctly 1`] = `
|
|
"<div class="relative flex items-start">
|
|
<div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)] w-9" id="v-0-0" role="switch" type="button" aria-checked="true" aria-required="false" data-state="checked" value="on"><span data-state="checked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"><span class="iconify i-lucide:check absolute shrink-0 group-data-[state=unchecked]:text-[var(--ui-text-dimmed)] opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-[var(--ui-primary)] group-data-[state=checked]:opacity-100" aria-hidden="true"></span>
|
|
<!--v-if--></span>
|
|
<!---->
|
|
</button></div>
|
|
<!--v-if-->
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Switch > renders with class correctly 1`] = `
|
|
"<div class="relative items-start inline-flex">
|
|
<div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)] w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
|
|
<!---->
|
|
</button></div>
|
|
<!--v-if-->
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Switch > renders with color neutral correctly 1`] = `
|
|
"<div class="relative flex items-start">
|
|
<div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-bg-inverted)] focus-visible:outline-[var(--ui-border-inverted)] w-9" id="v-0-0" role="switch" type="button" aria-checked="true" aria-required="false" data-state="checked" value="on"><span data-state="checked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
|
|
<!---->
|
|
</button></div>
|
|
<!--v-if-->
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Switch > renders with defaultValue correctly 1`] = `
|
|
"<div class="relative flex items-start">
|
|
<div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)] w-9" id="v-0-0" role="switch" type="button" aria-checked="true" aria-required="false" data-state="checked" value="on"><span data-state="checked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
|
|
<!---->
|
|
</button></div>
|
|
<!--v-if-->
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Switch > renders with description correctly 1`] = `
|
|
"<div class="relative flex items-start">
|
|
<div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)] w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2 text-sm"><label for="v-0-0" class="block font-medium text-[var(--ui-text)]">Label</label>
|
|
<p class="text-[var(--ui-text-muted)]">Description</p>
|
|
</div>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Switch > renders with description slot correctly 1`] = `
|
|
"<div class="relative flex items-start">
|
|
<div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)] w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2 text-sm"><label for="v-0-0" class="block font-medium text-[var(--ui-text)]">Description slot</label>
|
|
<!--v-if-->
|
|
</div>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Switch > renders with disabled correctly 1`] = `
|
|
"<div class="relative flex items-start">
|
|
<div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)] w-9 cursor-not-allowed opacity-75" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" value="on"><span data-state="unchecked" data-disabled="" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
|
|
<!---->
|
|
</button></div>
|
|
<!--v-if-->
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Switch > renders with id correctly 1`] = `
|
|
"<div class="relative flex items-start">
|
|
<div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)] w-9" id="id" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
|
|
<!---->
|
|
</button></div>
|
|
<!--v-if-->
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Switch > renders with label correctly 1`] = `
|
|
"<div class="relative flex items-start">
|
|
<div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)] w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2 text-sm"><label for="v-0-0" class="block font-medium text-[var(--ui-text)]">Label</label>
|
|
<!--v-if-->
|
|
</div>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Switch > renders with label slot correctly 1`] = `
|
|
"<div class="relative flex items-start">
|
|
<div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)] w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2 text-sm"><label for="v-0-0" class="block font-medium text-[var(--ui-text)]">Label slot</label>
|
|
<!--v-if-->
|
|
</div>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Switch > renders with loading correctly 1`] = `
|
|
"<div class="relative flex items-start">
|
|
<div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)] w-9 cursor-not-allowed opacity-75" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" value="on"><span data-state="unchecked" data-disabled="" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"><span class="iconify i-lucide:refresh-cw absolute shrink-0 group-data-[state=unchecked]:text-[var(--ui-text-dimmed)] opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-[var(--ui-primary)] group-data-[state=checked]:opacity-100 group-data-[state=unchecked]:opacity-100 animate-spin" aria-hidden="true"></span></span>
|
|
<!---->
|
|
</button></div>
|
|
<!--v-if-->
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Switch > renders with loadingIcon correctly 1`] = `
|
|
"<div class="relative flex items-start">
|
|
<div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)] w-9 cursor-not-allowed opacity-75" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" value="on"><span data-state="unchecked" data-disabled="" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"><span class="iconify i-lucide:sparkles absolute shrink-0 group-data-[state=unchecked]:text-[var(--ui-text-dimmed)] opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-[var(--ui-primary)] group-data-[state=checked]:opacity-100 group-data-[state=unchecked]:opacity-100 animate-spin" aria-hidden="true"></span></span>
|
|
<!---->
|
|
</button></div>
|
|
<!--v-if-->
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Switch > renders with modelValue correctly 1`] = `
|
|
"<div class="relative flex items-start">
|
|
<div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)] w-9" id="v-0-0" role="switch" type="button" aria-checked="true" aria-required="false" data-state="checked" value="on"><span data-state="checked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
|
|
<!---->
|
|
</button></div>
|
|
<!--v-if-->
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Switch > renders with name correctly 1`] = `
|
|
"<div class="relative flex items-start">
|
|
<div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)] w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
|
|
<!---->
|
|
</button></div>
|
|
<!--v-if-->
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Switch > renders with required correctly 1`] = `
|
|
"<div class="relative flex items-start">
|
|
<div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)] w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="true" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
|
|
<!---->
|
|
</button></div>
|
|
<div class="ms-2 text-sm"><label for="v-0-0" class="block font-medium text-[var(--ui-text)] after:content-['*'] after:ms-0.5 after:text-[var(--ui-error)]">Label</label>
|
|
<!--v-if-->
|
|
</div>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Switch > renders with size lg correctly 1`] = `
|
|
"<div class="relative flex items-start">
|
|
<div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)] w-10" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4.5 data-[state=checked]:translate-x-4.5 data-[state=checked]:rtl:-translate-x-4.5"></span>
|
|
<!---->
|
|
</button></div>
|
|
<!--v-if-->
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Switch > renders with size md correctly 1`] = `
|
|
"<div class="relative flex items-start">
|
|
<div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)] w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
|
|
<!---->
|
|
</button></div>
|
|
<!--v-if-->
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Switch > renders with size sm correctly 1`] = `
|
|
"<div class="relative flex items-start">
|
|
<div class="flex items-center h-4"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)] w-8" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-3.5 data-[state=checked]:translate-x-3.5 data-[state=checked]:rtl:-translate-x-3.5"></span>
|
|
<!---->
|
|
</button></div>
|
|
<!--v-if-->
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Switch > renders with size xl correctly 1`] = `
|
|
"<div class="relative flex items-start">
|
|
<div class="flex items-center h-6"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)] w-11" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-5 data-[state=checked]:translate-x-5 data-[state=checked]:rtl:-translate-x-5"></span>
|
|
<!---->
|
|
</button></div>
|
|
<!--v-if-->
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Switch > renders with size xs correctly 1`] = `
|
|
"<div class="relative flex items-start">
|
|
<div class="flex items-center h-4"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)] w-7" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-3 data-[state=checked]:translate-x-3 data-[state=checked]:rtl:-translate-x-3"></span>
|
|
<!---->
|
|
</button></div>
|
|
<!--v-if-->
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Switch > renders with ui correctly 1`] = `
|
|
"<div class="relative flex items-start">
|
|
<div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)] w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
|
|
<!---->
|
|
</button></div>
|
|
<!--v-if-->
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Switch > renders with uncheckedIcon correctly 1`] = `
|
|
"<div class="relative flex items-start">
|
|
<div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)] w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"><!--v-if--><span class="iconify i-lucide:x absolute shrink-0 group-data-[state=unchecked]:text-[var(--ui-text-dimmed)] opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-[var(--ui-primary)] group-data-[state=unchecked]:opacity-100" aria-hidden="true"></span></span>
|
|
<!---->
|
|
</button></div>
|
|
<!--v-if-->
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Switch > renders with value correctly 1`] = `
|
|
"<div class="relative flex items-start">
|
|
<div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)] w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="value"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
|
|
<!---->
|
|
</button></div>
|
|
<!--v-if-->
|
|
</div>"
|
|
`;
|