arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 20:19:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore(module): update theming

Browse Source
This commit is contained in:
Benjamin Canac
2024-03-07 15:33:53 +01:00
parent 0d1e17ef74
commit c79e6f188d
12 changed files with 231 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
test/components/__snapshots__/Button.spec.ts.snap
View File

@@ -1,37 +1,37 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Button > renders with block correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 px-2.5 py-1.5 text-sm gap-x-1.5 w-full justify-center shadow-sm text-white dark:text-gray-900 bg-[--color-current-500] hover:bg-[--color-current-600] disabled:bg-[--color-current-500] dark:bg-[--color-current-400] dark:hover:bg-[--color-current-500] dark:disabled:bg-[--color-current-400] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--color-current-500] dark:focus-visible:outline-[--color-current-400]">
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 px-2.5 py-1.5 text-sm gap-x-1.5 w-full justify-center shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
<!--v-if--><span class="">Button</span>
<!--v-if-->
</button>"
`;
exports[`Button > renders with class correctly 1`] = `"<button type="button" class="inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-[--color-current-500] hover:bg-[--color-current-600] disabled:bg-[--color-current-500] dark:bg-[--color-current-400] dark:hover:bg-[--color-current-500] dark:disabled:bg-[--color-current-400] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--color-current-500] dark:focus-visible:outline-[--color-current-400] p-1 rounded-full font-bold"></button>"`;
exports[`Button > renders with class correctly 1`] = `"<button type="button" class="inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1 rounded-full font-bold"></button>"`;
exports[`Button > renders with color correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 shrink-0 px-2.5 py-1.5 text-sm gap-x-1.5" style="--color-current-50: var(--color-red-50); --color-current-100: var(--color-red-100); --color-current-200: var(--color-red-200); --color-current-300: var(--color-red-300); --color-current-400: var(--color-red-400); --color-current-500: var(--color-red-500); --color-current-600: var(--color-red-600); --color-current-700: var(--color-red-700); --color-current-800: var(--color-red-800); --color-current-900: var(--color-red-900); --color-current-950: var(--color-red-950);">
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 px-2.5 py-1.5 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-red-500 hover:bg-red-600 disabled:bg-red-500 dark:bg-red-400 dark:hover:bg-red-500 dark:disabled:bg-red-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:focus-visible:outline-red-400">
<!--v-if--><span class="">Button</span>
<!--v-if-->
</button>"
`;
exports[`Button > renders with default slot correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 px-2.5 py-1.5 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-[--color-current-500] hover:bg-[--color-current-600] disabled:bg-[--color-current-500] dark:bg-[--color-current-400] dark:hover:bg-[--color-current-500] dark:disabled:bg-[--color-current-400] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--color-current-500] dark:focus-visible:outline-[--color-current-400]">
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 px-2.5 py-1.5 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
<!--v-if--><span class="">Default slot</span>
<!--v-if-->
</button>"
`;
exports[`Button > renders with disabled correctly 1`] = `
"<button type="button" disabled="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 px-2.5 py-1.5 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-[--color-current-500] hover:bg-[--color-current-600] disabled:bg-[--color-current-500] dark:bg-[--color-current-400] dark:hover:bg-[--color-current-500] dark:disabled:bg-[--color-current-400] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--color-current-500] dark:focus-visible:outline-[--color-current-400]">
"<button type="button" disabled="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 px-2.5 py-1.5 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
<!--v-if--><span class="">Button</span>
<!--v-if-->
</button>"
`;
exports[`Button > renders with icon correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-[--color-current-500] hover:bg-[--color-current-600] disabled:bg-[--color-current-500] dark:bg-[--color-current-400] dark:hover:bg-[--color-current-500] dark:disabled:bg-[--color-current-400] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--color-current-500] dark:focus-visible:outline-[--color-current-400] p-1"><svg data-v-1cc11072="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 h-5 w-5" width="1em" height="1em" viewBox="0 0 24 24">
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1"><svg data-v-1cc11072="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 h-5 w-5" width="1em" height="1em" viewBox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41a60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84a51.39 51.39 0 0 0-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5m0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5"></path>
</svg>
<!--v-if-->
@@ -40,21 +40,21 @@ exports[`Button > renders with icon correctly 1`] = `
`;
exports[`Button > renders with label correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 px-2.5 py-1.5 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-[--color-current-500] hover:bg-[--color-current-600] disabled:bg-[--color-current-500] dark:bg-[--color-current-400] dark:hover:bg-[--color-current-500] dark:disabled:bg-[--color-current-400] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--color-current-500] dark:focus-visible:outline-[--color-current-400]">
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 px-2.5 py-1.5 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
<!--v-if--><span class="">Button</span>
<!--v-if-->
</button>"
`;
exports[`Button > renders with leading slot correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-[--color-current-500] hover:bg-[--color-current-600] disabled:bg-[--color-current-500] dark:bg-[--color-current-400] dark:hover:bg-[--color-current-500] dark:disabled:bg-[--color-current-400] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--color-current-500] dark:focus-visible:outline-[--color-current-400] p-1">Leading slot
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1">Leading slot
<!--v-if-->
<!--v-if-->
</button>"
`;
exports[`Button > renders with leadingIcon correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-[--color-current-500] hover:bg-[--color-current-600] disabled:bg-[--color-current-500] dark:bg-[--color-current-400] dark:hover:bg-[--color-current-500] dark:disabled:bg-[--color-current-400] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--color-current-500] dark:focus-visible:outline-[--color-current-400] p-1"><svg data-v-1cc11072="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 h-5 w-5" width="1em" height="1em" viewBox="0 0 24 24">
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1"><svg data-v-1cc11072="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 h-5 w-5" width="1em" height="1em" viewBox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"></path>
</svg>
<!--v-if-->
@@ -63,7 +63,7 @@ exports[`Button > renders with leadingIcon correctly 1`] = `
`;
exports[`Button > renders with loading correctly 1`] = `
"<button type="button" disabled="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-[--color-current-500] hover:bg-[--color-current-600] disabled:bg-[--color-current-500] dark:bg-[--color-current-400] dark:hover:bg-[--color-current-500] dark:disabled:bg-[--color-current-400] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--color-current-500] dark:focus-visible:outline-[--color-current-400] p-1"><svg data-v-1cc11072="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 h-5 w-5 animate-spin" width="1em" height="1em" viewBox="0 0 20 20">
"<button type="button" disabled="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1"><svg data-v-1cc11072="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 h-5 w-5 animate-spin" width="1em" height="1em" viewBox="0 0 20 20">
<path fill="currentColor" fill-rule="evenodd" d="M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138a.75.75 0 0 0-1.449-.39m1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219" clip-rule="evenodd"></path>
</svg>
<!--v-if-->
@@ -72,7 +72,7 @@ exports[`Button > renders with loading correctly 1`] = `
`;
exports[`Button > renders with loadingIcon correctly 1`] = `
"<button type="button" disabled="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-[--color-current-500] hover:bg-[--color-current-600] disabled:bg-[--color-current-500] dark:bg-[--color-current-400] dark:hover:bg-[--color-current-500] dark:disabled:bg-[--color-current-400] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--color-current-500] dark:focus-visible:outline-[--color-current-400] p-1"><svg data-v-1cc11072="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 h-5 w-5 animate-spin" width="1em" height="1em" viewBox="0 0 24 24">
"<button type="button" disabled="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1"><svg data-v-1cc11072="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 h-5 w-5 animate-spin" width="1em" height="1em" viewBox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09m8.445-7.188L18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456m-1.365 11.852L16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183l.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394l-1.183.394a2.25 2.25 0 0 0-1.423 1.423"></path>
</svg>
<!--v-if-->
@@ -81,28 +81,28 @@ exports[`Button > renders with loadingIcon correctly 1`] = `
`;
exports[`Button > renders with size correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 px-3.5 py-2.5 text-sm gap-x-2.5 shadow-sm text-white dark:text-gray-900 bg-[--color-current-500] hover:bg-[--color-current-600] disabled:bg-[--color-current-500] dark:bg-[--color-current-400] dark:hover:bg-[--color-current-500] dark:disabled:bg-[--color-current-400] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--color-current-500] dark:focus-visible:outline-[--color-current-400]">
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 px-3.5 py-2.5 text-sm gap-x-2.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
<!--v-if--><span class="">Button</span>
<!--v-if-->
</button>"
`;
exports[`Button > renders with square correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-[--color-current-500] hover:bg-[--color-current-600] disabled:bg-[--color-current-500] dark:bg-[--color-current-400] dark:hover:bg-[--color-current-500] dark:disabled:bg-[--color-current-400] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--color-current-500] dark:focus-visible:outline-[--color-current-400] p-1">
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1">
<!--v-if--><span class="">Button</span>
<!--v-if-->
</button>"
`;
exports[`Button > renders with trailing slot correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-[--color-current-500] hover:bg-[--color-current-600] disabled:bg-[--color-current-500] dark:bg-[--color-current-400] dark:hover:bg-[--color-current-500] dark:disabled:bg-[--color-current-400] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--color-current-500] dark:focus-visible:outline-[--color-current-400] p-1">
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1">
<!--v-if-->
<!--v-if-->Trailing slot
</button>"
`;
exports[`Button > renders with trailingIcon correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-[--color-current-500] hover:bg-[--color-current-600] disabled:bg-[--color-current-500] dark:bg-[--color-current-400] dark:hover:bg-[--color-current-500] dark:disabled:bg-[--color-current-400] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--color-current-500] dark:focus-visible:outline-[--color-current-400] p-1">
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1">
<!--v-if-->
<!--v-if--><svg data-v-1cc11072="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 h-5 w-5" width="1em" height="1em" viewBox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"></path>
@@ -111,35 +111,35 @@ exports[`Button > renders with trailingIcon correctly 1`] = `
`;
exports[`Button > renders with truncate correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 px-2.5 py-1.5 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-[--color-current-500] hover:bg-[--color-current-600] disabled:bg-[--color-current-500] dark:bg-[--color-current-400] dark:hover:bg-[--color-current-500] dark:disabled:bg-[--color-current-400] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--color-current-500] dark:focus-visible:outline-[--color-current-400]">
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 px-2.5 py-1.5 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
<!--v-if--><span class="truncate">Button</span>
<!--v-if-->
</button>"
`;
exports[`Button > renders with variant ghost correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 shrink-0 px-2.5 py-1.5 text-sm gap-x-1.5 text-[--color-current-500] dark:text-[--color-current-400] hover:bg-[--color-current-50] disabled:bg-transparent dark:hover:bg-[--color-current-950] dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--color-current-500] dark:focus-visible:ring-[--color-current-400]">
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 shrink-0 px-2.5 py-1.5 text-sm gap-x-1.5 text-primary-500 dark:text-primary-400 hover:bg-primary-50 disabled:bg-transparent dark:hover:bg-primary-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<!--v-if--><span class="">Button</span>
<!--v-if-->
</button>"
`;
exports[`Button > renders with variant link correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 shrink-0 px-2.5 py-1.5 text-sm gap-x-1.5 text-[--color-current-500] hover:text-[--color-current-600] disabled:text-[--color-current-500] dark:text-[--color-current-400] dark:hover:text-[--color-current-500] dark:disabled:text-[--color-current-400] underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--color-current-500] dark:focus-visible:ring-[--color-current-400]">
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 shrink-0 px-2.5 py-1.5 text-sm gap-x-1.5 text-primary-500 hover:text-primary-600 disabled:text-primary-500 dark:text-primary-400 dark:hover:text-primary-500 dark:disabled:text-primary-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<!--v-if--><span class="">Button</span>
<!--v-if-->
</button>"
`;
exports[`Button > renders with variant outline correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 shrink-0 px-2.5 py-1.5 text-sm gap-x-1.5 ring-1 ring-inset ring-current text-[--color-current-500] dark:text-[--color-current-400] hover:bg-[--color-current-50] disabled:bg-transparent dark:hover:bg-[--color-current-950] dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-[--color-current-500] dark:focus-visible:ring-[--color-current-400]">
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 shrink-0 px-2.5 py-1.5 text-sm gap-x-1.5 ring-1 ring-inset ring-current text-primary-500 dark:text-primary-400 hover:bg-primary-50 disabled:bg-transparent dark:hover:bg-primary-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<!--v-if--><span class="">Button</span>
<!--v-if-->
</button>"
`;
exports[`Button > renders with variant soft correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 shrink-0 px-2.5 py-1.5 text-sm gap-x-1.5 text-[--color-current-500] dark:text-[--color-current-400] bg-[--color-current-50] hover:bg-[--color-current-100] disabled:bg-[--color-current-50] dark:bg-[--color-current-950] dark:hover:bg-[--color-current-900] dark:disabled:bg-[--color-current-950] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--color-current-500] dark:focus-visible:ring-[--color-current-400]">
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 shrink-0 px-2.5 py-1.5 text-sm gap-x-1.5 text-primary-500 dark:text-primary-400 bg-primary-50 hover:bg-primary-100 disabled:bg-primary-50 dark:bg-primary-950 dark:hover:bg-{color}-900 dark:disabled:bg-primary-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<!--v-if--><span class="">Button</span>
<!--v-if-->
</button>"