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

feat(module): implement --ui-radius CSS variable (#2341)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Sandro Circi
2024-10-09 14:28:29 +02:00
committed by GitHub
parent 68ee3f11ca
commit 057e86cfda
60 changed files with 2406 additions and 2292 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,7 +8,7 @@ exports[`Form > custom validation works > with error 1`] = `
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" autocomplete="off" value="bob@dylan.com">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" autocomplete="off" value="bob@dylan.com">
<!--v-if-->
<!--v-if-->
</div>
@@ -21,7 +21,7 @@ exports[`Form > custom validation works > with error 1`] = `
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-md border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-error] ring ring-inset ring-[--ui-error]" value="short">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-error] ring ring-inset ring-[--ui-error]" value="short">
<!--v-if-->
<!--v-if-->
</div>
@@ -39,7 +39,7 @@ exports[`Form > custom validation works > without error 1`] = `
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" autocomplete="off" value="bob@dylan.com">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" autocomplete="off" value="bob@dylan.com">
<!--v-if-->
<!--v-if-->
</div>
@@ -52,7 +52,7 @@ exports[`Form > custom validation works > without error 1`] = `
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-md border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" value="validpassword">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" value="validpassword">
<!--v-if-->
<!--v-if-->
</div>
@@ -70,7 +70,7 @@ exports[`Form > joi validation works > with error 1`] = `
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" autocomplete="off" value="bob@dylan.com">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" autocomplete="off" value="bob@dylan.com">
<!--v-if-->
<!--v-if-->
</div>
@@ -83,7 +83,7 @@ exports[`Form > joi validation works > with error 1`] = `
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-md border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-error] ring ring-inset ring-[--ui-error]" value="short">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-error] ring ring-inset ring-[--ui-error]" value="short">
<!--v-if-->
<!--v-if-->
</div>
@@ -101,7 +101,7 @@ exports[`Form > joi validation works > without error 1`] = `
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" autocomplete="off" value="bob@dylan.com">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" autocomplete="off" value="bob@dylan.com">
<!--v-if-->
<!--v-if-->
</div>
@@ -114,7 +114,7 @@ exports[`Form > joi validation works > without error 1`] = `
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-md border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" value="validpassword">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" value="validpassword">
<!--v-if-->
<!--v-if-->
</div>
@@ -136,7 +136,7 @@ exports[`Form > valibot safeParser validation works > with error 1`] = `
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" autocomplete="off" value="bob@dylan.com">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" autocomplete="off" value="bob@dylan.com">
<!--v-if-->
<!--v-if-->
</div>
@@ -149,7 +149,7 @@ exports[`Form > valibot safeParser validation works > with error 1`] = `
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-md border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-error] ring ring-inset ring-[--ui-error]" value="short">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-error] ring ring-inset ring-[--ui-error]" value="short">
<!--v-if-->
<!--v-if-->
</div>
@@ -167,7 +167,7 @@ exports[`Form > valibot safeParser validation works > without error 1`] = `
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" autocomplete="off" value="bob@dylan.com">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" autocomplete="off" value="bob@dylan.com">
<!--v-if-->
<!--v-if-->
</div>
@@ -180,7 +180,7 @@ exports[`Form > valibot safeParser validation works > without error 1`] = `
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-md border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" value="validpassword">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" value="validpassword">
<!--v-if-->
<!--v-if-->
</div>
@@ -198,7 +198,7 @@ exports[`Form > valibot validation works > with error 1`] = `
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" autocomplete="off" value="bob@dylan.com">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" autocomplete="off" value="bob@dylan.com">
<!--v-if-->
<!--v-if-->
</div>
@@ -211,7 +211,7 @@ exports[`Form > valibot validation works > with error 1`] = `
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-md border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-error] ring ring-inset ring-[--ui-error]" value="short">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-error] ring ring-inset ring-[--ui-error]" value="short">
<!--v-if-->
<!--v-if-->
</div>
@@ -229,7 +229,7 @@ exports[`Form > valibot validation works > without error 1`] = `
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" autocomplete="off" value="bob@dylan.com">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" autocomplete="off" value="bob@dylan.com">
<!--v-if-->
<!--v-if-->
</div>
@@ -242,7 +242,7 @@ exports[`Form > valibot validation works > without error 1`] = `
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-md border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" value="validpassword">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" value="validpassword">
<!--v-if-->
<!--v-if-->
</div>
@@ -260,7 +260,7 @@ exports[`Form > yup validation works > with error 1`] = `
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" autocomplete="off" value="bob@dylan.com">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" autocomplete="off" value="bob@dylan.com">
<!--v-if-->
<!--v-if-->
</div>
@@ -273,7 +273,7 @@ exports[`Form > yup validation works > with error 1`] = `
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-md border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-error] ring ring-inset ring-[--ui-error]" value="short">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-error] ring ring-inset ring-[--ui-error]" value="short">
<!--v-if-->
<!--v-if-->
</div>
@@ -291,7 +291,7 @@ exports[`Form > yup validation works > without error 1`] = `
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" autocomplete="off" value="bob@dylan.com">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" autocomplete="off" value="bob@dylan.com">
<!--v-if-->
<!--v-if-->
</div>
@@ -304,7 +304,7 @@ exports[`Form > yup validation works > without error 1`] = `
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-md border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" value="validpassword">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" value="validpassword">
<!--v-if-->
<!--v-if-->
</div>
@@ -322,7 +322,7 @@ exports[`Form > zod validation works > with error 1`] = `
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" autocomplete="off" value="bob@dylan.com">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" autocomplete="off" value="bob@dylan.com">
<!--v-if-->
<!--v-if-->
</div>
@@ -335,7 +335,7 @@ exports[`Form > zod validation works > with error 1`] = `
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-md border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-error] ring ring-inset ring-[--ui-error]" value="short">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-error] ring ring-inset ring-[--ui-error]" value="short">
<!--v-if-->
<!--v-if-->
</div>
@@ -353,7 +353,7 @@ exports[`Form > zod validation works > without error 1`] = `
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" autocomplete="off" value="bob@dylan.com">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" autocomplete="off" value="bob@dylan.com">
<!--v-if-->
<!--v-if-->
</div>
@@ -366,7 +366,7 @@ exports[`Form > zod validation works > without error 1`] = `
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-md border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" value="validpassword">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" value="validpassword">
<!--v-if-->
<!--v-if-->
</div>