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

feat(components): uniformize colors and variants (#141)

Browse Source
This commit is contained in:
Benjamin Canac
2024-07-09 10:45:26 +02:00
committed by GitHub
parent 18c5ead1bd
commit c018c23224
115 changed files with 4366 additions and 4191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/app/components/Banner.vue
View File

@@ -3,7 +3,7 @@ const config = useRuntimeConfig().public
</script>
<template>
<UBanner icon="i-heroicons-light-bulb" :actions="[{ label: 'Go to Nuxt UI v2', to: 'https://ui.nuxt.com', trailingIcon: 'i-heroicons-arrow-right-20-solid', color: 'white', class: 'rounded-full' }]" :close="false">
<UBanner icon="i-heroicons-light-bulb" :actions="[{ label: 'Go to Nuxt UI v2', to: 'https://ui.nuxt.com', trailingIcon: 'i-heroicons-arrow-right-20-solid', class: 'rounded-full' }]" :close="false">
<template #title>
You're looking at the documentation for <span class="font-semibold">Nuxt UI v{{ config.version }}</span>!
</template>

2
docs/app/components/Footer.vue
View File

@@ -31,7 +31,7 @@ const route = useRoute()
</NuxtLink>
</template>
<!-- <UNavigationMenu :items="items" variant="link" color="black" /> -->
<!-- <UNavigationMenu :items="items" variant="link" color="gray" /> -->
<template #right>
<UButton

2
docs/app/components/content/ComponentPropsSchema.vue
View File

@@ -21,7 +21,7 @@ const schemaProps = computed(() => getSchemaProps(props.prop.schema))
</script>
<template>
<Collapsible v-if="schemaProps?.length" class="mt-1" :ui="{ trigger: 'ml-1.5' }">
<Collapsible v-if="schemaProps?.length" class="mt-1">
<ProseUl>
<ProseLi v-for="schemaProp in schemaProps" :key="schemaProp.name">
<HighlightInlineType :type="`${schemaProp.name}: ${schemaProp.type}`" />

4
docs/app/layouts/docs.vue
View File

@@ -4,8 +4,6 @@ import type { NavItem } from '@nuxt/content'
const nav = inject<Ref<NavItem[]>>('navigation')
const navigation = computed(() => nav.value.filter(item => !item._path.startsWith('/pro')))
// const { module, modules } = useModule()
</script>
<template>
@@ -14,8 +12,6 @@ const navigation = computed(() => nav.value.filter(item => !item._path.startsWit
<UPage>
<template #left>
<UPageAside>
<!-- <USelect v-model="module" :items="modules" icon="i-heroicons-cube" class="w-full mb-3 lg:mb-6" /> -->
<UContentNavigation :navigation="navigation" highlight />
</UPageAside>
</template>

2
docs/content/1.getting-started/2.installation.md
View File

@@ -55,7 +55,7 @@ export default defineNuxtConfig({
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
ui: {
colors: ['primary', 'green', 'red']
colors: ['blue', 'green', 'red']
}
})
```

1
docs/content/2.components/carousel.md
View File

@@ -8,7 +8,6 @@ navigation:
badge:
label: Soon
color: gray
variant: solid
disabled: true
---

1
docs/content/2.components/meter.md
View File

@@ -9,7 +9,6 @@ navigation:
badge:
label: Soon
color: gray
variant: solid
disabled: true
---

1
docs/content/2.components/table.md
View File

@@ -8,7 +8,6 @@ navigation:
badge:
label: Soon
color: gray
variant: solid
disabled: true
---

2
playground/app/components/FormElementsExample.vue
View File

@@ -99,7 +99,7 @@ function onSubmit(event: FormSubmitEvent<Schema>) {
Submit
</UButton>
<UButton variant="outline" :disabled="form?.disabled" @click="form?.clear()">
<UButton color="gray" variant="outline" :disabled="form?.disabled" @click="form?.clear()">
Clear
</UButton>
</div>

4
playground/app/components/FormNestedListExample.vue
View File

@@ -68,11 +68,11 @@ function onError(event: any) {
</UForm>
<div class="flex gap-2">
<UButton color="black" @click="addItem()">
<UButton color="gray" variant="subtle" size="sm" @click="addItem()">
Add Item
</UButton>
<UButton color="black" variant="ghost" @click="removeItem()">
<UButton color="gray" variant="ghost" size="sm" @click="removeItem()">
Remove Item
</UButton>
</div>

52
playground/app/pages/alert.vue
View File

@@ -3,9 +3,9 @@ import theme from '#build/ui/alert'
const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme.variants.variant>
const actions = (variant?: string) => [{
const actions = (color: string) => [{
label: 'Action',
color: (variant === 'solid' ? 'black' as const : 'primary' as const),
color: color as any,
click() {
console.log('Action clicked')
}
@@ -15,29 +15,39 @@ const data = {
title: 'Heads up!',
description: 'You can add components to your app using the cli.',
icon: 'i-heroicons-command-line',
actions: actions(),
close: true
}
</script>
<template>
<div class="flex flex-col gap-2 flex-1">
<UAlert :title="data.title" />
<UAlert :title="data.title" :icon="data.icon" />
<UAlert :title="data.title" :icon="data.icon" :close="data.close" />
<UAlert :title="data.title" :icon="data.icon" :close="data.close" :actions="data.actions" />
<UAlert :title="data.title" :icon="data.icon" :close="data.close" :description="data.description" />
<UAlert :title="data.title" :avatar="{ src: 'https://avatars.githubusercontent.com/u/739984?v=4' }" :close="data.close" :description="data.description" />
<UAlert v-bind="data" color="white" />
<UAlert v-bind="data" color="gray" />
<UAlert v-bind="data" color="black" />
<UAlert
v-for="variant in variants"
:key="variant"
v-bind="data"
:actions="actions(variant)"
color="primary"
:variant="variant"
/>
<div class="flex flex-col gap-4 flex-1 items-center">
<div class="flex flex-col gap-2 w-96">
<UAlert :title="data.title" />
<UAlert :title="data.title" :icon="data.icon" />
<UAlert :title="data.title" :icon="data.icon" :close="data.close" />
<UAlert :title="data.title" :icon="data.icon" :close="data.close" :actions="actions('primary')" />
<UAlert :title="data.title" :icon="data.icon" :close="data.close" :description="data.description" />
<UAlert :title="data.title" :avatar="{ src: 'https://avatars.githubusercontent.com/u/739984?v=4' }" :close="data.close" :description="data.description" />
</div>
<div class="flex items-center gap-2">
<UAlert
v-for="variant in variants"
:key="variant"
v-bind="data"
:actions="actions('gray')"
:variant="variant"
/>
</div>
<div class="flex items-center gap-2">
<UAlert
v-for="variant in variants"
:key="variant"
v-bind="data"
:actions="actions('primary')"
color="gray"
:variant="variant"
/>
</div>
</div>
</template>

11
playground/app/pages/badge.vue
View File

@@ -1,4 +1,5 @@
<script setup lang="ts">
import { upperFirst } from 'scule'
import theme from '#build/ui/badge'
const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
@@ -13,16 +14,10 @@ const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme
</UBadge>
</div>
<div class="flex items-center gap-2">
<UBadge v-for="variant in variants" :key="variant" label="Badge" :variant="variant" />
<UBadge v-for="variant in variants" :key="variant" :label="upperFirst(variant)" :variant="variant" />
</div>
<div class="flex items-center gap-2">
<UBadge label="Badge" color="white" />
</div>
<div class="flex items-center gap-2">
<UBadge label="Badge" color="gray" />
</div>
<div class="flex items-center gap-2">
<UBadge label="Badge" color="black" />
<UBadge v-for="variant in variants" :key="variant" :label="upperFirst(variant)" :variant="variant" color="gray" />
</div>
<div class="flex items-center gap-2 ml-[-56px]">
<UBadge v-for="size in sizes" :key="size" label="Badge" :size="size" />

2
playground/app/pages/breadcrumb.vue
View File

@@ -25,7 +25,7 @@ const items = [{
<UBreadcrumb :items="items">
<template #dropdown="{ item }">
<UDropdownMenu :items="item.children">
<UButton :icon="item.icon" color="gray" variant="link" class="p-0" />
<UButton :icon="item.icon" color="gray" variant="link" class="p-0.5" />
</UDropdownMenu>
</template>
</UBreadcrumb>

40
playground/app/pages/button-group.vue
View File

@@ -8,48 +8,52 @@ const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.varia
<div class="flex flex-col gap-4 items-center">
<div class="flex flex-col gap-4 -ml-[110px]">
<UButtonGroup>
<UButton> Click me! </UButton>
<UButton>Button</UButton>
</UButtonGroup>
<UButtonGroup>
<UInput />
<UInput placeholder="Search..." />
</UButtonGroup>
<UButtonGroup>
<UButton> Click me! </UButton>
<UButton color="white">
Click me!
<UButton color="gray" variant="outline">
Button
</UButton>
<UButton color="gray" variant="subtle">
Button
</UButton>
<UButton color="gray" variant="outline">
Button
</UButton>
<UButton> Click me! </UButton>
</UButtonGroup>
<UButtonGroup orientation="vertical">
<UButton color="white">
Click me!
<UButton color="gray" variant="outline">
Button
</UButton>
<UInput />
<UInput placeholder="Search..." />
</UButtonGroup>
<UButtonGroup>
<UButton color="white">
Click me!
<UButton color="gray" variant="outline">
Button
</UButton>
<UInput />
<UInput placeholder="Search..." />
</UButtonGroup>
<UButtonGroup>
<UInput />
<UButton color="white">
Click me!
<UInput placeholder="Search..." />
<UButton color="gray" variant="outline">
Button
</UButton>
</UButtonGroup>
</div>
<div class="flex gap-4 items-center justify-center">
<UButtonGroup v-for="size in sizes" :key="size" :size="size">
<UInput />
<UButton color="white">
Click me!
<UInput placeholder="Search..." />
<UButton color="gray" variant="outline">
Button
</UButton>
</UButtonGroup>
</div>

24
playground/app/pages/button.vue
View File

@@ -1,4 +1,5 @@
<script setup lang="ts">
import { upperFirst } from 'scule'
import theme from '#build/ui/button'
const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
@@ -28,22 +29,17 @@ const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme
</UButton>
</div>
<div class="flex items-center gap-2">
<UButton v-for="variant in variants" :key="variant" icon="i-heroicons-rocket-launch" label="Button" :variant="variant" />
<UButton v-for="variant in variants" :key="variant" icon="i-heroicons-rocket-launch" :label="upperFirst(variant)" :variant="variant" />
</div>
<div class="flex items-center gap-2">
<UButton icon="i-heroicons-rocket-launch" label="Button" color="white" />
<UButton icon="i-heroicons-rocket-launch" label="Button" color="white" variant="ghost" />
<UButton icon="i-heroicons-rocket-launch" label="Button" color="white" variant="link" />
</div>
<div class="flex items-center gap-2">
<UButton icon="i-heroicons-rocket-launch" label="Button" color="gray" />
<UButton icon="i-heroicons-rocket-launch" label="Button" color="gray" variant="ghost" />
<UButton icon="i-heroicons-rocket-launch" label="Button" color="gray" variant="link" />
</div>
<div class="flex items-center gap-2">
<UButton icon="i-heroicons-rocket-launch" label="Button" color="black" />
<UButton icon="i-heroicons-rocket-launch" label="Button" color="black" variant="ghost" />
<UButton icon="i-heroicons-rocket-launch" label="Button" color="black" variant="link" />
<UButton
v-for="variant in variants"
:key="variant"
icon="i-heroicons-rocket-launch"
:label="upperFirst(variant)"
:variant="variant"
color="gray"
/>
</div>
<div class="flex items-center gap-2 ml-[-129px]">
<UButton v-for="size in sizes" :key="size" label="Button" :size="size" />

9
playground/app/pages/checkbox.vue
View File

@@ -3,19 +3,20 @@ import theme from '#build/ui/checkbox'
const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
const checked = ref(false)
const checked = ref(true)
</script>
<template>
<div class="flex flex-col items-center gap-4">
<div class="flex flex-col gap-4">
<UCheckbox v-model="checked" label="Model" />
<UCheckbox v-model="checked" label="Primary" />
<UCheckbox label="Gray" color="gray" :default-value="true" />
<UCheckbox label="Error" color="error" icon="i-heroicons-heart-solid" :model-value="true" />
<UCheckbox label="Icon" icon="i-heroicons-heart-solid" :model-value="true" />
<UCheckbox label="Default value" :default-value="true" />
<UCheckbox label="Indeterminate" indeterminate />
<UCheckbox label="Required" required />
<UCheckbox label="Disabled" disabled />
<UCheckbox label="Black" color="black" :default-value="true" />
<UCheckbox label="Icon" color="red" icon="i-heroicons-heart-solid" :model-value="true" />
</div>
<div class="flex items-center gap-4 mr-[-11px]">
<UCheckbox v-for="size in sizes" :key="size" label="Check me" :size="size" />

4
playground/app/pages/chip.vue
View File

@@ -19,13 +19,13 @@ const items = [{
<div class="flex flex-col gap-4">
<div class="flex items-center gap-2">
<UChip v-for="position in positions" :key="position" :position="position">
<UButton icon="i-heroicons-inbox" color="gray" />
<UButton icon="i-heroicons-inbox" color="gray" variant="subtle" />
</UChip>
</div>
<div class="flex items-center gap-2">
<UChip v-for="{ name, icon, count } in items" :key="name" :text="count" :show="count > 0" size="lg">
<UButton :icon="icon" color="gray" />
<UButton :icon="icon" color="gray" variant="subtle" />
</UChip>
</div>

1
playground/app/pages/collapsible.vue
View File

@@ -10,6 +10,7 @@ const appConfig = useAppConfig()
icon="i-heroicons-light-bulb"
:trailing-icon="appConfig.ui.icons.chevronDown"
color="gray"
variant="outline"
label="Open"
block
:ui="{ trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"

6
playground/app/pages/command-palette.vue
View File

@@ -114,7 +114,7 @@ defineShortcuts({
<div class="flex-1 flex flex-col gap-12 w-full max-w-lg">
<div class="flex items-center justify-between gap-2 mt-[58px]">
<UModal v-model:open="open">
<UButton label="Open modal" color="gray" />
<UButton label="Open modal" color="gray" variant="outline" />
<template #content>
<ReuseTemplate :close="true" @close="open = false" />
@@ -122,7 +122,7 @@ defineShortcuts({
</UModal>
<UDrawer should-scale-background>
<UButton label="Open drawer" color="gray" />
<UButton label="Open drawer" color="gray" variant="outline" />
<template #content>
<ReuseTemplate class="border-t border-gray-200 dark:border-gray-800" />
@@ -130,7 +130,7 @@ defineShortcuts({
</UDrawer>
<UPopover :content="{ side: 'right', align: 'start' }">
<UButton label="Select label (popover)" color="gray" />
<UButton label="Select label (popover)" color="gray" variant="outline" />
<template #content>
<UCommandPalette v-model="label" placeholder="Search labels..." :groups="[{ id: 'labels', items: labels }]" :ui="{ input: '[&>input]:h-9' }" />

8
playground/app/pages/drawer.vue
View File

@@ -5,20 +5,20 @@ const open = ref(false)
<template>
<div class="flex flex-col gap-2">
<UDrawer v-model:open="open" title="Drawer with v-model" description="This is useful to control the state yourself.">
<UButton color="white" label="Open with v-model" />
<UButton color="gray" variant="outline" label="Open with v-model" />
<template #body>
<Placeholder class="h-48 w-full" />
</template>
<template #footer>
<UButton label="Submit" color="black" class="justify-center" />
<UButton label="Cancel" color="white" class="justify-center" @click="open = false" />
<UButton label="Submit" color="gray" class="justify-center" />
<UButton label="Cancel" color="gray" variant="outline" class="justify-center" @click="open = false" />
</template>
</UDrawer>
<UDrawer should-scale-background title="Drawer with `should-scale-background`" description="You need to add the `vaul-drawer-wrapper` directive to your content to make it work.">
<UButton color="white" label="Open with scale" />
<UButton color="gray" variant="outline" label="Open with scale" />
<template #body>
<Placeholder class="h-screen w-full" />

2
playground/app/pages/dropdown-menu.vue
View File

@@ -127,7 +127,7 @@ defineShortcuts(extractShortcuts(items))
<USelectMenu v-model="size" :items="sizes" placeholder="Size" />
<UDropdownMenu :items="items" :size="size" arrow :content="{ side: 'bottom', align: 'start' }" class="min-w-48">
<UButton label="Open" color="white" icon="i-heroicons-user" />
<UButton label="Open" color="gray" variant="outline" icon="i-heroicons-user" />
<template #custom-trailing>
<UIcon name="i-heroicons-check-badge" class="shrink-0 size-5 text-primary-500 dark:text-primary-400" />

52
playground/app/pages/input-menu.vue
View File

@@ -1,9 +1,11 @@
<script setup lang="ts">
import { upperFirst } from 'scule'
import { refDebounced } from '@vueuse/core'
import type { User } from '~/types'
import theme from '#build/ui/input-menu'
const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme.variants.variant>
const fruits = ['Apple', 'Banana', 'Blueberry', 'Grapes', 'Pineapple']
const vegetables = ['Aubergine', 'Broccoli', 'Carrot', 'Courgette', 'Leek']
@@ -42,11 +44,43 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
<template>
<div class="flex flex-col items-center gap-4">
<div class="flex flex-col gap-4 w-60">
<UInputMenu :items="items" autofocus />
<UInputMenu :items="items" placeholder="Search..." color="gray" />
<UInputMenu :items="items" placeholder="Search..." color="primary" />
<UInputMenu :items="items" placeholder="Search..." variant="none" />
<div class="flex flex-col gap-4 w-48">
<UInputMenu :items="items" autofocus placeholder="Search..." />
</div>
<div class="flex items-center gap-2">
<UInputMenu
v-for="variant in variants"
:key="variant"
:items="items"
:placeholder="upperFirst(variant)"
:variant="variant"
class="w-48"
/>
</div>
<div class="flex items-center gap-2">
<UInputMenu
v-for="variant in variants"
:key="variant"
:items="items"
:placeholder="upperFirst(variant)"
:variant="variant"
color="gray"
class="w-48"
/>
</div>
<div class="flex items-center gap-2">
<UInputMenu
v-for="variant in variants"
:key="variant"
:items="items"
:placeholder="upperFirst(variant)"
:variant="variant"
color="error"
highlight
class="w-48"
/>
</div>
<div class="flex flex-col gap-4 w-48">
<UInputMenu :items="items" placeholder="Disabled" disabled />
<UInputMenu :items="items" placeholder="Required" required />
<UInputMenu v-model="selectedItems" :items="items" placeholder="Multiple" multiple />
@@ -59,7 +93,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
:items="items"
placeholder="Search..."
:size="size"
class="w-60"
class="w-48"
/>
</div>
<div class="flex items-center gap-4">
@@ -71,7 +105,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
icon="i-heroicons-magnifying-glass"
trailing-icon="i-heroicons-chevron-up-down-20-solid"
:size="size"
class="w-60"
class="w-48"
>
<template #leading="{ modelValue, ui }">
<UIcon v-if="modelValue?.icon" :name="modelValue.icon" :class="ui.leadingIcon()" />
@@ -89,7 +123,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
icon="i-heroicons-user"
placeholder="Search users..."
:size="size"
class="w-60"
class="w-48"
>
<template #leading="{ modelValue, ui }">
<UAvatar v-if="modelValue?.avatar" :size="ui.itemLeadingAvatarSize()" v-bind="modelValue.avatar" />
@@ -106,7 +140,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
icon="i-heroicons-magnifying-glass"
placeholder="Search..."
:size="size"
class="w-60"
class="w-48"
/>
</div>
</div>

41
playground/app/pages/input.vue
View File

@@ -1,16 +1,41 @@
<script setup lang="ts">
import { upperFirst } from 'scule'
import theme from '#build/ui/input'
const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme.variants.variant>
</script>
<template>
<div class="flex flex-col items-center gap-4">
<div class="flex flex-col gap-4 w-60">
<UInput autofocus />
<UInput placeholder="Search..." color="gray" />
<UInput placeholder="Search..." color="primary" />
<UInput placeholder="Search..." variant="none" />
<div class="flex flex-col gap-4 w-48">
<UInput autofocus placeholder="Search..." />
</div>
<div class="flex items-center gap-2">
<UInput v-for="variant in variants" :key="variant" :placeholder="upperFirst(variant)" :variant="variant" class="w-48" />
</div>
<div class="flex items-center gap-2">
<UInput
v-for="variant in variants"
:key="variant"
:placeholder="upperFirst(variant)"
:variant="variant"
color="gray"
class="w-48"
/>
</div>
<div class="flex items-center gap-2">
<UInput
v-for="variant in variants"
:key="variant"
:placeholder="upperFirst(variant)"
:variant="variant"
color="error"
highlight
class="w-48"
/>
</div>
<div class="flex flex-col gap-4 w-48">
<UInput placeholder="Disabled" disabled />
<UInput placeholder="Required" required />
<UInput file="i-heroicons-calculator" type="number" :model-value="10" />
@@ -27,7 +52,7 @@ const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.varia
:key="size"
placeholder="Search..."
:size="size"
class="w-60"
class="w-48"
/>
</div>
<div class="flex items-center gap-4">
@@ -37,7 +62,7 @@ const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.varia
icon="i-heroicons-magnifying-glass"
placeholder="Search..."
:size="size"
class="w-60"
class="w-48"
/>
</div>
<div class="flex items-center gap-4">
@@ -48,7 +73,7 @@ const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.varia
trailing
placeholder="Search..."
:size="size"
class="w-60"
class="w-48"
/>
</div>
</div>

4
playground/app/pages/kbd.vue
View File

@@ -13,10 +13,10 @@ const kbdKeys = Object.keys(kbdKeysMap)
<UKbd value="meta" />
</div>
<div class="flex items-center gap-1">
<UKbd value="meta" color="gray" />
<UKbd value="meta" variant="subtle" />
</div>
<div class="flex items-center gap-1">
<UKbd value="meta" color="black" />
<UKbd value="meta" variant="solid" />
</div>
<div class="flex items-center gap-1 ml-[-216px]">
<UKbd v-for="(kdbKey, index) in kbdKeys" :key="index" :value="kdbKey" />

22
playground/app/pages/modal.vue
View File

@@ -19,7 +19,7 @@ function openModal() {
<template>
<div class="flex flex-col gap-2">
<UModal title="First modal">
<UButton color="white" label="Open with nested" />
<UButton color="gray" variant="outline" label="Open with nested" />
<template #footer>
<UModal title="Second modal">
@@ -30,40 +30,40 @@ function openModal() {
<UModal v-model:open="open" title="Modal with v-model" description="This can be useful to control the state of the modal yourself." />
<UButton label="Open with v-model" color="gray" @click="open = true" />
<UButton label="Open with v-model" color="gray" variant="subtle" @click="open = true" />
<UModal title="Modal without overlay" description="This modal has `overlay: false` prop." :overlay="false">
<UButton label="Open without overlay" color="white" />
<UButton label="Open without overlay" color="gray" variant="outline" />
</UModal>
<UModal title="Modal without modal & overlay" description="This modal has `modal: false` and `overlay: false` to interact with outside content." :overlay="false" :modal="false">
<UButton label="Open without modal" color="gray" />
<UButton label="Open without modal" color="gray" variant="subtle" />
</UModal>
<UModal title="Modal without transition" description="This modal has `transition: false` prop." :transition="false">
<UButton label="Open without transition" color="white" />
<UButton label="Open without transition" color="gray" variant="outline" />
</UModal>
<UModal title="Modal without portal" description="This modal has `portal: false` prop." :portal="false">
<UButton label="Open without portal" color="gray" />
<UButton label="Open without portal" color="gray" variant="subtle" />
</UModal>
<UModal title="Modal fullscreen" description="This modal has `fullscreen: true` prop." fullscreen>
<UButton label="Open fullscreen" color="white" />
<UButton label="Open fullscreen" color="gray" variant="outline" />
</UModal>
<UModal title="Modal prevent close" description="This modal has `prevent-close: true` prop so it won't close when clicking outside." prevent-close>
<UButton label="Open unclosable" color="gray" />
<UButton label="Open unclosable" color="gray" variant="subtle" />
</UModal>
<UModal title="Modal without close button" description="This modal has `close: false` prop." :close="false">
<UButton label="Open without close button" color="white" />
<UButton label="Open without close button" color="gray" variant="outline" />
</UModal>
<UModal title="Modal with custom close button" description="The `close` prop inherits from the Button props." :close="{ color: 'primary', variant: 'solid', size: 'xs' }" :ui="{ close: 'top-3.5 rounded-full' }">
<UButton label="Open with custom close button" color="gray" />
<UButton label="Open with custom close button" color="gray" variant="subtle" />
</UModal>
<UButton label="Open programmatically" color="white" @click="openModal" />
<UButton label="Open programmatically" color="gray" variant="outline" @click="openModal" />
</div>
</template>

1
playground/app/pages/navigation-menu.vue
View File

@@ -15,6 +15,7 @@ const items = [
[{
label: 'Documentation',
icon: 'i-heroicons-book-open',
badge: 10,
children: [{
label: 'Introduction',
description: 'Fully styled and customizable components for Nuxt.',

18
playground/app/pages/popover.vue
View File

@@ -16,7 +16,7 @@ function send() {
<div class="text-center">
<div>
<UPopover arrow :content="{ side: 'top' }">
<UButton label="Click me top" color="white" />
<UButton label="Click me top" color="gray" variant="outline" />
<template #content>
<div class="w-48 h-16" />
@@ -25,7 +25,7 @@ function send() {
<div class="flex items-center gap-2 my-2">
<UPopover arrow :content="{ side: 'left' }">
<UButton label="Click me top" color="white" />
<UButton label="Click me top" color="gray" variant="outline" />
<template #content>
<div class="w-48 h-16" />
@@ -33,7 +33,7 @@ function send() {
</UPopover>
<UPopover arrow :content="{ side: 'right' }">
<UButton label="Click me top" color="white" />
<UButton label="Click me top" color="gray" variant="outline" />
<template #content>
<div class="w-48 h-16" />
@@ -42,12 +42,12 @@ function send() {
</div>
<UPopover v-model:open="open" arrow>
<UButton label="Click me bottom" color="white" />
<UButton label="Click me bottom" color="gray" variant="outline" />
<template #content>
<div class="flex justify-center gap-2 p-4 w-48">
<UButton label="Close" color="gray" @click="open = false" />
<UButton label="Send" color="black" trailing-icon="i-heroicons-paper-airplane" :loading="loading" @click="send" />
<UButton label="Send" color="gray" trailing-icon="i-heroicons-paper-airplane" :loading="loading" @click="send" />
</div>
</template>
</UPopover>
@@ -55,7 +55,7 @@ function send() {
<div class="mt-24">
<UPopover mode="hover" arrow :content="{ side: 'top' }">
<UButton label="Hover me top" color="white" />
<UButton label="Hover me top" color="gray" variant="outline" />
<template #content>
<div class="w-48 h-16" />
@@ -64,7 +64,7 @@ function send() {
<div class="flex items-center gap-2 my-2">
<UPopover mode="hover" arrow :content="{ side: 'left' }">
<UButton label="Hover me left" color="white" />
<UButton label="Hover me left" color="gray" variant="outline" />
<template #content>
<div class="w-48 h-16" />
@@ -72,7 +72,7 @@ function send() {
</UPopover>
<UPopover mode="hover" arrow :content="{ side: 'right' }">
<UButton label="Hover me right" color="white" />
<UButton label="Hover me right" color="gray" variant="outline" />
<template #content>
<div class="w-48 h-16" />
@@ -81,7 +81,7 @@ function send() {
</div>
<UPopover mode="hover" arrow>
<UButton label="Hover me bottom" color="white" />
<UButton label="Hover me bottom" color="gray" variant="outline" />
<template #content>
<div class="w-48 h-16" />

4
playground/app/pages/progress.vue
View File

@@ -33,8 +33,8 @@ onMounted(() => {
<div class="flex flex-col gap-8 items-center">
<div class="flex flex-col gap-4 w-48">
<UProgress />
<UProgress color="black" />
<UProgress color="red" />
<UProgress color="gray" />
<UProgress color="error" />
<UProgress animation="carousel-inverse" />
<UProgress animation="swing" />
<UProgress animation="elastic" />

4
playground/app/pages/radio-group.vue
View File

@@ -25,10 +25,10 @@ const itemsWithDescription = [
<div class="flex flex-col items-center gap-4">
<div class="flex flex-col gap-4 ml-[100px]">
<URadioGroup :items="items" default-value="1" />
<URadioGroup :items="items" color="gray" default-value="1" />
<URadioGroup :items="items" color="error" default-value="2" />
<URadioGroup :items="literalOptions" />
<URadioGroup :items="items" label="Disabled" disabled />
<URadioGroup :items="items" color="black" default-value="1" />
<URadioGroup :items="items" color="red" default-value="2" />
<URadioGroup :items="items" orientation="horizontal" class="ml-[-91px]" />
</div>

48
playground/app/pages/select-menu.vue
View File

@@ -1,9 +1,11 @@
<script setup lang="ts">
import { upperFirst } from 'scule'
import { refDebounced } from '@vueuse/core'
import theme from '#build/ui/select-menu'
import type { User } from '~/types'
const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme.variants.variant>
const fruits = ['Apple', 'Banana', 'Blueberry', 'Grapes', 'Pineapple']
const vegetables = ['Aubergine', 'Broccoli', 'Carrot', 'Courgette', 'Leek']
@@ -47,11 +49,43 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
<template>
<div class="flex flex-col items-center gap-4">
<div class="flex flex-col gap-4 w-60">
<div class="flex flex-col gap-4 w-48">
<USelectMenu :items="items" />
<USelectMenu :items="items" placeholder="Search..." color="gray" />
<USelectMenu :items="items" placeholder="Search..." color="primary" />
<USelectMenu :items="items" placeholder="Search..." variant="none" />
</div>
<div class="flex items-center gap-2">
<USelectMenu
v-for="variant in variants"
:key="variant"
:items="items"
:placeholder="upperFirst(variant)"
:variant="variant"
class="w-48"
/>
</div>
<div class="flex items-center gap-2">
<USelectMenu
v-for="variant in variants"
:key="variant"
:items="items"
:placeholder="upperFirst(variant)"
:variant="variant"
color="gray"
class="w-48"
/>
</div>
<div class="flex items-center gap-2">
<USelectMenu
v-for="variant in variants"
:key="variant"
:items="items"
:placeholder="upperFirst(variant)"
:variant="variant"
color="error"
highlight
class="w-48"
/>
</div>
<div class="flex flex-col gap-4 w-48">
<USelectMenu :items="items" placeholder="Disabled" disabled />
<USelectMenu :items="items" placeholder="Required" required />
<USelectMenu v-model="selectedItems" :items="items" placeholder="Multiple" multiple />
@@ -64,7 +98,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
:items="items"
placeholder="Search..."
:size="size"
class="w-60"
class="w-48"
/>
</div>
<div class="flex items-center gap-4">
@@ -76,7 +110,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
icon="i-heroicons-magnifying-glass"
trailing-icon="i-heroicons-chevron-up-down-20-solid"
:size="size"
class="w-60"
class="w-48"
>
<template #leading="{ modelValue, ui }">
<UIcon v-if="modelValue" :name="modelValue.icon" :class="ui.leadingIcon()" />
@@ -94,7 +128,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
icon="i-heroicons-user"
placeholder="Search users..."
:size="size"
class="w-60"
class="w-48"
@update:open="searchTerm = ''"
>
<template #leading="{ modelValue, ui }">

50
playground/app/pages/select.vue
View File

@@ -1,8 +1,10 @@
<script setup lang="ts">
import { upperFirst } from 'scule'
import theme from '#build/ui/select'
import type { User } from '~/types'
const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme.variants.variant>
const fruits = ['Apple', 'Banana', 'Blueberry', 'Grapes', 'Pineapple']
const vegetables = ['Aubergine', 'Broccoli', 'Carrot', 'Courgette', 'Leek']
@@ -49,11 +51,43 @@ function getUserAvatar(value: string) {
<template>
<div class="flex flex-col items-center gap-4">
<div class="flex flex-col gap-4 w-60">
<USelect :items="items" />
<USelect :items="items" placeholder="Search..." color="gray" />
<USelect :items="items" placeholder="Search..." color="primary" />
<USelect :items="items" placeholder="Search..." variant="none" />
<div class="flex flex-col gap-4 w-48">
<USelect :items="items" placeholder="Search..." />
</div>
<div class="flex items-center gap-2">
<USelect
v-for="variant in variants"
:key="variant"
:items="items"
:placeholder="upperFirst(variant)"
:variant="variant"
class="w-48"
/>
</div>
<div class="flex items-center gap-2">
<USelect
v-for="variant in variants"
:key="variant"
:items="items"
:placeholder="upperFirst(variant)"
:variant="variant"
color="gray"
class="w-48"
/>
</div>
<div class="flex items-center gap-2">
<USelect
v-for="variant in variants"
:key="variant"
:items="items"
:placeholder="upperFirst(variant)"
:variant="variant"
color="error"
highlight
class="w-48"
/>
</div>
<div class="flex flex-col gap-4 w-48">
<USelect :items="items" placeholder="Disabled" disabled />
<USelect :items="items" placeholder="Required" required />
<USelect :items="items" loading placeholder="Search..." />
@@ -65,7 +99,7 @@ function getUserAvatar(value: string) {
:items="items"
placeholder="Search..."
:size="size"
class="w-60"
class="w-48"
/>
</div>
<div class="flex items-center gap-4">
@@ -77,7 +111,7 @@ function getUserAvatar(value: string) {
icon="i-heroicons-magnifying-glass"
trailing-icon="i-heroicons-chevron-up-down-20-solid"
:size="size"
class="w-60"
class="w-48"
>
<template #leading="{ modelValue, ui }">
<UIcon v-if="modelValue" :name="getStatusIcon(modelValue)" :class="ui.leadingIcon()" />
@@ -93,7 +127,7 @@ function getUserAvatar(value: string) {
icon="i-heroicons-user"
placeholder="Search users..."
:size="size"
class="w-60"
class="w-48"
>
<template #leading="{ modelValue, ui }">
<UAvatar v-if="modelValue" :size="ui.itemLeadingAvatarSize()" v-bind="getUserAvatar(modelValue)" />

26
playground/app/pages/slideover.vue
View File

@@ -19,7 +19,7 @@ function openSlideover() {
<template>
<div class="flex flex-col gap-2">
<USlideover title="First slideover">
<UButton color="white" label="Open with nested" />
<UButton color="gray" variant="outline" label="Open with nested" />
<template #body>
<Placeholder class="h-full w-full" />
@@ -33,7 +33,7 @@ function openSlideover() {
</USlideover>
<USlideover title="Slideover on left side" description="This slideover has `side: 'left'` prop." side="left">
<UButton label="Open on left" color="gray" />
<UButton label="Open on left" color="gray" variant="subtle" />
<template #body>
<Placeholder class="h-full w-full" />
@@ -41,7 +41,7 @@ function openSlideover() {
</USlideover>
<USlideover title="Slideover on top side" description="This slideover has `side: 'top'` prop." side="top">
<UButton label="Open on top" color="white" />
<UButton label="Open on top" color="gray" variant="outline" />
<template #body>
<Placeholder class="h-48 w-full" />
@@ -49,7 +49,7 @@ function openSlideover() {
</USlideover>
<USlideover title="Slideover on bottom side" description="This slideover has `side: 'bottom'` prop." side="bottom">
<UButton label="Open on bottom" color="gray" />
<UButton label="Open on bottom" color="gray" variant="subtle" />
<template #body>
<Placeholder class="h-48 w-full" />
@@ -62,10 +62,10 @@ function openSlideover() {
</template>
</USlideover>
<UButton label="Open with v-model" color="white" @click="open = true" />
<UButton label="Open with v-model" color="gray" variant="outline" @click="open = true" />
<USlideover title="Slideover without overlay" description="This slideover has `overlay: false` prop." :overlay="false">
<UButton label="Open without overlay" color="gray" />
<UButton label="Open without overlay" color="gray" variant="subtle" />
<template #body>
<Placeholder class="h-full w-full" />
@@ -73,7 +73,7 @@ function openSlideover() {
</USlideover>
<USlideover title="Slideover without modal & overlay" description="This slideover has `modal: false` and `overlay: false` to interact with outside content." :overlay="false" :modal="false">
<UButton label="Open without modal" color="white" />
<UButton label="Open without modal" color="gray" variant="outline" />
<template #body>
<Placeholder class="h-full w-full" />
@@ -81,7 +81,7 @@ function openSlideover() {
</USlideover>
<USlideover title="Slideover without transition" description="This slideover has `transition: false` prop." :transition="false">
<UButton label="Open without transition" color="gray" />
<UButton label="Open without transition" color="gray" variant="subtle" />
<template #body>
<Placeholder class="h-full w-full" />
@@ -89,7 +89,7 @@ function openSlideover() {
</USlideover>
<USlideover title="Slideover without portal" description="This slideover has `portal: false` prop." :portal="false">
<UButton label="Open without portal" color="white" />
<UButton label="Open without portal" color="gray" variant="outline" />
<template #body>
<Placeholder class="h-full w-full" />
@@ -97,7 +97,7 @@ function openSlideover() {
</USlideover>
<USlideover title="Slideover prevent close" description="This slideover has `prevent-close: true` prop so it won't close when clicking outside." prevent-close>
<UButton label="Open unclosable" color="gray" />
<UButton label="Open unclosable" color="gray" variant="subtle" />
<template #body>
<Placeholder class="h-full w-full" />
@@ -105,7 +105,7 @@ function openSlideover() {
</USlideover>
<USlideover title="Slideover without close button" description="This slideover has `close: false` prop." :close="false">
<UButton label="Open without close button" color="white" />
<UButton label="Open without close button" color="gray" variant="outline" />
<template #body>
<Placeholder class="h-full w-full" />
@@ -113,13 +113,13 @@ function openSlideover() {
</USlideover>
<USlideover title="Slideover with custom close button" description="The `close` prop inherits from the Button props." :close="{ color: 'primary', variant: 'solid', size: 'xs' }" :ui="{ close: 'top-3.5 rounded-full' }">
<UButton label="Open with custom close button" color="gray" />
<UButton label="Open with custom close button" color="gray" variant="subtle" />
<template #body>
<Placeholder class="h-full w-full" />
</template>
</USlideover>
<UButton label="Open programmatically" color="white" @click="openSlideover" />
<UButton label="Open programmatically" color="gray" variant="outline" @click="openSlideover" />
</div>
</template>

4
playground/app/pages/slider.vue
View File

@@ -10,11 +10,11 @@ const value = ref(50)
<div class="flex flex-col gap-6 items-center">
<div class="flex flex-col gap-6 w-48">
<USlider v-model="value" />
<USlider color="gray" :model-value="50" />
<USlider color="error" :model-value="50" />
<USlider :default-value="100" />
<USlider inverted />
<USlider disabled />
<USlider color="black" :model-value="50" />
<USlider color="red" :model-value="50" />
<USlider :min="4" :max="12" :step="2" :model-value="6" />
</div>

8
playground/app/pages/switch.vue
View File

@@ -3,18 +3,18 @@ import theme from '#build/ui/switch'
const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
const checked = ref(false)
const checked = ref(true)
</script>
<template>
<div class="flex flex-col items-center gap-4">
<div class="flex flex-col gap-4 ml-[-114px]">
<USwitch v-model="checked" label="Model" />
<USwitch v-model="checked" label="Primary" />
<USwitch color="gray" label="Gray" :default-value="true" />
<USwitch color="error" label="Error" :default-value="true" />
<USwitch label="Default value" :default-value="true" />
<USwitch label="Required" required />
<USwitch label="Disabled" disabled />
<USwitch color="black" label="Black" :default-value="true" />
<USwitch color="red" label="Red" :default-value="true" />
</div>
<div class="flex items-center gap-4 ml-[-82px]">
<USwitch v-for="size in sizes" :key="size" :size="size" label="Switch me" />

35
playground/app/pages/textarea.vue
View File

@@ -1,21 +1,46 @@
<script setup lang="ts">
import { upperFirst } from 'scule'
import theme from '#build/ui/textarea'
const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme.variants.variant>
</script>
<template>
<div class="flex flex-col items-center gap-4">
<div class="flex flex-col gap-4 w-60">
<div class="flex flex-col gap-4 w-48">
<UTextarea autofocus />
<UTextarea placeholder="Search..." color="gray" />
<UTextarea placeholder="Search..." color="primary" />
<UTextarea placeholder="Search..." variant="none" />
</div>
<div class="flex items-center gap-2">
<UTextarea v-for="variant in variants" :key="variant" :placeholder="upperFirst(variant)" :variant="variant" class="w-48" />
</div>
<div class="flex items-center gap-2">
<UTextarea
v-for="variant in variants"
:key="variant"
:placeholder="upperFirst(variant)"
:variant="variant"
color="gray"
class="w-48"
/>
</div>
<div class="flex items-center gap-2">
<UTextarea
v-for="variant in variants"
:key="variant"
:placeholder="upperFirst(variant)"
:variant="variant"
color="error"
highlight
class="w-48"
/>
</div>
<div class="flex flex-col gap-4 w-48">
<UTextarea placeholder="Search..." disabled />
<UTextarea autoresize :maxrows="5" :rows="1" />
</div>
<div class="flex items-center gap-4">
<UTextarea v-for="size in sizes" :key="size" placeholder="Search..." :size="size" class="w-60" />
<UTextarea v-for="size in sizes" :key="size" placeholder="Search..." :size="size" class="w-48" />
</div>
</div>
</template>

9
playground/app/pages/toast.vue
View File

@@ -55,7 +55,8 @@ const templates = (id: number) => [{
}
}, {
label: 'Action 2',
color: 'black' as const,
color: 'gray' as const,
variant: 'outline' as const,
click() {
console.log(`Toast ${id} action 2 clicked`)
}
@@ -115,9 +116,9 @@ function removeToast() {
</div>
<div class="flex items-center gap-2">
<UButton label="Add new" color="gray" @click="addToast" />
<UButton label="Update last" color="gray" @click="updateToast" />
<UButton label="Remove last" color="gray" @click="removeToast" />
<UButton label="Add new" color="gray" variant="outline" @click="addToast" />
<UButton label="Update last" color="gray" variant="outline" @click="updateToast" />
<UButton label="Remove last" color="gray" variant="outline" @click="removeToast" />
</div>
</div>
</template>

5
src/module.ts
View File

@@ -14,7 +14,7 @@ export interface ModuleOptions {
prefix?: string
/**
* Colors to generate classes for (based on TailwindCSS colors)
* @defaultValue ['primary', 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchia', 'pink', 'rose']
* @defaultValue ['red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchia', 'pink', 'rose']
*/
colors?: string[]
/**
@@ -40,7 +40,7 @@ export default defineNuxtModule<ModuleOptions>({
async setup(options, nuxt) {
const { resolve } = createResolver(import.meta.url)
options.colors = options.colors?.length ? [...new Set(['primary', ...options.colors])] : ['primary', 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchia', 'pink', 'rose']
options.colors = options.colors?.length ? [...new Set(['primary', 'error', ...options.colors])] : ['primary', 'error', 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchia', 'pink', 'rose']
// @ts-expect-error - Add ui options to nuxt
nuxt.options.ui = options
@@ -50,6 +50,7 @@ export default defineNuxtModule<ModuleOptions>({
nuxt.options.appConfig.ui = defu(nuxt.options.appConfig.ui || {}, {
colors: {
primary: 'green',
error: 'red',
gray: 'cool'
},
icons

2
src/runtime/components/FormField.vue
View File

@@ -93,7 +93,7 @@ provide(formFieldInjectionKey, computed(() => ({
</p>
</div>
<div :class="[label && ui.container()]">
<div :class="[label && ui.container({ class: props.ui?.container })]">
<slot :error="error" />
<p v-if="(typeof error === 'string' && error) || !!slots.error" :class="ui.error({ class: props.ui?.error })">

8
src/runtime/components/Input.vue
View File

@@ -5,6 +5,7 @@ import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config'
import theme from '#build/ui/input'
import type { UseComponentIconsProps } from '../composables/useComponentIcons'
import type { PartialString } from '../types/utils'
const appConfig = _appConfig as AppConfig & { ui: { input: Partial<typeof theme> } }
@@ -25,8 +26,10 @@ export interface InputProps extends UseComponentIconsProps {
autofocus?: boolean
autofocusDelay?: number
disabled?: boolean
/** Highlight the ring color like a focus state. */
highlight?: boolean
class?: any
ui?: Partial<typeof input.slots>
ui?: PartialString<typeof input.slots>
}
export interface InputEmits {
@@ -59,7 +62,7 @@ const slots = defineSlots<InputSlots>()
const [modelValue, modelModifiers] = defineModel<string | number>()
const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled } = useFormField<InputProps>(props)
const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
@@ -71,6 +74,7 @@ const ui = computed(() => input({
variant: props.variant,
size: inputSize?.value,
loading: props.loading,
highlight: highlight.value,
leading: isLeading.value || !!slots.leading,
trailing: isTrailing.value || !!slots.trailing,
buttonGroup: orientation.value

5
src/runtime/components/InputMenu.vue
View File

@@ -81,6 +81,8 @@ export interface InputMenuProps<T> extends Pick<ComboboxRootProps<T>, 'modelValu
*/
filter?: boolean | string[]
items?: T[] | T[][]
/** Highlight the ring color like a focus state. */
highlight?: boolean
class?: any
ui?: PartialString<typeof inputMenu.slots>
}
@@ -131,7 +133,7 @@ const searchTerm = defineModel<string>('searchTerm', { default: '' })
const appConfig = useAppConfig()
const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'open', 'defaultOpen', 'multiple', 'resetSearchTermOnBlur'), emits)
const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, position: 'popper' }) as ComboboxContentProps)
const { emitFormBlur, emitFormChange, emitFormInput, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
const { emitFormBlur, emitFormChange, emitFormInput, size: formGroupSize, color, id, name, highlight, disabled } = useFormField<InputProps>(props)
const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })))
@@ -142,6 +144,7 @@ const ui = computed(() => inputMenu({
variant: props.variant,
size: inputSize?.value,
loading: props.loading,
highlight: highlight.value,
leading: isLeading.value || !!slots.leading,
trailing: isTrailing.value || !!slots.trailing,
multiple: props.multiple,

4
src/runtime/components/Kbd.vue
View File

@@ -18,7 +18,7 @@ export interface KbdProps {
*/
as?: any
value: KbdKey | string
color?: KbdVariants['color']
variant?: KbdVariants['variant']
size?: KbdVariants['size']
class?: any
}
@@ -41,7 +41,7 @@ const { getKbdKey } = useKbd()
</script>
<template>
<Primitive :as="as" :class="kbd({ color, size, class: props.class })">
<Primitive :as="as" :class="kbd({ variant, size, class: props.class })">
<slot>
{{ getKbdKey(value) }}
</slot>

3
src/runtime/components/NavigationMenu.vue
View File

@@ -136,7 +136,8 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
<slot :name="item.slot ? `${item.slot}-trailing`: 'item-trailing'" :item="item" :active="active" :index="index">
<UBadge
v-if="item.badge"
color="white"
color="gray"
variant="outline"
:size="(ui.linkTrailingBadgeSize() as BadgeProps['size'])"
v-bind="(typeof item.badge === 'string' || typeof item.badge === 'number') ? { label: item.badge } : item.badge"
:class="ui.linkTrailingBadge({ class: props.ui?.linkTrailingBadge })"

6
src/runtime/components/Pagination.vue
View File

@@ -105,9 +105,9 @@ import { reactivePick } from '@vueuse/core'
import { useAppConfig } from '#imports'
const props = withDefaults(defineProps<PaginationProps>(), {
color: 'white',
activeColor: 'black',
variant: 'solid',
color: 'gray',
activeColor: 'primary',
variant: 'outline',
activeVariant: 'solid',
showControls: true
})

5
src/runtime/components/Select.vue
View File

@@ -59,6 +59,8 @@ export interface SelectProps<T> extends Omit<SelectRootProps, 'dir'>, UseCompone
*/
portal?: boolean
items?: T[] | T[][]
/** Highlight the ring color like a focus state. */
highlight?: boolean
class?: any
ui?: PartialString<typeof select.slots>
}
@@ -99,7 +101,7 @@ const appConfig = useAppConfig()
const rootProps = useForwardPropsEmits(reactivePick(props, 'modelValue', 'defaultValue', 'open', 'defaultOpen', 'disabled', 'autocomplete', 'required'), emits)
const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, position: 'popper' }) as SelectContentProps)
const { emitFormChange, emitFormInput, emitFormBlur, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
const { emitFormChange, emitFormInput, emitFormBlur, size: formGroupSize, color, id, name, highlight, disabled } = useFormField<InputProps>(props)
const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })))
@@ -110,6 +112,7 @@ const ui = computed(() => select({
variant: props.variant,
size: selectSize?.value,
loading: props.loading,
highlight: highlight.value,
leading: isLeading.value || !!slots.leading,
trailing: isTrailing.value || !!slots.trailing,
buttonGroup: orientation.value

5
src/runtime/components/SelectMenu.vue
View File

@@ -68,6 +68,8 @@ export interface SelectMenuProps<T> extends Pick<ComboboxRootProps<T>, 'modelVal
*/
filter?: boolean | string[]
items?: T[] | T[][]
/** Highlight the ring color like a focus state. */
highlight?: boolean
class?: any
ui?: PartialString<typeof selectMenu.slots>
}
@@ -115,7 +117,7 @@ const searchTerm = defineModel<string>('searchTerm', { default: '' })
const appConfig = useAppConfig()
const rootProps = useForwardPropsEmits(reactivePick(props, 'modelValue', 'defaultValue', 'open', 'defaultOpen', 'multiple', 'resetSearchTermOnBlur'), emits)
const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, position: 'popper' }) as ComboboxContentProps)
const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled } = useFormField<InputProps>(props)
const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })))
@@ -126,6 +128,7 @@ const ui = computed(() => selectMenu({
variant: props.variant,
size: selectSize?.value,
loading: props.loading,
highlight: highlight.value,
leading: isLeading.value || !!slots.leading,
trailing: isTrailing.value || !!slots.trailing,
buttonGroup: orientation.value

7
src/runtime/components/Textarea.vue
View File

@@ -26,6 +26,8 @@ export interface TextareaProps {
rows?: number
maxrows?: number
autoresize?: boolean
/** Highlight the ring color like a focus state. */
highlight?: boolean
ui?: Partial<typeof textarea.slots>
}
@@ -57,12 +59,13 @@ const emits = defineEmits<TextareaEmits>()
const [modelValue, modelModifiers] = defineModel<string | number>()
const { emitFormBlur, emitFormInput, emitFormChange, size, color, id, name, disabled } = useFormField<TextareaProps>(props)
const { emitFormBlur, emitFormInput, emitFormChange, size, color, id, name, highlight, disabled } = useFormField<TextareaProps>(props)
const ui = computed(() => textarea({
color: color.value,
variant: props.variant,
size: size?.value
size: size?.value,
highlight: highlight.value
}))
const textareaRef = ref<HTMLTextAreaElement | null>(null)

4
src/runtime/composables/useFormField.ts
View File

@@ -11,6 +11,7 @@ type Props<T> = {
color?: GetObjectField<T, 'color'>
eagerValidation?: boolean
legend?: string
highlight?: boolean
disabled?: boolean
}
@@ -64,7 +65,8 @@ export function useFormField<T>(props?: Props<T>) {
id: computed(() => props?.id ?? formField?.value.id),
name: computed(() => props?.name ?? formField?.value.name),
size: computed(() => props?.size ?? formField?.value.size),
color: computed(() => formField?.value.error ? 'red' : props?.color),
color: computed(() => formField?.value.error ? 'error' : props?.color),
highlight: computed(() => formField?.value.error ? true : props?.highlight),
disabled: computed(() => formOptions?.value.disabled || props?.disabled),
emitFormBlur,
emitFormInput,

1
src/templates.ts
View File

@@ -36,6 +36,7 @@ export function addTemplates(options: ModuleOptions, nuxt: Nuxt) {
--spacing-4_5: 1.125rem;
${shades.map(shade => `--color-primary-${shade}: var(--color-primary-${shade});`).join('\n\t')}
${shades.map(shade => `--color-error-${shade}: var(--color-error-${shade});`).join('\n\t')}
${shades.map(shade => `--color-gray-${shade}: var(--color-gray-${shade});`).join('\n\t')}
}
`

44
src/theme/alert.ts
View File

@@ -5,19 +5,17 @@ export default (options: Required<ModuleOptions>) => ({
root: 'relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5',
wrapper: 'min-w-0 flex-1 flex flex-col gap-1',
title: 'text-sm font-medium',
description: 'text-sm',
description: 'text-sm opacity-90',
icon: 'shrink-0 size-5',
avatar: 'shrink-0',
avatarSize: '2xl',
actions: 'flex gap-1.5 shrink-0',
close: 'p-0'
close: 'p-0.5'
},
variants: {
color: {
...Object.fromEntries(options.colors.map((color: string) => [color, ''])),
white: '',
gray: '',
black: ''
gray: ''
},
variant: {
solid: '',
@@ -46,7 +44,7 @@ export default (options: Required<ModuleOptions>) => ({
color,
variant: 'outline',
class: {
root: `text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500 dark:ring-${color}-400`
root: `text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500/25 dark:ring-${color}-400/25`
}
})), ...options.colors.map((color: string) => ({
color,
@@ -61,26 +59,32 @@ export default (options: Required<ModuleOptions>) => ({
root: `bg-${color}-500/10 dark:bg-${color}-400/10 text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500/25 dark:ring-${color}-400/25`
}
})), {
color: 'white',
variant: 'solid',
class: {
root: 'ring ring-inset ring-gray-200 dark:ring-gray-800 text-gray-900 dark:text-white bg-white dark:bg-gray-900'
}
}, {
color: 'gray',
variant: 'solid',
class: {
root: 'ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-800'
}
}, {
color: 'black',
variant: 'solid',
class: {
root: 'text-white dark:text-gray-900 bg-gray-900 dark:bg-white'
}
}, {
color: 'gray',
variant: 'outline',
class: {
root: 'ring ring-inset ring-gray-200 dark:ring-gray-800 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-900'
}
}, {
color: 'gray',
variant: 'soft',
class: {
root: 'text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-800/50'
}
}, {
color: 'gray',
variant: 'subtle',
class: {
root: 'ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-800/50'
}
}],
defaultVariants: {
color: 'white',
variant: 'solid'
color: 'primary',
variant: 'outline'
}
})

26
src/theme/badge.ts
View File

@@ -5,9 +5,7 @@ export default (options: Required<ModuleOptions>) => ({
variants: {
color: {
...Object.fromEntries(options.colors.map((color: string) => [color, ''])),
white: '',
gray: '',
black: ''
gray: ''
},
variant: {
solid: '',
@@ -28,7 +26,7 @@ export default (options: Required<ModuleOptions>) => ({
})), ...options.colors.map((color: string) => ({
color,
variant: 'outline',
class: `text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500 dark:ring-${color}-400`
class: `text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500/50 dark:ring-${color}-400/50`
})), ...options.colors.map((color: string) => ({
color,
variant: 'soft',
@@ -38,17 +36,21 @@ export default (options: Required<ModuleOptions>) => ({
variant: 'subtle',
class: `bg-${color}-500/10 dark:bg-${color}-400/10 text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500/25 dark:ring-${color}-400/25`
})), {
color: 'white',
variant: 'solid',
class: 'ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white dark:bg-gray-900'
}, {
color: 'gray',
variant: 'solid',
class: 'ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-800'
}, {
color: 'black',
variant: 'solid',
class: 'text-white dark:text-gray-900 bg-gray-900 dark:bg-white'
}, {
color: 'gray',
variant: 'outline',
class: 'ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-900'
}, {
color: 'gray',
variant: 'soft',
class: 'text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-800'
}, {
color: 'gray',
variant: 'subtle',
class: 'ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-800'
}],
defaultVariants: {
color: 'primary',

2
src/theme/breadcrumb.ts
View File

@@ -5,7 +5,7 @@ export default (options: Required<ModuleOptions>) => ({
root: 'relative min-w-0',
list: 'flex items-center gap-1.5',
item: 'flex min-w-0',
link: 'group relative flex items-center gap-1.5 text-sm min-w-0',
link: 'group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400',
linkLeadingIcon: 'shrink-0 size-5',
linkLeadingAvatar: 'shrink-0',
linkLeadingAvatarSize: '2xs',

56
src/theme/button.ts
View File

@@ -13,9 +13,7 @@ export default (options: Required<ModuleOptions>) => ({
...buttonGroupVariant,
color: {
...Object.fromEntries(options.colors.map((color: string) => [color, ''])),
white: '',
gray: '',
black: ''
gray: ''
},
variant: {
solid: '',
@@ -74,63 +72,51 @@ export default (options: Required<ModuleOptions>) => ({
compoundVariants: [...options.colors.map((color: string) => ({
color,
variant: 'solid',
class: `shadow-sm text-white dark:text-gray-900 bg-${color}-500 hover:bg-${color}-600 disabled:bg-${color}-500 dark:bg-${color}-400 dark:hover:bg-${color}-500 dark:disabled:bg-${color}-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`
class: `text-white dark:text-gray-900 bg-${color}-500 hover:bg-${color}-600 disabled:bg-${color}-500 dark:bg-${color}-400 dark:hover:bg-${color}-500 dark:disabled:bg-${color}-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`
})), ...options.colors.map((color: string) => ({
color,
variant: 'outline',
class: `ring ring-inset ring-current text-${color}-500 dark:text-${color}-400 hover:bg-${color}-500/20 disabled:bg-transparent dark:hover:bg-${color}-400/20 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
class: `ring ring-inset ring-${color}-500/50 dark:ring-${color}-400/50 text-${color}-500 dark:text-${color}-400 hover:bg-${color}-500/10 disabled:bg-transparent dark:hover:bg-${color}-400/10 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
})), ...options.colors.map((color: string) => ({
color,
variant: 'soft',
class: `text-${color}-500 dark:text-${color}-400 bg-${color}-500/10 hover:bg-${color}-500/20 disabled:bg-${color}-500/10 dark:bg-${color}-400/10 dark:hover:bg-${color}-400/20 dark:disabled:bg-${color}-400/10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
class: `text-${color}-500 dark:text-${color}-400 bg-${color}-500/10 hover:bg-${color}-500/15 focus-visible:bg-${color}-500/15 disabled:bg-${color}-500/10 dark:bg-${color}-400/10 dark:hover:bg-${color}-400/15 dark:focus-visible:bg-${color}-400/15 dark:disabled:bg-${color}-400/10`
})), ...options.colors.map((color: string) => ({
color,
variant: 'subtle',
class: `text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500/25 dark:ring-${color}-400/25 bg-${color}-500/10 hover:bg-${color}-500/20 disabled:bg-${color}-500/10 dark:bg-${color}-400/10 dark:hover:bg-${color}-400/20 dark:disabled:bg-${color}-400/10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
class: `text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500/25 dark:ring-${color}-400/25 bg-${color}-500/10 hover:bg-${color}-500/15 disabled:bg-${color}-500/10 dark:bg-${color}-400/10 dark:hover:bg-${color}-400/15 dark:disabled:bg-${color}-400/10 focus-visible:ring-2 focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
})), ...options.colors.map((color: string) => ({
color,
variant: 'ghost',
class: `text-${color}-500 dark:text-${color}-400 hover:bg-${color}-500/20 disabled:bg-transparent dark:hover:bg-${color}-400/20 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
class: `text-${color}-500 dark:text-${color}-400 hover:bg-${color}-500/10 focus-visible:bg-${color}-500/10 disabled:bg-transparent dark:hover:bg-${color}-400/10 dark:focus-visible:bg-${color}-400/10 dark:disabled:bg-transparent`
})), ...options.colors.map((color: string) => ({
color,
variant: 'link',
class: `text-${color}-500 hover:text-${color}-600 disabled:text-${color}-500 dark:text-${color}-400 dark:hover:text-${color}-500 dark:disabled:text-${color}-400 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
})), {
color: 'white',
variant: 'solid',
class: 'shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
}, {
color: 'white',
variant: 'ghost',
class: 'text-gray-900 dark:text-white hover:bg-white disabled:bg-transparent dark:hover:bg-gray-900 dark:disabled:bg-transparent focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
}, {
color: 'white',
variant: 'link',
class: 'text-gray-900 hover:text-gray-500 disabled:text-gray-900 dark:text-white dark:hover:text-gray-400 dark:disabled:text-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
}, {
color: 'gray',
variant: 'solid',
class: 'shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 hover:bg-gray-100 disabled:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
class: 'text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-700 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-200 dark:disabled:bg-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 dark:focus-visible:outline-white'
}, {
color: 'gray',
variant: 'outline',
class: 'ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-white hover:bg-gray-100 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-white'
}, {
color: 'gray',
variant: 'soft',
class: 'text-gray-700 dark:text-gray-200 bg-gray-100 hover:bg-gray-200 focus-visible:bg-gray-200 disabled:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:focus-visible:bg-gray-700/50 dark:disabled:bg-gray-800'
}, {
color: 'gray',
variant: 'subtle',
class: 'ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-100 hover:bg-gray-200 disabled:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-white'
}, {
color: 'gray',
variant: 'ghost',
class: 'text-gray-700 dark:text-gray-200 hover:bg-gray-50 disabled:bg-transparent dark:hover:bg-gray-800 dark:hover:disabled:bg-transparent focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
class: 'text-gray-700 dark:text-gray-200 hover:bg-gray-100 focus-visible:bg-gray-100 disabled:bg-transparent dark:hover:bg-gray-800 dark:focus-visible:bg-gray-800 dark:hover:disabled:bg-transparent'
}, {
color: 'gray',
variant: 'link',
class: 'text-gray-500 hover:text-gray-700 disabled:text-gray-500 dark:text-gray-400 dark:hover:text-gray-200 dark:disabled:text-gray-400 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
}, {
color: 'black',
variant: 'solid',
class: 'shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-200 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
}, {
color: 'black',
variant: 'ghost',
class: 'text-gray-900 hover:text-white disabled:text-gray-900 dark:text-white dark:hover:text-gray-900 dark:disabled:text-white hover:bg-gray-900 disabled:bg-transparent dark:hover:bg-white dark:disabled:bg-transparent focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
}, {
color: 'black',
variant: 'link',
class: 'text-gray-900 hover:text-gray-500 disabled:text-gray-900 dark:text-white dark:hover:text-gray-400 dark:disabled:text-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
class: 'text-gray-500 hover:text-gray-700 disabled:text-gray-500 dark:text-gray-400 dark:hover:text-gray-200 dark:disabled:text-gray-400 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-white'
}, {
size: 'xs',
square: true,

6
src/theme/checkbox.ts
View File

@@ -13,7 +13,7 @@ export default (options: Required<ModuleOptions>) => ({
variants: {
color: {
...Object.fromEntries(options.colors.map((color: string) => [color, `focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`])),
black: 'focus-visible:outline-gray-900 dark:focus-visible:outline-white'
gray: 'focus-visible:outline-gray-900 dark:focus-visible:outline-white'
},
size: {
xs: {
@@ -44,7 +44,7 @@ export default (options: Required<ModuleOptions>) => ({
},
required: {
true: {
label: 'after:content-[\'*\'] after:ms-0.5 after:text-red-500 dark:after:text-red-400'
label: 'after:content-[\'*\'] after:ms-0.5 after:text-error-500 dark:after:text-error-400'
}
},
disabled: {
@@ -63,7 +63,7 @@ export default (options: Required<ModuleOptions>) => ({
checked: true,
class: `ring-2 ring-${color}-500 dark:ring-${color}-400 bg-${color}-500 dark:bg-${color}-400`
})), {
color: 'black',
color: 'gray',
checked: true,
class: 'ring-2 ring-gray-900 dark:ring-white bg-gray-900 dark:bg-white'
}],

4
src/theme/chip.ts
View File

@@ -8,9 +8,7 @@ export default (options: Required<ModuleOptions>) => ({
variants: {
color: {
...Object.fromEntries(options.colors.map((color: string) => [color, `bg-${color}-500 dark:bg-${color}-400`])),
gray: 'bg-gray-500 dark:bg-gray-400',
white: 'bg-white dark:bg-gray-900',
black: 'bg-gray-900 dark:bg-white'
gray: 'bg-gray-500 dark:bg-gray-400'
},
size: {
'3xs': 'h-[4px] min-w-[4px] text-[4px]',

4
src/theme/form-field.ts
View File

@@ -6,7 +6,7 @@ export default {
label: 'block font-medium text-gray-700 dark:text-gray-200',
container: 'mt-1 relative',
description: 'text-gray-500 dark:text-gray-400',
error: 'mt-2 text-red-500 dark:text-red-400',
error: 'mt-2 text-error-500 dark:text-error-400',
hint: 'text-gray-500 dark:text-gray-400',
help: 'mt-2 text-gray-500 dark:text-gray-400'
},
@@ -20,7 +20,7 @@ export default {
},
required: {
true: {
label: `after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-400`
label: `after:content-['*'] after:ms-0.5 after:text-error-500 dark:after:text-error-400`
}
}
},

23
src/theme/input-menu.ts
View File

@@ -21,25 +21,25 @@ export default (options: Required<ModuleOptions>) => {
itemTrailing: 'ms-auto inline-flex gap-1.5 items-center',
itemTrailingIcon: 'shrink-0',
itemLabel: 'truncate',
tagsItem: 'px-1.5 py-0.5 rounded font-medium inline-flex items-center gap-0.5 ring ring-inset ring-gray-300 dark:ring-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-200 data-disabled:cursor-not-allowed data-disabled:opacity-75',
tagsItem: 'px-1.5 py-0.5 rounded font-medium inline-flex items-center gap-0.5 ring ring-inset ring-gray-300 dark:ring-gray-700 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200 data-disabled:cursor-not-allowed data-disabled:opacity-75',
tagsItemText: 'truncate',
tagsItemDelete: ['inline-flex items-center rounded-sm text-gray-400 dark:text-gray-500 hover:text-gray-700 hover:bg-gray-100 dark:hover:text-gray-200 dark:hover:bg-gray-700/50 disabled:pointer-events-none', options.transitions && 'transition-colors'],
tagsItemDelete: ['inline-flex items-center rounded-sm text-gray-400 dark:text-gray-500 hover:text-gray-700 hover:bg-gray-200 dark:hover:text-gray-200 dark:hover:bg-gray-700/50 disabled:pointer-events-none', options.transitions && 'transition-colors'],
tagsItemDeleteIcon: '',
tagsInput: 'border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75'
}
}, {
slots: {
base: 'rounded-md',
base: ['rounded-md', options.transitions && 'transition-colors'],
trailing: 'absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75'
},
variants: {
multiple: {
true: {
root: 'flex-wrap',
base: 'has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-primary-500 dark:has-[:focus-visible]:ring-primary-400'
base: ''
},
false: {
base: 'w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75'
base: 'w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75'
}
},
size: {
@@ -94,6 +94,17 @@ export default (options: Required<ModuleOptions>) => {
tagsItemDeleteIcon: 'size-4'
}
}
}
},
compoundVariants: [...options.colors.map((color: string) => ({
color,
multiple: true,
variant: ['outline', 'subtle'],
class: `has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-${color}-500 dark:has-[:focus-visible]:ring-${color}-400`
})), {
color: 'gray',
multiple: true,
variant: ['outline', 'subtle'],
class: 'has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-gray-500 dark:has-[:focus-visible]:ring-white'
}]
}, input(options))
}

33
src/theme/input.ts
View File

@@ -4,7 +4,7 @@ import { buttonGroupVariantWithRoot } from './button-group'
export default (options: Required<ModuleOptions>) => ({
slots: {
root: 'relative inline-flex items-center',
base: 'w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75',
base: ['w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75', options.transitions && 'transition-colors'],
leading: 'absolute inset-y-0 start-0 flex items-center',
leadingIcon: 'shrink-0 text-gray-400 dark:text-gray-500',
leadingAvatar: 'shrink-0',
@@ -51,12 +51,14 @@ export default (options: Required<ModuleOptions>) => ({
}
},
variant: {
outline: '',
none: 'bg-transparent'
outline: 'text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700',
soft: 'text-gray-900 dark:text-white bg-gray-50 hover:bg-gray-100 focus:bg-gray-100 disabled:bg-gray-50 dark:bg-gray-800/50 dark:hover:bg-gray-800 dark:focus:bg-gray-800 dark:disabled:bg-gray-800/50',
subtle: 'text-gray-900 dark:text-white bg-gray-100 dark:bg-gray-800 ring ring-inset ring-gray-300 dark:ring-gray-700',
ghost: 'text-gray-900 dark:text-white hover:bg-gray-100 focus:bg-gray-100 disabled:bg-transparent dark:hover:bg-gray-800 dark:focus:bg-gray-800 dark:disabled:bg-transparent',
none: 'text-gray-900 dark:text-white'
},
color: {
...Object.fromEntries(options.colors.map((color: string) => [color, ''])),
white: '',
gray: ''
},
leading: {
@@ -68,22 +70,29 @@ export default (options: Required<ModuleOptions>) => ({
loading: {
true: ''
},
highlight: {
true: ''
},
type: {
file: 'file:mr-1.5 file:font-medium file:text-gray-500 dark:file:text-gray-400 file:outline-none'
}
},
compoundVariants: [...options.colors.map((color: string) => ({
color,
variant: 'outline',
class: `shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-inset ring-${color}-500 dark:ring-${color}-400 focus-visible:ring-2 focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
variant: ['outline', 'subtle'],
class: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
})), ...options.colors.map((color: string) => ({
color,
highlight: true,
class: `ring ring-inset ring-${color}-500 dark:ring-${color}-400`
})), {
color: 'white',
variant: 'outline',
class: 'shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
color: 'gray',
variant: ['outline', 'subtle'],
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-gray-900 dark:focus-visible:ring-white'
}, {
color: 'gray',
variant: 'outline',
class: 'shadow-sm bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
highlight: true,
class: 'ring ring-inset ring-gray-900 dark:ring-white'
}, {
leading: true,
size: 'xs',
@@ -140,7 +149,7 @@ export default (options: Required<ModuleOptions>) => ({
}],
defaultVariants: {
size: 'md',
color: 'white',
color: 'primary',
variant: 'outline'
}
})

10
src/theme/kbd.ts
View File

@@ -1,10 +1,10 @@
export default {
base: 'inline-flex items-center justify-center px-1 rounded font-medium font-sans',
variants: {
color: {
white: 'bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700',
gray: 'bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-200 ring ring-inset ring-gray-300 dark:ring-gray-700',
black: 'bg-gray-900 dark:bg-white text-white dark:text-gray-900'
variant: {
solid: 'bg-gray-900 dark:bg-white text-white dark:text-gray-900',
outline: 'bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700',
subtle: 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200 ring ring-inset ring-gray-300 dark:ring-gray-700'
},
size: {
sm: 'h-4 min-w-[16px] text-[10px]',
@@ -13,7 +13,7 @@ export default {
}
},
defaultVariants: {
color: 'white',
variant: 'outline',
size: 'md'
}
}

20
src/theme/navigation-menu.ts
View File

@@ -5,7 +5,7 @@ export default (options: Required<ModuleOptions>) => ({
root: 'relative flex gap-1.5',
list: 'isolate min-w-0',
item: 'min-w-0',
link: 'group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400',
link: 'group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2',
linkLeadingIcon: 'shrink-0 size-5',
linkLeadingAvatar: 'shrink-0',
linkLeadingAvatarSize: '2xs',
@@ -33,12 +33,18 @@ export default (options: Required<ModuleOptions>) => ({
},
variants: {
color: {
...Object.fromEntries(options.colors.map((color: string) => [color, ''])),
black: ''
...Object.fromEntries(options.colors.map((color: string) => [color, {
link: `focus-visible:before:ring-${color}-500 dark:focus-visible:before:ring-${color}-400`,
childLink: `focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`
}])),
gray: {
link: 'focus-visible:before:ring-gray-900 dark:focus-visible:before:ring-white',
childLink: 'focus-visible:outline-gray-900 dark:focus-visible:outline-white'
}
},
highlightColor: {
...Object.fromEntries(options.colors.map((color: string) => [color, ''])),
black: ''
gray: ''
},
variant: {
pill: '',
@@ -108,7 +114,7 @@ export default (options: Required<ModuleOptions>) => ({
linkLeadingIcon: `text-${color}-500 dark:text-${color}-400`
}
})), {
color: 'black',
color: 'gray',
variant: 'pill',
active: true,
class: {
@@ -146,7 +152,7 @@ export default (options: Required<ModuleOptions>) => ({
linkLeadingIcon: `text-${color}-500 dark:text-${color}-400`
}
})), {
color: 'black',
color: 'gray',
variant: 'link',
active: true,
class: {
@@ -161,7 +167,7 @@ export default (options: Required<ModuleOptions>) => ({
link: `after:bg-${highlightColor}-500 dark:after:bg-${highlightColor}-400`
}
})), {
highlightColor: 'black',
highlightColor: 'gray',
highlight: true,
active: true,
class: {

2
src/theme/progress.ts
View File

@@ -21,7 +21,7 @@ export default (options: Required<ModuleOptions>) => ({
indicator: `bg-${color}-500 dark:bg-${color}-400`,
steps: `text-${color}-500 dark:text-${color}-400`
}])),
black: {
gray: {
indicator: 'bg-gray-900 dark:bg-white',
steps: 'text-white dark:text-gray-900'
}

4
src/theme/radio-group.ts
View File

@@ -19,7 +19,7 @@ export default (options: Required<ModuleOptions>) => ({
base: `focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`,
indicator: `bg-${color}-500 dark:bg-${color}-400`
}])),
black: {
gray: {
base: 'focus-visible:outline-gray-900 dark:focus-visible:outline-white',
indicator: 'bg-gray-900 dark:bg-white'
}
@@ -78,7 +78,7 @@ export default (options: Required<ModuleOptions>) => ({
},
required: {
true: {
legend: 'after:content-[\'*\'] after:ms-0.5 after:text-red-500 dark:after:text-red-400'
legend: 'after:content-[\'*\'] after:ms-0.5 after:text-error-500 dark:after:text-error-400'
}
}
},

5
src/theme/select.ts
View File

@@ -66,13 +66,10 @@ export default (options: Required<ModuleOptions>) => {
itemTrailingIcon: 'size-6'
}
}
},
defaultVariants: {
size: 'md'
}
}, {
slots: {
base: 'relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75',
base: ['relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75', options.transitions && 'transition-colors'],
value: 'truncate group-data-placeholder:text-current/50'
},
variants: {

4
src/theme/separator.ts
View File

@@ -13,9 +13,7 @@ export default (options: Required<ModuleOptions>) => ({
variants: {
color: {
...Object.fromEntries(options.colors.map((color: string) => [color, { border: `border-${color}-500 dark:border-${color}-400` }])),
white: { border: 'border-white dark:border-gray-900' },
gray: { border: 'border-gray-200 dark:border-gray-800' },
black: { border: 'border-gray-900 dark:border-white' }
gray: { border: 'border-gray-200 dark:border-gray-800' }
},
orientation: {
horizontal: {

2
src/theme/slider.ts
View File

@@ -13,7 +13,7 @@ export default (options: Required<ModuleOptions>) => ({
range: `bg-${color}-500 dark:bg-${color}-400`,
thumb: `ring-${color}-500 dark:ring-${color}-400 focus-visible:outline-${color}-500/50 dark:focus-visible:outline-${color}-400/50`
}])),
black: {
gray: {
range: 'bg-gray-900 dark:bg-white',
thumb: 'ring-gray-900 dark:ring-white focus-visible:outline-gray-900/50 dark:focus-visible:outline-white/50'
}

4
src/theme/switch.ts
View File

@@ -17,7 +17,7 @@ export default (options: Required<ModuleOptions>) => ({
base: `data-[state=checked]:bg-${color}-500 dark:data-[state=checked]:bg-${color}-400 focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`,
icon: `group-data-[state=checked]:text-${color}-500 dark:group-data-[state=checked]:text-${color}-400`
}])),
black: {
gray: {
base: 'data-[state=checked]:bg-gray-900 dark:data-[state=checked]:bg-white focus-visible:ring-gray-900 dark:focus-visible:ring-white',
icon: 'group-data-[state=checked]:text-gray-900 dark:group-data-[state=checked]:text-white'
}
@@ -71,7 +71,7 @@ export default (options: Required<ModuleOptions>) => ({
},
required: {
true: {
label: 'after:content-[\'*\'] after:ms-0.5 after:text-red-500 dark:after:text-red-400'
label: 'after:content-[\'*\'] after:ms-0.5 after:text-error-500 dark:after:text-error-400'
}
},
disabled: {

28
src/theme/tabs.ts
View File

@@ -5,7 +5,7 @@ export default (options: Required<ModuleOptions>) => ({
root: 'flex items-center gap-2',
list: 'relative flex p-1 group',
indicator: 'absolute transition-[translate,width] duration-200',
trigger: ['relative inline-flex items-center shrink-0 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none', options.transitions && 'transition-colors'],
trigger: ['relative inline-flex items-center shrink-0 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none', options.transitions && 'transition-colors'],
content: 'focus:outline-none w-full',
leadingIcon: 'shrink-0',
leadingAvatar: 'shrink-0',
@@ -15,12 +15,11 @@ export default (options: Required<ModuleOptions>) => ({
variants: {
color: {
...Object.fromEntries(options.colors.map((color: string) => [color, ''])),
white: '',
black: ''
gray: ''
},
variant: {
pill: {
list: 'bg-gray-50 dark:bg-gray-800 rounded-lg',
list: 'bg-gray-100 dark:bg-gray-800 rounded-lg',
trigger: 'flex-1',
indicator: 'rounded-md shadow-sm'
},
@@ -101,39 +100,32 @@ export default (options: Required<ModuleOptions>) => ({
variant: 'pill',
class: {
indicator: `bg-${color}-500 dark:bg-${color}-400`,
trigger: 'data-[state=active]:text-white dark:data-[state=active]:text-gray-900'
trigger: `data-[state=active]:text-white dark:data-[state=active]:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`
}
})), {
color: 'white',
variant: 'pill',
class: {
indicator: 'bg-white dark:bg-gray-900',
trigger: 'data-[state=active]:text-gray-900 dark:data-[state=active]:text-white'
}
}, {
color: 'black',
color: 'gray',
variant: 'pill',
class: {
indicator: 'bg-gray-900 dark:bg-white',
trigger: 'data-[state=active]:text-white dark:data-[state=active]:text-gray-900'
trigger: 'data-[state=active]:text-white dark:data-[state=active]:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 dark:focus-visible:outline-white'
}
}, ...options.colors.map((color: string) => ({
color,
variant: 'link',
class: {
indicator: `bg-${color}-500 dark:bg-${color}-400`,
trigger: `data-[state=active]:text-${color}-500 dark:data-[state=active]:text-${color}-400`
trigger: `data-[state=active]:text-${color}-500 dark:data-[state=active]:text-${color}-400 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
}
})), {
color: ['white', 'black'],
color: 'gray',
variant: 'link',
class: {
indicator: 'bg-gray-900 dark:bg-white',
trigger: 'data-[state=active]:text-gray-900 dark:data-[state=active]:text-white'
trigger: 'data-[state=active]:text-gray-900 dark:data-[state=active]:text-white focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-gray-900 dark:focus-visible:ring-white'
}
}],
defaultVariants: {
color: 'white',
color: 'primary',
variant: 'pill',
size: 'md'
}

16
src/theme/toast.ts
View File

@@ -11,13 +11,19 @@ export default (options: Required<ModuleOptions>) => ({
avatarSize: '2xl',
actions: 'flex gap-1.5 shrink-0',
progress: 'absolute inset-x-0 bottom-0 h-1 z-[-1]',
close: 'p-0'
close: 'p-0.5'
},
variants: {
color: Object.fromEntries(options.colors.map((color: string) => [color, {
icon: `text-${color}-500 dark:text-${color}-400`,
progress: `bg-${color}-500 dark:bg-${color}-400`
}])),
color: {
...Object.fromEntries(options.colors.map((color: string) => [color, {
icon: `text-${color}-500 dark:text-${color}-400`,
progress: `bg-${color}-500 dark:bg-${color}-400`
}])),
gray: {
icon: 'text-gray-900 dark:text-white',
progress: 'bg-gray-900 dark:bg-white'
}
},
multiline: {
true: {
root: 'items-start',

5
test/components/Alert.spec.ts
View File

@@ -4,7 +4,6 @@ import ComponentRender from '../component-render'
import theme from '#build/ui/alert'
describe('Alert', () => {
const colors = Object.keys(theme.variants.color) as any
const variants = Object.keys(theme.variants.variant) as any
const props = { title: 'Alert' }
@@ -17,8 +16,8 @@ describe('Alert', () => {
['with avatar', { props: { ...props, avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' } } }],
['with close', { props: { ...props, close: true } }],
['with closeIcon', { props: { ...props, close: true, closeIcon: 'i-heroicons-trash' } }],
...colors.map((color: string) => [`with color ${color}`, { props: { ...props, color } }]),
...variants.map((variant: string) => [`with variant ${variant}`, { props: { ...props, color: 'primary', variant } }]),
...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { ...props, variant } }]),
...variants.map((variant: string) => [`with gray variant ${variant}`, { props: { ...props, variant, color: 'gray' } }]),
['with as', { props: { ...props, as: 'article' } }],
['with class', { props: { ...props, class: 'w-48' } }],
['with ui', { props: { ...props, ui: { title: 'font-bold' } } }],

5
test/components/Badge.spec.ts
View File

@@ -5,7 +5,6 @@ import theme from '#build/ui/badge'
describe('Badge', () => {
const sizes = Object.keys(theme.variants.size) as any
const colors = Object.keys(theme.variants.color) as any
const variants = Object.keys(theme.variants.variant) as any
it.each([
@@ -14,8 +13,8 @@ describe('Badge', () => {
['with as', { props: { label: 'Badge', as: 'div' } }],
['with class', { props: { label: 'Badge', class: 'rounded-full font-bold' } }],
...sizes.map((size: string) => [`with size ${size}`, { props: { label: 'Badge', size } }]),
...colors.map((color: string) => [`with color ${color}`, { props: { label: 'Badge', color } }]),
...variants.map((variant: string) => [`with variant ${variant}`, { props: { label: 'Badge', variant } }]),
...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { label: 'Badge', variant } }]),
...variants.map((variant: string) => [`with gray variant ${variant}`, { props: { label: 'Badge', variant, color: 'gray' } }]),
// Slots
['with default slot', { slots: { default: () => 'Default slot' } }]
])('renders %s correctly', async (nameOrHtml: string, options: { props?: BadgeProps, slots?: Partial<BadgeSlots> }) => {

5
test/components/Button.spec.ts
View File

@@ -5,15 +5,14 @@ import theme from '#build/ui/button'
describe('Button', () => {
const sizes = Object.keys(theme.variants.size) as any
const colors = Object.keys(theme.variants.color) as any
const variants = Object.keys(theme.variants.variant) as any
it.each([
// Props
['with label', { props: { label: 'Button' } }],
...sizes.map((size: string) => [`with size ${size}`, { props: { label: 'Button', size } }]),
...colors.map((color: string) => [`with color ${color}`, { props: { label: 'Button', color } }]),
...variants.map((variant: string) => [`with variant ${variant}`, { props: { label: 'Button', variant } }]),
...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { label: 'Button', variant } }]),
...variants.map((variant: string) => [`with gray variant ${variant}`, { props: { label: 'Button', variant, color: 'gray' } }]),
['with icon', { props: { icon: 'i-heroicons-rocket-launch' } }],
['with leading and icon', { props: { leading: true, icon: 'i-heroicons-arrow-left' } }],
['with leadingIcon', { props: { leadingIcon: 'i-heroicons-arrow-left' } }],

3
test/components/Checkbox.spec.ts
View File

@@ -8,7 +8,6 @@ import type { FormInputEvents } from '~/src/module'
describe('Checkbox', () => {
const sizes = Object.keys(theme.variants.size) as any
const colors = Object.keys(theme.variants.color) as any
it.each([
// Props
@@ -24,7 +23,7 @@ describe('Checkbox', () => {
['with required', { props: { label: 'Label', required: true } }],
['with description', { props: { label: 'Label', description: 'Description' } }],
...sizes.map((size: string) => [`with size ${size}`, { props: { size } }]),
...colors.map((color: string) => [`with color ${color}`, { props: { color } }]),
['with color gray', { props: { color: 'gray', defaultValue: true } }],
['with class', { props: { class: 'inline-flex' } }],
['with ui', { props: { ui: { wrapper: 'ms-4' } } }],
// Slots

3
test/components/Chip.spec.ts
View File

@@ -5,7 +5,6 @@ import theme from '#build/ui/chip'
describe('Chip', () => {
const sizes = Object.keys(theme.variants.size) as any
const colors = Object.keys(theme.variants.color) as any
const positions = Object.keys(theme.variants.position) as any
it.each([
@@ -14,8 +13,8 @@ describe('Chip', () => {
['with text', { props: { text: 'Text' } }],
['with inset', { props: { inset: true } }],
...sizes.map((size: string) => [`with size ${size}`, { props: { size } }]),
...colors.map((color: string) => [`with color ${color}`, { props: { color } }]),
...positions.map((position: string) => [`with position ${position}`, { props: { position } }]),
['with color gray', { props: { color: 'gray' } }],
['without show', { props: { show: false } }],
['with class', { props: { class: 'mx-auto' } }],
['with ui', { props: { ui: { base: 'text-gray-500 dark:text-gray-400' } } }],

5
test/components/Input.spec.ts
View File

@@ -9,7 +9,6 @@ import type { FormInputEvents } from '~/src/module'
describe('Input', () => {
const sizes = Object.keys(theme.variants.size) as any
const colors = Object.keys(theme.variants.color) as any
const variants = Object.keys(theme.variants.variant) as any
it.each([
@@ -28,8 +27,8 @@ describe('Input', () => {
['with loading', { props: { loading: true } }],
['with loadingIcon', { props: { loading: true, loadingIcon: 'i-heroicons-sparkles' } }],
...sizes.map((size: string) => [`with size ${size}`, { props: { size } }]),
...colors.map((color: string) => [`with color ${color}`, { props: { color } }]),
...variants.map((variant: string) => [`with variant ${variant}`, { props: { variant } }]),
...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { variant } }]),
...variants.map((variant: string) => [`with gray variant ${variant}`, { props: { variant, color: 'gray' } }]),
['with class', { props: { class: 'absolute' } }],
['with ui', { props: { ui: { base: 'rounded-full' } } }],
// Slots

5
test/components/InputMenu.spec.ts
View File

@@ -8,7 +8,6 @@ import type { FormInputEvents } from '~/src/module'
describe('InputMenu', () => {
const sizes = Object.keys(theme.variants.size) as any
const colors = Object.keys(theme.variants.color) as any
const variants = Object.keys(theme.variants.variant) as any
const items = [{
@@ -51,8 +50,8 @@ describe('InputMenu', () => {
['with selectedIcon', { props: { ...props, selectedIcon: 'i-heroicons-check' } }],
['with arrow', { props: { ...props, arrow: true } }],
...sizes.map((size: string) => [`with size ${size}`, { props: { ...props, size } }]),
...colors.map((color: string) => [`with color ${color}`, { props: { ...props, color } }]),
...variants.map((variant: string) => [`with variant ${variant}`, { props: { ...props, variant } }]),
...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { ...props, variant } }]),
...variants.map((variant: string) => [`with gray variant ${variant}`, { props: { ...props, variant, color: 'gray' } }]),
['with as', { props: { ...props, as: 'section' } }],
['with class', { props: { ...props, class: 'absolute' } }],
['with ui', { props: { ...props, ui: { group: 'p-2' } } }],

4
test/components/Kbd.spec.ts
View File

@@ -5,14 +5,14 @@ import theme from '#build/ui/kbd'
describe('Kbd', () => {
const sizes = Object.keys(theme.variants.size) as any
const colors = Object.keys(theme.variants.color) as any
const variants = Object.keys(theme.variants.variant) as any
it.each([
// Props
['with value', { props: { value: 'K' } }],
['with as', { props: { value: 'K', as: 'span' } }],
...sizes.map((size: string) => [`with size ${size}`, { props: { value: 'K', size } }]),
...colors.map((color: string) => [`with color ${color}`, { props: { value: 'K', color } }]),
...variants.map((variant: string) => [`with variant ${variant}`, { props: { value: 'K', variant } }]),
['with class', { props: { value: 'K', class: 'font-bold' } }],
// Slots
['with default slot', { slots: { default: () => 'Default slot' } }]

10
test/components/NavigationMenu.spec.ts
View File

@@ -4,7 +4,6 @@ import ComponentRender from '../component-render'
import theme from '#build/ui/navigation-menu'
describe('NavigationMenu', () => {
const colors = Object.keys(theme.variants.color) as any
const variants = Object.keys(theme.variants.variant) as any
const items = [
@@ -82,10 +81,11 @@ describe('NavigationMenu', () => {
['with items', { props }],
['with arrow', { props: { ...props, arrow: true } }],
['with orientation vertical', { props: { ...props, orientation: 'vertical' as const } }],
...colors.map((color: string) => [`with color ${color}`, { props: { ...props, color } }]),
...variants.map((variant: string) => [`with variant ${variant}`, { props: { ...props, variant } }]),
...variants.map((variant: string) => [`with highlight ${variant}`, { props: { ...props, highlight: true, variant } }]),
...colors.map((highlightColor: string) => [`with highlight color ${highlightColor}`, { props: { ...props, highlight: true, highlightColor } }]),
...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { ...props, variant } }]),
...variants.map((variant: string) => [`with gray variant ${variant}`, { props: { ...props, variant, color: 'gray' } }]),
...variants.map((variant: string) => [`with primary variant ${variant} highlight`, { props: { ...props, variant, highlight: true } }]),
...variants.map((variant: string) => [`with gray variant ${variant} highlight`, { props: { ...props, variant, color: 'gray', highlight: true } }]),
...variants.map((variant: string) => [`with gray variant ${variant} highlight gray`, { props: { ...props, variant, color: 'gray', highlight: true, highlightColor: 'gray' } }]),
['with trailingIcon', { props: { ...props, trailingIcon: 'i-heroicons-plus' } }],
['with class', { props: { ...props, class: 'w-48' } }],
['with ui', { props: { ...props, ui: { itemLeadingIcon: 'size-4' } } }],

9
test/components/Pagination.spec.ts
View File

@@ -5,7 +5,6 @@ import theme from '#build/ui/button'
describe('Pagination', () => {
const sizes = Object.keys(theme.variants.size) as any
const colors = Object.keys(theme.variants.color) as any
const variants = Object.keys(theme.variants.variant) as any
const props = { total: 100 }
@@ -27,10 +26,10 @@ describe('Pagination', () => {
['with lastIcon', { props: { ...props, lastIcon: 'i-heroicons-arrow-right' } }],
['with ellipsisIcon', { props: { ...props, ellipsisIcon: 'i-heroicons-ellipsis-vertical', siblingCount: 1, showEdges: true, page: 5 } }],
...sizes.map((size: string) => [`with size ${size}`, { props: { ...props, size } }]),
...colors.map((color: string) => [`with color ${color}`, { props: { ...props, color } }]),
...variants.map((variant: string) => [`with variant ${variant}`, { props: { ...props, color: 'primary', variant } }]),
...colors.map((activeColor: string) => [`with active color ${activeColor}`, { props: { ...props, activeColor } }]),
...variants.map((activeVariant: string) => [`with active variant ${activeVariant}`, { props: { ...props, color: 'primary', activeVariant } }]),
...variants.map((variant: string) => [`with gray variant ${variant}`, { props: { ...props, variant } }]),
...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { ...props, variant, color: 'primary' } }]),
...variants.map((activeVariant: string) => [`with primary active variant ${activeVariant}`, { props: { ...props, activeVariant } }]),
...variants.map((activeVariant: string) => [`with gray active variant ${activeVariant}`, { props: { ...props, activeVariant, color: 'gray' } }]),
['with class', { props: { ...props, class: 'relative' } }],
['with ui', { props: { ...props, ui: { list: 'gap-3' } } }],
// Slots

3
test/components/Progress.spec.ts
View File

@@ -5,7 +5,6 @@ import theme from '#build/ui/progress'
describe('Progress', () => {
const sizes = Object.keys(theme.variants.size) as any
const colors = Object.keys(theme.variants.color) as any
const orientations = Object.keys(theme.variants.orientation) as any
const animations = Object.keys(theme.variants.animation) as any
const max = ['Waiting...', 'Cloning...', 'Migrating...', 'Deploying...', 'Done!']
@@ -19,9 +18,9 @@ describe('Progress', () => {
['with max inverted', { props: { modelValue: 2, status: true, inverted: true, max } }],
['with as', { props: { as: 'span' } }],
...sizes.map((size: string) => [`with size ${size}`, { props: { size } }]),
...colors.map((color: string) => [`with color ${color}`, { props: { color } }]),
...orientations.map((orientation: string) => [`with orientation ${orientation}`, { props: { orientation } }]),
...animations.map((animation: string) => [`with animation ${animation}`, { props: { animation } }]),
['with color gray', { props: { color: 'gray', modelValue: 50 } }],
['with class', { props: { class: 'w-48' } }],
['with ui', { props: { ui: { base: 'bg-white dark:bg-gray-900' } } }],
// Slots

3
test/components/RadioGroup.spec.ts
View File

@@ -8,7 +8,6 @@ import type { FormInputEvents } from '~/src/module'
describe('RadioGroup', () => {
const sizes = Object.keys(theme.variants.size) as any
const colors = Object.keys(theme.variants.color) as any
const items = [
{ value: '1', label: 'Option 1' },
@@ -25,7 +24,7 @@ describe('RadioGroup', () => {
['with description', { props: { items: items.map((opt, count) => ({ ...opt, description: `Description ${count}` })) } }],
['with required', { props: { ...props, legend: 'Legend', required: true } }],
...sizes.map((size: string) => [`with size ${size}`, { props: { ...props, size } }]),
...colors.map((color: string) => [`with color ${color}`, { props: { ...props, color } }]),
['with color gray', { props: { color: 'gray', defaultValue: '1' } }],
['with class', { props: { ...props, class: 'absolute' } }],
['with ui', { props: { ...props, ui: { wrapper: 'ms-4' } } }],
['with orientation', { props: { ...props, orientation: 'horizontal' } }],

5
test/components/Select.spec.ts
View File

@@ -8,7 +8,6 @@ import type { FormInputEvents } from '~/src/module'
describe('Select', () => {
const sizes = Object.keys(theme.variants.size) as any
const colors = Object.keys(theme.variants.color) as any
const variants = Object.keys(theme.variants.variant) as any
const items = [{
@@ -54,8 +53,8 @@ describe('Select', () => {
['with loadingIcon', { props: { ...props, loading: true, loadingIcon: 'i-heroicons-sparkles' } }],
['with arrow', { props: { ...props, arrow: true } }],
...sizes.map((size: string) => [`with size ${size}`, { props: { ...props, size } }]),
...colors.map((color: string) => [`with color ${color}`, { props: { ...props, color } }]),
...variants.map((variant: string) => [`with variant ${variant}`, { props: { ...props, variant } }]),
...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { ...props, variant } }]),
...variants.map((variant: string) => [`with gray variant ${variant}`, { props: { ...props, variant, color: 'gray' } }]),
['with class', { props: { ...props, class: 'rounded-full' } }],
['with ui', { props: { ...props, ui: { group: 'p-2' } } }],
// Slots

5
test/components/SelectMenu.spec.ts
View File

@@ -8,7 +8,6 @@ import type { FormInputEvents } from '~/src/module'
describe('SelectMenu', () => {
const sizes = Object.keys(theme.variants.size) as any
const colors = Object.keys(theme.variants.color) as any
const variants = Object.keys(theme.variants.variant) as any
const items = [{
@@ -57,8 +56,8 @@ describe('SelectMenu', () => {
['with loadingIcon', { props: { ...props, loading: true, loadingIcon: 'i-heroicons-sparkles' } }],
['with arrow', { props: { ...props, arrow: true } }],
...sizes.map((size: string) => [`with size ${size}`, { props: { ...props, size } }]),
...colors.map((color: string) => [`with color ${color}`, { props: { ...props, color } }]),
...variants.map((variant: string) => [`with variant ${variant}`, { props: { ...props, variant } }]),
...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { ...props, variant } }]),
...variants.map((variant: string) => [`with gray variant ${variant}`, { props: { ...props, variant, color: 'gray' } }]),
['with class', { props: { ...props, class: 'rounded-full' } }],
['with ui', { props: { ...props, ui: { group: 'p-2' } } }],
// Slots

3
test/components/Separator.spec.ts
View File

@@ -6,7 +6,6 @@ import theme from '#build/ui/separator'
describe('Separator', () => {
const types = Object.keys(theme.variants.type) as any
const sizes = Object.keys(theme.variants.size) as any
const colors = Object.keys(theme.variants.color) as any
it.each([
// Props
@@ -18,7 +17,7 @@ describe('Separator', () => {
['with decorative', { props: { decorative: true } }],
...types.map((type: string) => [`with type ${type}`, { props: { type } }]),
...sizes.map((size: string) => [`with size ${size}`, { props: { size } }]),
...colors.map((color: string) => [`with color ${color}`, { props: { color } }]),
['with color primary', { props: { color: 'primary' } }],
['with class', { props: { class: 'flex-row-reverse' } }],
['with ui', { props: { ui: { label: 'text-lg' } } }]
])('renders %s correctly', async (nameOrHtml: string, options: { props?: SeparatorProps, slots?: Partial<SeparatorSlots> }) => {

3
test/components/Slider.spec.ts
View File

@@ -8,7 +8,6 @@ import type { FormInputEvents } from '~/src/module'
describe('Slider', () => {
const sizes = Object.keys(theme.variants.size) as any
const colors = Object.keys(theme.variants.color) as any
it.each([
// Props
@@ -21,7 +20,7 @@ describe('Slider', () => {
['with min max step', { props: { min: 4, max: 12, step: 2 } }],
['with min steps between thumbs', { props: { defaultValue: [0, 30], minStepsBetweenThumbs: 30 } }],
...sizes.map((size: string) => [`with size ${size}`, { props: { size } }]),
...colors.map((color: string) => [`with color ${color}`, { props: { color } }]),
['with color gray', { props: { color: 'gray', defaultValue: 10 } }],
['with class', { props: { class: 'w-48' } }],
['with ui', { props: { ui: { track: 'bg-gray-100 dark:bg-gray-800' } } }]
])('renders %s correctly', async (nameOrHtml: string, options: { props?: SliderProps }) => {

3
test/components/Switch.spec.ts
View File

@@ -8,7 +8,6 @@ import type { FormInputEvents } from '~/src/module'
describe('Switch', () => {
const sizes = Object.keys(theme.variants.size) as any
const colors = Object.keys(theme.variants.color) as any
it.each([
// Props
@@ -26,7 +25,7 @@ describe('Switch', () => {
['with required', { props: { label: 'Label', required: true } }],
['with description', { props: { label: 'Label', description: 'Description' } }],
...sizes.map((size: string) => [`with size ${size}`, { props: { size } }]),
...colors.map((color: string) => [`with color ${color}`, { props: { color } }]),
['with color gray', { props: { color: 'gray', defaultValue: true } }],
['with class', { props: { class: 'inline-flex' } }],
['with ui', { props: { ui: { wrapper: 'ms-4' } } }],
// Slots

5
test/components/Tabs.spec.ts
View File

@@ -4,7 +4,6 @@ import ComponentRender from '../component-render'
import theme from '#build/ui/tabs'
describe('Tabs', () => {
const colors = Object.keys(theme.variants.color) as any
const variants = Object.keys(theme.variants.variant) as any
const sizes = Object.keys(theme.variants.size) as any
@@ -33,9 +32,9 @@ describe('Tabs', () => {
['with modelValue', { props: { ...props, modelValue: '1' } }],
['with defaultValue', { props: { ...props, defaultValue: '1' } }],
['with orientation vertical', { props: { ...props, orientation: 'vertical' as const } }],
...colors.map((color: string) => [`with color ${color}`, { props: { ...props, color } }]),
...variants.map((variant: string) => [`with variant ${variant}`, { props: { ...props, variant } }]),
...sizes.map((size: string) => [`with size ${size}`, { props: { ...props, size } }]),
...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { ...props, variant } }]),
...variants.map((variant: string) => [`with gray variant ${variant}`, { props: { ...props, variant, color: 'gray' } }]),
['without content', { props: { ...props, content: false } }],
['with class', { props: { ...props, class: 'w-96' } }],
['with ui', { props: { ...props, ui: { content: 'w-full ring ring-gray-200 dark:ring-gray-800' } } }],

5
test/components/Textarea.spec.ts
View File

@@ -8,7 +8,6 @@ import type { FormInputEvents } from '~/src/module'
describe('Textarea', () => {
const sizes = Object.keys(theme.variants.size) as any
const colors = Object.keys(theme.variants.color) as any
const variants = Object.keys(theme.variants.variant) as any
it.each([
@@ -20,8 +19,8 @@ describe('Textarea', () => {
['with disabled', { props: { disabled: true } }],
['with rows', { props: { rows: 5 } }],
...sizes.map((size: string) => [`with size ${size}`, { props: { size } }]),
...colors.map((color: string) => [`with color ${color}`, { props: { color } }]),
...variants.map((variant: string) => [`with variant ${variant}`, { props: { variant } }]),
...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { variant } }]),
...variants.map((variant: string) => [`with gray variant ${variant}`, { props: { variant, color: 'gray' } }]),
['with class', { props: { class: 'w-48' } }],
['with ui', { props: { ui: { wrapper: 'ms-4' } } }],
// Slots

5
test/components/Toast.spec.ts
View File

@@ -4,7 +4,6 @@ import Toaster from '../../src/runtime/components/Toaster.vue'
import Toast, { type ToastProps, type ToastSlots } from '../../src/runtime/components/Toast.vue'
import ComponentRender from '../component-render'
import { ClientOnly } from '#components'
import theme from '#build/ui/toast'
const ToastWrapper = defineComponent({
components: {
@@ -25,8 +24,6 @@ const ToastWrapper = defineComponent({
})
describe('Toast', () => {
const colors = Object.keys(theme.variants.color) as any
const props = { title: 'Toast' }
it.each([
@@ -40,7 +37,7 @@ describe('Toast', () => {
['without close', { props: { ...props, close: false } }],
['with closeIcon', { props: { ...props, closeIcon: 'i-heroicons-trash' } }],
['with type', { props: { ...props, type: 'background' as const } }],
...colors.map((color: string) => [`with color ${color}`, { props: { ...props, color } }]),
['with color gray', { props: { ...props, color: 'gray' as const } }],
['with class', { props: { ...props, class: 'bg-gray-50 dark:bg-gray-800/50' } }],
['with ui', { props: { ...props, ui: { title: 'font-bold' } } }],
// Slots

228
test/components/__snapshots__/Alert.spec.ts.snap
View File

@@ -1,7 +1,7 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Alert > renders with as correctly 1`] = `
"<article class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center ring ring-inset ring-gray-200 dark:ring-gray-800 text-gray-900 dark:text-white bg-white dark:bg-gray-900">
"<article class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
@@ -13,7 +13,7 @@ exports[`Alert > renders with as correctly 1`] = `
`;
exports[`Alert > renders with avatar correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center ring ring-inset ring-gray-200 dark:ring-gray-800 text-gray-900 dark:text-white bg-white dark:bg-gray-900"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-11 text-[22px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-11 text-[22px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
@@ -24,7 +24,7 @@ exports[`Alert > renders with avatar correctly 1`] = `
`;
exports[`Alert > renders with class correctly 1`] = `
"<div class="relative overflow-hidden rounded-lg p-4 flex gap-2.5 items-center ring ring-inset ring-gray-200 dark:ring-gray-800 text-gray-900 dark:text-white bg-white dark:bg-gray-900 w-48">
"<div class="relative overflow-hidden rounded-lg p-4 flex gap-2.5 items-center text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25 w-48">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
@@ -36,14 +36,14 @@ exports[`Alert > renders with class correctly 1`] = `
`;
exports[`Alert > renders with close correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center ring ring-inset ring-gray-200 dark:ring-gray-800 text-gray-900 dark:text-white bg-white dark:bg-gray-900">
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 text-gray-500 hover:text-gray-700 disabled:text-gray-500 dark:text-gray-400 dark:hover:text-gray-200 dark:disabled:text-gray-400 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-0"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 text-gray-500 hover:text-gray-700 disabled:text-gray-500 dark:text-gray-400 dark:hover:text-gray-200 dark:disabled:text-gray-400 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-white p-0.5"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
<!--v-if-->
<!--v-if-->
</button></div>
@@ -51,7 +51,7 @@ exports[`Alert > renders with close correctly 1`] = `
`;
exports[`Alert > renders with close slot correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center ring ring-inset ring-gray-200 dark:ring-gray-800 text-gray-900 dark:text-white bg-white dark:bg-gray-900">
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
@@ -63,21 +63,69 @@ exports[`Alert > renders with close slot correctly 1`] = `
`;
exports[`Alert > renders with closeIcon correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center ring ring-inset ring-gray-200 dark:ring-gray-800 text-gray-900 dark:text-white bg-white dark:bg-gray-900">
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 text-gray-500 hover:text-gray-700 disabled:text-gray-500 dark:text-gray-400 dark:hover:text-gray-200 dark:disabled:text-gray-400 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-0"><span class="iconify i-heroicons:trash shrink-0 size-5" aria-hidden="true"></span>
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 text-gray-500 hover:text-gray-700 disabled:text-gray-500 dark:text-gray-400 dark:hover:text-gray-200 dark:disabled:text-gray-400 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-white p-0.5"><span class="iconify i-heroicons:trash shrink-0 size-5" aria-hidden="true"></span>
<!--v-if-->
<!--v-if-->
</button></div>
</div>"
`;
exports[`Alert > renders with color black correctly 1`] = `
exports[`Alert > renders with description correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
<div class="text-sm opacity-90">Description</div>
<!--v-if-->
</div>
<!--v-if-->
</div>"
`;
exports[`Alert > renders with description slot correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
<div class="text-sm opacity-90">Description slot</div>
<!--v-if-->
</div>
<!--v-if-->
</div>"
`;
exports[`Alert > renders with gray variant outline correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center ring ring-inset ring-gray-200 dark:ring-gray-800 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-900">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
</div>"
`;
exports[`Alert > renders with gray variant soft correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-800/50">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
</div>"
`;
exports[`Alert > renders with gray variant solid correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center text-white dark:text-gray-900 bg-gray-900 dark:bg-white">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
@@ -89,8 +137,8 @@ exports[`Alert > renders with color black correctly 1`] = `
</div>"
`;
exports[`Alert > renders with color gray correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-800">
exports[`Alert > renders with gray variant subtle correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-800/50">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
@@ -101,80 +149,8 @@ exports[`Alert > renders with color gray correctly 1`] = `
</div>"
`;
exports[`Alert > renders with color green correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center bg-green-500 dark:bg-green-400 text-white dark:text-gray-900">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
</div>"
`;
exports[`Alert > renders with color primary correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center bg-primary-500 dark:bg-primary-400 text-white dark:text-gray-900">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
</div>"
`;
exports[`Alert > renders with color red correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center bg-red-500 dark:bg-red-400 text-white dark:text-gray-900">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
</div>"
`;
exports[`Alert > renders with color white correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center ring ring-inset ring-gray-200 dark:ring-gray-800 text-gray-900 dark:text-white bg-white dark:bg-gray-900">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
</div>"
`;
exports[`Alert > renders with description correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start ring ring-inset ring-gray-200 dark:ring-gray-800 text-gray-900 dark:text-white bg-white dark:bg-gray-900">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
<div class="text-sm">Description</div>
<!--v-if-->
</div>
<!--v-if-->
</div>"
`;
exports[`Alert > renders with description slot correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center ring ring-inset ring-gray-200 dark:ring-gray-800 text-gray-900 dark:text-white bg-white dark:bg-gray-900">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
<div class="text-sm">Description slot</div>
<!--v-if-->
</div>
<!--v-if-->
</div>"
`;
exports[`Alert > renders with icon correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center ring ring-inset ring-gray-200 dark:ring-gray-800 text-gray-900 dark:text-white bg-white dark:bg-gray-900"><span class="iconify i-heroicons:light-bulb shrink-0 size-5" aria-hidden="true"></span>
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25"><span class="iconify i-heroicons:light-bulb shrink-0 size-5" aria-hidden="true"></span>
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
@@ -185,7 +161,7 @@ exports[`Alert > renders with icon correctly 1`] = `
`;
exports[`Alert > renders with leading slot correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center ring ring-inset ring-gray-200 dark:ring-gray-800 text-gray-900 dark:text-white bg-white dark:bg-gray-900">
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Leading slot</div>
@@ -196,8 +172,8 @@ exports[`Alert > renders with leading slot correctly 1`] = `
</div>"
`;
exports[`Alert > renders with title correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center ring ring-inset ring-gray-200 dark:ring-gray-800 text-gray-900 dark:text-white bg-white dark:bg-gray-900">
exports[`Alert > renders with primary variant outline correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
@@ -208,43 +184,7 @@ exports[`Alert > renders with title correctly 1`] = `
</div>"
`;
exports[`Alert > renders with title slot correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center ring ring-inset ring-gray-200 dark:ring-gray-800 text-gray-900 dark:text-white bg-white dark:bg-gray-900">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Title slot</div>
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
</div>"
`;
exports[`Alert > renders with ui correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center ring ring-inset ring-gray-200 dark:ring-gray-800 text-gray-900 dark:text-white bg-white dark:bg-gray-900">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-bold">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
</div>"
`;
exports[`Alert > renders with variant outline correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500 dark:ring-primary-400">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
</div>"
`;
exports[`Alert > renders with variant soft correctly 1`] = `
exports[`Alert > renders with primary variant soft correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center bg-primary-500/10 dark:bg-primary-400/10 text-primary-500 dark:text-primary-400">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
@@ -256,7 +196,7 @@ exports[`Alert > renders with variant soft correctly 1`] = `
</div>"
`;
exports[`Alert > renders with variant solid correctly 1`] = `
exports[`Alert > renders with primary variant solid correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center bg-primary-500 dark:bg-primary-400 text-white dark:text-gray-900">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
@@ -268,7 +208,7 @@ exports[`Alert > renders with variant solid correctly 1`] = `
</div>"
`;
exports[`Alert > renders with variant subtle correctly 1`] = `
exports[`Alert > renders with primary variant subtle correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center bg-primary-500/10 dark:bg-primary-400/10 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
@@ -279,3 +219,39 @@ exports[`Alert > renders with variant subtle correctly 1`] = `
<!--v-if-->
</div>"
`;
exports[`Alert > renders with title correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
</div>"
`;
exports[`Alert > renders with title slot correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Title slot</div>
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
</div>"
`;
exports[`Alert > renders with ui correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-bold">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
</div>"
`;

36
test/components/__snapshots__/Badge.spec.ts.snap
View File

@@ -4,32 +4,28 @@ exports[`Badge > renders with as correctly 1`] = `"<div class="rounded-md font-m
exports[`Badge > renders with class correctly 1`] = `"<span class="inline-flex items-center text-xs px-2 py-1 bg-primary-500 dark:bg-primary-400 text-white dark:text-gray-900 rounded-full font-bold">Badge</span>"`;
exports[`Badge > renders with color black correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 text-white dark:text-gray-900 bg-gray-900 dark:bg-white">Badge</span>"`;
exports[`Badge > renders with color gray correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-800">Badge</span>"`;
exports[`Badge > renders with color green correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 bg-green-500 dark:bg-green-400 text-white dark:text-gray-900">Badge</span>"`;
exports[`Badge > renders with color primary correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 bg-primary-500 dark:bg-primary-400 text-white dark:text-gray-900">Badge</span>"`;
exports[`Badge > renders with color red correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 bg-red-500 dark:bg-red-400 text-white dark:text-gray-900">Badge</span>"`;
exports[`Badge > renders with color white correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white dark:bg-gray-900">Badge</span>"`;
exports[`Badge > renders with default slot correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 bg-primary-500 dark:bg-primary-400 text-white dark:text-gray-900">Default slot</span>"`;
exports[`Badge > renders with gray variant outline correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-900">Badge</span>"`;
exports[`Badge > renders with gray variant soft correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-800">Badge</span>"`;
exports[`Badge > renders with gray variant solid correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 text-white dark:text-gray-900 bg-gray-900 dark:bg-white">Badge</span>"`;
exports[`Badge > renders with gray variant subtle correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-800">Badge</span>"`;
exports[`Badge > renders with label correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 bg-primary-500 dark:bg-primary-400 text-white dark:text-gray-900">Badge</span>"`;
exports[`Badge > renders with primary variant outline correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/50 dark:ring-primary-400/50">Badge</span>"`;
exports[`Badge > renders with primary variant soft correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 bg-primary-500/10 dark:bg-primary-400/10 text-primary-500 dark:text-primary-400">Badge</span>"`;
exports[`Badge > renders with primary variant solid correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 bg-primary-500 dark:bg-primary-400 text-white dark:text-gray-900">Badge</span>"`;
exports[`Badge > renders with primary variant subtle correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 bg-primary-500/10 dark:bg-primary-400/10 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25">Badge</span>"`;
exports[`Badge > renders with size lg correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-sm px-2 py-1 bg-primary-500 dark:bg-primary-400 text-white dark:text-gray-900">Badge</span>"`;
exports[`Badge > renders with size md correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 bg-primary-500 dark:bg-primary-400 text-white dark:text-gray-900">Badge</span>"`;
exports[`Badge > renders with size sm correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-1.5 py-0.5 bg-primary-500 dark:bg-primary-400 text-white dark:text-gray-900">Badge</span>"`;
exports[`Badge > renders with variant outline correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500 dark:ring-primary-400">Badge</span>"`;
exports[`Badge > renders with variant soft correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 bg-primary-500/10 dark:bg-primary-400/10 text-primary-500 dark:text-primary-400">Badge</span>"`;
exports[`Badge > renders with variant solid correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 bg-primary-500 dark:bg-primary-400 text-white dark:text-gray-900">Badge</span>"`;
exports[`Badge > renders with variant subtle correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 bg-primary-500/10 dark:bg-primary-400/10 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25">Badge</span>"`;

60
test/components/__snapshots__/Breadcrumb.spec.ts.snap
View File

@@ -3,11 +3,11 @@
exports[`Breadcrumb > renders with class correctly 1`] = `
"<div aria-label="breadcrumb" class="relative min-w-0 w-48">
<ol class="flex items-center gap-1.5">
<li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-gray-500 dark:text-gray-400 font-medium hover:text-gray-700 dark:hover:text-gray-200 transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Home</span></a></li>
<li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-gray-500 dark:text-gray-400 font-medium hover:text-gray-700 dark:hover:text-gray-200 transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Home</span></a></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-gray-500 dark:text-gray-400" aria-hidden="true"></span></li>
<li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 text-gray-500 dark:text-gray-400 font-medium cursor-not-allowed opacity-75"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Navigation</span></span></li>
<li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-gray-500 dark:text-gray-400 font-medium cursor-not-allowed opacity-75"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Navigation</span></span></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-gray-500 dark:text-gray-400" aria-hidden="true"></span></li>
<li class="flex min-w-0"><a href="/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-primary-500 dark:text-primary-400 font-semibold"><span class="iconify i-heroicons:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
<li class="flex min-w-0"><a href="/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-primary-500 dark:text-primary-400 font-semibold"><span class="iconify i-heroicons:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
<!--v-if-->
</ol>
</div>"
@@ -16,11 +16,11 @@ exports[`Breadcrumb > renders with class correctly 1`] = `
exports[`Breadcrumb > renders with custom slot correctly 1`] = `
"<div aria-label="breadcrumb" class="relative min-w-0">
<ol class="flex items-center gap-1.5">
<li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-gray-500 dark:text-gray-400 font-medium hover:text-gray-700 dark:hover:text-gray-200 transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Home</span></a></li>
<li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-gray-500 dark:text-gray-400 font-medium hover:text-gray-700 dark:hover:text-gray-200 transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Home</span></a></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-gray-500 dark:text-gray-400" aria-hidden="true"></span></li>
<li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 text-gray-500 dark:text-gray-400 font-medium cursor-not-allowed opacity-75"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Navigation</span></span></li>
<li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-gray-500 dark:text-gray-400 font-medium cursor-not-allowed opacity-75"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Navigation</span></span></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-gray-500 dark:text-gray-400" aria-hidden="true"></span></li>
<li class="flex min-w-0"><a href="/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-primary-500 dark:text-primary-400 font-semibold">Custom slot</a></li>
<li class="flex min-w-0"><a href="/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-primary-500 dark:text-primary-400 font-semibold">Custom slot</a></li>
<!--v-if-->
</ol>
</div>"
@@ -29,11 +29,11 @@ exports[`Breadcrumb > renders with custom slot correctly 1`] = `
exports[`Breadcrumb > renders with item slot correctly 1`] = `
"<div aria-label="breadcrumb" class="relative min-w-0">
<ol class="flex items-center gap-1.5">
<li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-gray-500 dark:text-gray-400 font-medium hover:text-gray-700 dark:hover:text-gray-200 transition-colors">Item slot</a></li>
<li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-gray-500 dark:text-gray-400 font-medium hover:text-gray-700 dark:hover:text-gray-200 transition-colors">Item slot</a></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-gray-500 dark:text-gray-400" aria-hidden="true"></span></li>
<li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 text-gray-500 dark:text-gray-400 font-medium cursor-not-allowed opacity-75">Item slot</span></li>
<li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-gray-500 dark:text-gray-400 font-medium cursor-not-allowed opacity-75">Item slot</span></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-gray-500 dark:text-gray-400" aria-hidden="true"></span></li>
<li class="flex min-w-0"><a href="/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-primary-500 dark:text-primary-400 font-semibold"><span class="iconify i-heroicons:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
<li class="flex min-w-0"><a href="/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-primary-500 dark:text-primary-400 font-semibold"><span class="iconify i-heroicons:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
<!--v-if-->
</ol>
</div>"
@@ -42,11 +42,11 @@ exports[`Breadcrumb > renders with item slot correctly 1`] = `
exports[`Breadcrumb > renders with item-label slot correctly 1`] = `
"<div aria-label="breadcrumb" class="relative min-w-0">
<ol class="flex items-center gap-1.5">
<li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-gray-500 dark:text-gray-400 font-medium hover:text-gray-700 dark:hover:text-gray-200 transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Item label slot</span></a></li>
<li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-gray-500 dark:text-gray-400 font-medium hover:text-gray-700 dark:hover:text-gray-200 transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Item label slot</span></a></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-gray-500 dark:text-gray-400" aria-hidden="true"></span></li>
<li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 text-gray-500 dark:text-gray-400 font-medium cursor-not-allowed opacity-75"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Item label slot</span></span></li>
<li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-gray-500 dark:text-gray-400 font-medium cursor-not-allowed opacity-75"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Item label slot</span></span></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-gray-500 dark:text-gray-400" aria-hidden="true"></span></li>
<li class="flex min-w-0"><a href="/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-primary-500 dark:text-primary-400 font-semibold"><span class="iconify i-heroicons:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
<li class="flex min-w-0"><a href="/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-primary-500 dark:text-primary-400 font-semibold"><span class="iconify i-heroicons:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
<!--v-if-->
</ol>
</div>"
@@ -55,11 +55,11 @@ exports[`Breadcrumb > renders with item-label slot correctly 1`] = `
exports[`Breadcrumb > renders with item-leading slot correctly 1`] = `
"<div aria-label="breadcrumb" class="relative min-w-0">
<ol class="flex items-center gap-1.5">
<li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-gray-500 dark:text-gray-400 font-medium hover:text-gray-700 dark:hover:text-gray-200 transition-colors">Item leading slot<span class="truncate">Home</span></a></li>
<li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-gray-500 dark:text-gray-400 font-medium hover:text-gray-700 dark:hover:text-gray-200 transition-colors">Item leading slot<span class="truncate">Home</span></a></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-gray-500 dark:text-gray-400" aria-hidden="true"></span></li>
<li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 text-gray-500 dark:text-gray-400 font-medium cursor-not-allowed opacity-75">Item leading slot<span class="truncate">Navigation</span></span></li>
<li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-gray-500 dark:text-gray-400 font-medium cursor-not-allowed opacity-75">Item leading slot<span class="truncate">Navigation</span></span></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-gray-500 dark:text-gray-400" aria-hidden="true"></span></li>
<li class="flex min-w-0"><a href="/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-primary-500 dark:text-primary-400 font-semibold"><span class="iconify i-heroicons:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
<li class="flex min-w-0"><a href="/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-primary-500 dark:text-primary-400 font-semibold"><span class="iconify i-heroicons:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
<!--v-if-->
</ol>
</div>"
@@ -68,11 +68,11 @@ exports[`Breadcrumb > renders with item-leading slot correctly 1`] = `
exports[`Breadcrumb > renders with item-trailing slot correctly 1`] = `
"<div aria-label="breadcrumb" class="relative min-w-0">
<ol class="flex items-center gap-1.5">
<li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-gray-500 dark:text-gray-400 font-medium hover:text-gray-700 dark:hover:text-gray-200 transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Home</span>Item trailing slot</a></li>
<li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-gray-500 dark:text-gray-400 font-medium hover:text-gray-700 dark:hover:text-gray-200 transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Home</span>Item trailing slot</a></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-gray-500 dark:text-gray-400" aria-hidden="true"></span></li>
<li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 text-gray-500 dark:text-gray-400 font-medium cursor-not-allowed opacity-75"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Navigation</span>Item trailing slot</span></li>
<li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-gray-500 dark:text-gray-400 font-medium cursor-not-allowed opacity-75"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Navigation</span>Item trailing slot</span></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-gray-500 dark:text-gray-400" aria-hidden="true"></span></li>
<li class="flex min-w-0"><a href="/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-primary-500 dark:text-primary-400 font-semibold"><span class="iconify i-heroicons:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
<li class="flex min-w-0"><a href="/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-primary-500 dark:text-primary-400 font-semibold"><span class="iconify i-heroicons:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
<!--v-if-->
</ol>
</div>"
@@ -81,11 +81,11 @@ exports[`Breadcrumb > renders with item-trailing slot correctly 1`] = `
exports[`Breadcrumb > renders with items correctly 1`] = `
"<div aria-label="breadcrumb" class="relative min-w-0">
<ol class="flex items-center gap-1.5">
<li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-gray-500 dark:text-gray-400 font-medium hover:text-gray-700 dark:hover:text-gray-200 transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Home</span></a></li>
<li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-gray-500 dark:text-gray-400 font-medium hover:text-gray-700 dark:hover:text-gray-200 transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Home</span></a></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-gray-500 dark:text-gray-400" aria-hidden="true"></span></li>
<li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 text-gray-500 dark:text-gray-400 font-medium cursor-not-allowed opacity-75"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Navigation</span></span></li>
<li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-gray-500 dark:text-gray-400 font-medium cursor-not-allowed opacity-75"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Navigation</span></span></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-gray-500 dark:text-gray-400" aria-hidden="true"></span></li>
<li class="flex min-w-0"><a href="/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-primary-500 dark:text-primary-400 font-semibold"><span class="iconify i-heroicons:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
<li class="flex min-w-0"><a href="/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-primary-500 dark:text-primary-400 font-semibold"><span class="iconify i-heroicons:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
<!--v-if-->
</ol>
</div>"
@@ -94,11 +94,11 @@ exports[`Breadcrumb > renders with items correctly 1`] = `
exports[`Breadcrumb > renders with separator slot correctly 1`] = `
"<div aria-label="breadcrumb" class="relative min-w-0">
<ol class="flex items-center gap-1.5">
<li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-gray-500 dark:text-gray-400 font-medium hover:text-gray-700 dark:hover:text-gray-200 transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Home</span></a></li>
<li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-gray-500 dark:text-gray-400 font-medium hover:text-gray-700 dark:hover:text-gray-200 transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Home</span></a></li>
<li role="presentation" class="flex">/</li>
<li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 text-gray-500 dark:text-gray-400 font-medium cursor-not-allowed opacity-75"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Navigation</span></span></li>
<li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-gray-500 dark:text-gray-400 font-medium cursor-not-allowed opacity-75"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Navigation</span></span></li>
<li role="presentation" class="flex">/</li>
<li class="flex min-w-0"><a href="/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-primary-500 dark:text-primary-400 font-semibold"><span class="iconify i-heroicons:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
<li class="flex min-w-0"><a href="/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-primary-500 dark:text-primary-400 font-semibold"><span class="iconify i-heroicons:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
<!--v-if-->
</ol>
</div>"
@@ -107,11 +107,11 @@ exports[`Breadcrumb > renders with separator slot correctly 1`] = `
exports[`Breadcrumb > renders with separatorIcon correctly 1`] = `
"<div aria-label="breadcrumb" class="relative min-w-0">
<ol class="flex items-center gap-1.5">
<li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-gray-500 dark:text-gray-400 font-medium hover:text-gray-700 dark:hover:text-gray-200 transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Home</span></a></li>
<li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-gray-500 dark:text-gray-400 font-medium hover:text-gray-700 dark:hover:text-gray-200 transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Home</span></a></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:minus shrink-0 size-5 text-gray-500 dark:text-gray-400" aria-hidden="true"></span></li>
<li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 text-gray-500 dark:text-gray-400 font-medium cursor-not-allowed opacity-75"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Navigation</span></span></li>
<li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-gray-500 dark:text-gray-400 font-medium cursor-not-allowed opacity-75"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Navigation</span></span></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:minus shrink-0 size-5 text-gray-500 dark:text-gray-400" aria-hidden="true"></span></li>
<li class="flex min-w-0"><a href="/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-primary-500 dark:text-primary-400 font-semibold"><span class="iconify i-heroicons:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
<li class="flex min-w-0"><a href="/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-primary-500 dark:text-primary-400 font-semibold"><span class="iconify i-heroicons:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
<!--v-if-->
</ol>
</div>"
@@ -120,11 +120,11 @@ exports[`Breadcrumb > renders with separatorIcon correctly 1`] = `
exports[`Breadcrumb > renders with ui correctly 1`] = `
"<div aria-label="breadcrumb" class="relative min-w-0">
<ol class="flex items-center gap-1.5">
<li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors font-bold"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Home</span></a></li>
<li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors font-bold"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Home</span></a></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-gray-500 dark:text-gray-400" aria-hidden="true"></span></li>
<li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 text-gray-500 dark:text-gray-400 cursor-not-allowed opacity-75 font-bold"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Navigation</span></span></li>
<li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-gray-500 dark:text-gray-400 cursor-not-allowed opacity-75 font-bold"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Navigation</span></span></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-gray-500 dark:text-gray-400" aria-hidden="true"></span></li>
<li class="flex min-w-0"><a href="/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 text-primary-500 dark:text-primary-400 font-bold"><span class="iconify i-heroicons:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
<li class="flex min-w-0"><a href="/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-primary-500 dark:text-primary-400 font-bold"><span class="iconify i-heroicons:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
<!--v-if-->
</ol>
</div>"

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

@@ -1,222 +1,222 @@
// 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 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full 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-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full 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-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 class correctly 1`] = `"<button type="button" class="inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-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-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5 rounded-full font-bold"></button>"`;
exports[`Button > renders with color black correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-200 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<!--v-if--><span class="truncate">Button</span>
<!--v-if-->
</button>"
`;
exports[`Button > renders with color gray correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 hover:bg-gray-100 disabled:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<!--v-if--><span class="truncate">Button</span>
<!--v-if-->
</button>"
`;
exports[`Button > renders with color green correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-green-500 hover:bg-green-600 disabled:bg-green-500 dark:bg-green-400 dark:hover:bg-green-500 dark:disabled:bg-green-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-500 dark:focus-visible:outline-green-400">
<!--v-if--><span class="truncate">Button</span>
<!--v-if-->
</button>"
`;
exports[`Button > renders with color primary correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-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-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 color red correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-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-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:focus-visible:outline-red-400">
<!--v-if--><span class="truncate">Button</span>
<!--v-if-->
</button>"
`;
exports[`Button > renders with color white correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<!--v-if--><span class="truncate">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 transition-colors text-sm gap-1.5 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-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5 rounded-full font-bold"></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 transition-colors px-2.5 py-1.5 text-sm gap-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-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 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-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
<!--v-if--><span class="truncate">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 transition-colors px-2.5 py-1.5 text-sm gap-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-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
"<button type="button" disabled="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 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-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 gray variant ghost correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-700 dark:text-gray-200 hover:bg-gray-100 focus-visible:bg-gray-100 disabled:bg-transparent dark:hover:bg-gray-800 dark:focus-visible:bg-gray-800 dark:hover:disabled:bg-transparent">
<!--v-if--><span class="truncate">Button</span>
<!--v-if-->
</button>"
`;
exports[`Button > renders with gray variant link correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-500 hover:text-gray-700 disabled:text-gray-500 dark:text-gray-400 dark:hover:text-gray-200 dark:disabled:text-gray-400 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-white">
<!--v-if--><span class="truncate">Button</span>
<!--v-if-->
</button>"
`;
exports[`Button > renders with gray variant outline correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-white hover:bg-gray-100 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-white">
<!--v-if--><span class="truncate">Button</span>
<!--v-if-->
</button>"
`;
exports[`Button > renders with gray variant soft correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-700 dark:text-gray-200 bg-gray-100 hover:bg-gray-200 focus-visible:bg-gray-200 disabled:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:focus-visible:bg-gray-700/50 dark:disabled:bg-gray-800">
<!--v-if--><span class="truncate">Button</span>
<!--v-if-->
</button>"
`;
exports[`Button > renders with gray variant solid correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-700 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-200 dark:disabled:bg-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 dark:focus-visible:outline-white">
<!--v-if--><span class="truncate">Button</span>
<!--v-if-->
</button>"
`;
exports[`Button > renders with gray variant subtle correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-100 hover:bg-gray-200 disabled:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-white">
<!--v-if--><span class="truncate">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 transition-colors text-sm gap-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-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:rocket-launch shrink-0 size-5" aria-hidden="true"></span>
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 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-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:rocket-launch shrink-0 size-5" aria-hidden="true"></span>
<!--v-if-->
<!--v-if-->
</button>"
`;
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 transition-colors px-2.5 py-1.5 text-sm gap-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-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 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-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 leading and 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 transition-colors text-sm gap-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-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:arrow-left shrink-0 size-5" aria-hidden="true"></span>
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 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-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:arrow-left shrink-0 size-5" aria-hidden="true"></span>
<!--v-if-->
<!--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 transition-colors text-sm gap-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-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5">Leading slot
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 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-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5">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 transition-colors text-sm gap-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-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:arrow-left shrink-0 size-5" aria-hidden="true"></span>
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 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-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:arrow-left shrink-0 size-5" aria-hidden="true"></span>
<!--v-if-->
<!--v-if-->
</button>"
`;
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 transition-colors text-sm gap-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-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:arrow-path-20-solid shrink-0 size-5 animate-spin" aria-hidden="true"></span>
"<button type="button" disabled="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 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-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:arrow-path-20-solid shrink-0 size-5 animate-spin" aria-hidden="true"></span>
<!--v-if-->
<!--v-if-->
</button>"
`;
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 transition-colors text-sm gap-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-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:sparkles shrink-0 size-5 animate-spin" aria-hidden="true"></span>
"<button type="button" disabled="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 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-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><span class="iconify i-heroicons:sparkles shrink-0 size-5 animate-spin" aria-hidden="true"></span>
<!--v-if-->
<!--v-if-->
</button>"
`;
exports[`Button > renders with size lg correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 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-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
exports[`Button > renders with primary variant ghost correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary-500 dark:text-primary-400 hover:bg-primary-500/10 focus-visible:bg-primary-500/10 disabled:bg-transparent dark:hover:bg-primary-400/10 dark:focus-visible:bg-primary-400/10 dark:disabled:bg-transparent">
<!--v-if--><span class="truncate">Button</span>
<!--v-if-->
</button>"
`;
exports[`Button > renders with size md correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-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-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 size sm correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-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-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 size xl correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 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-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 size xs correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 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-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 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 transition-colors text-sm gap-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-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5">
<!--v-if--><span class="truncate">Button</span>
<!--v-if-->
</button>"
`;
exports[`Button > renders with trailing and 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 transition-colors text-sm gap-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-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5">
<!--v-if-->
<!--v-if--><span class="iconify i-heroicons:arrow-right shrink-0 size-5" aria-hidden="true"></span>
</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 transition-colors text-sm gap-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-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5">
<!--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 transition-colors text-sm gap-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-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5">
<!--v-if-->
<!--v-if--><span class="iconify i-heroicons:arrow-right shrink-0 size-5" aria-hidden="true"></span>
</button>"
`;
exports[`Button > renders with ui correctly 1`] = `"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-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-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"></button>"`;
exports[`Button > renders with variant ghost correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary-500 dark:text-primary-400 hover:bg-primary-500/20 disabled:bg-transparent dark:hover:bg-primary-400/20 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="truncate">Button</span>
<!--v-if-->
</button>"
`;
exports[`Button > renders with variant link correctly 1`] = `
exports[`Button > renders with primary variant link correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-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 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<!--v-if--><span class="truncate">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 disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-current text-primary-500 dark:text-primary-400 hover:bg-primary-500/20 disabled:bg-transparent dark:hover:bg-primary-400/20 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
exports[`Button > renders with primary variant outline correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-primary-500/50 dark:ring-primary-400/50 text-primary-500 dark:text-primary-400 hover:bg-primary-500/10 disabled:bg-transparent dark:hover:bg-primary-400/10 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<!--v-if--><span class="truncate">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 disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary-500 dark:text-primary-400 bg-primary-500/10 hover:bg-primary-500/20 disabled:bg-primary-500/10 dark:bg-primary-400/10 dark:hover:bg-primary-400/20 dark:disabled:bg-primary-400/10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
exports[`Button > renders with primary variant soft correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary-500 dark:text-primary-400 bg-primary-500/10 hover:bg-primary-500/15 focus-visible:bg-primary-500/15 disabled:bg-primary-500/10 dark:bg-primary-400/10 dark:hover:bg-primary-400/15 dark:focus-visible:bg-primary-400/15 dark:disabled:bg-primary-400/10">
<!--v-if--><span class="truncate">Button</span>
<!--v-if-->
</button>"
`;
exports[`Button > renders with variant solid correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-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-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
exports[`Button > renders with primary variant solid correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 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-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 subtle correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25 bg-primary-500/10 hover:bg-primary-500/20 disabled:bg-primary-500/10 dark:bg-primary-400/10 dark:hover:bg-primary-400/20 dark:disabled:bg-primary-400/10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
exports[`Button > renders with primary variant subtle correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25 bg-primary-500/10 hover:bg-primary-500/15 disabled:bg-primary-500/10 dark:bg-primary-400/10 dark:hover:bg-primary-400/15 dark:disabled:bg-primary-400/10 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<!--v-if--><span class="truncate">Button</span>
<!--v-if-->
</button>"
`;
exports[`Button > renders with size lg correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 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-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 size md correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 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-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 size sm correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 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-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 size xl correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 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-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 size xs correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 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-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 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 transition-colors text-sm gap-1.5 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-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5">
<!--v-if--><span class="truncate">Button</span>
<!--v-if-->
</button>"
`;
exports[`Button > renders with trailing and 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 transition-colors text-sm gap-1.5 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-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5">
<!--v-if-->
<!--v-if--><span class="iconify i-heroicons:arrow-right shrink-0 size-5" aria-hidden="true"></span>
</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 transition-colors text-sm gap-1.5 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-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5">
<!--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 transition-colors text-sm gap-1.5 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-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5">
<!--v-if-->
<!--v-if--><span class="iconify i-heroicons:arrow-right shrink-0 size-5" aria-hidden="true"></span>
</button>"
`;
exports[`Button > renders with ui correctly 1`] = `"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 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-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"></button>"`;

28
test/components/__snapshots__/ButtonGroup.spec.ts.snap
View File

@@ -2,10 +2,10 @@
exports[`ButtonGroup > renders orientation vertical with default slot correctly 1`] = `
"<div class="relative flex flex-col -space-y-px">
<div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<!--v-if-->
<!--v-if-->
</div> <button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none px-2.5 py-1.5 text-sm gap-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-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
</div> <button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 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-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
<!--v-if--><span class="truncate"> Click me! </span>
<!--v-if-->
</button>
@@ -18,10 +18,10 @@ exports[`ButtonGroup > renders with class correctly 1`] = `"<div class="relative
exports[`ButtonGroup > renders with default slot correctly 1`] = `
"<div class="relative inline-flex -space-x-px">
<div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<!--v-if-->
<!--v-if-->
</div> <button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-2.5 py-1.5 text-sm gap-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-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
</div> <button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 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-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
<!--v-if--><span class="truncate"> Click me! </span>
<!--v-if-->
</button>
@@ -30,10 +30,10 @@ exports[`ButtonGroup > renders with default slot correctly 1`] = `
exports[`ButtonGroup > renders with size lg correctly 1`] = `
"<div class="relative inline-flex -space-x-px">
<div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-3 py-2 text-sm gap-2 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-3 py-2 text-sm gap-2 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<!--v-if-->
<!--v-if-->
</div> <button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-3 py-2 text-sm gap-2 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-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
</div> <button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-3 py-2 text-sm gap-2 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-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
<!--v-if--><span class="truncate"> Click me! </span>
<!--v-if-->
</button>
@@ -42,10 +42,10 @@ exports[`ButtonGroup > renders with size lg correctly 1`] = `
exports[`ButtonGroup > renders with size md correctly 1`] = `
"<div class="relative inline-flex -space-x-px">
<div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<!--v-if-->
<!--v-if-->
</div> <button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-2.5 py-1.5 text-sm gap-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-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
</div> <button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 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-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
<!--v-if--><span class="truncate"> Click me! </span>
<!--v-if-->
</button>
@@ -54,10 +54,10 @@ exports[`ButtonGroup > renders with size md correctly 1`] = `
exports[`ButtonGroup > renders with size sm correctly 1`] = `
"<div class="relative inline-flex -space-x-px">
<div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-xs gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-xs gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<!--v-if-->
<!--v-if-->
</div> <button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-2.5 py-1.5 text-xs gap-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-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
</div> <button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-2.5 py-1.5 text-xs gap-1.5 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-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
<!--v-if--><span class="truncate"> Click me! </span>
<!--v-if-->
</button>
@@ -66,10 +66,10 @@ exports[`ButtonGroup > renders with size sm correctly 1`] = `
exports[`ButtonGroup > renders with size xl correctly 1`] = `
"<div class="relative inline-flex -space-x-px">
<div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-3 py-2 text-base gap-2 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-3 py-2 text-base gap-2 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<!--v-if-->
<!--v-if-->
</div> <button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-3 py-2 text-base gap-2 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-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
</div> <button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-3 py-2 text-base gap-2 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-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
<!--v-if--><span class="truncate"> Click me! </span>
<!--v-if-->
</button>
@@ -78,10 +78,10 @@ exports[`ButtonGroup > renders with size xl correctly 1`] = `
exports[`ButtonGroup > renders with size xs correctly 1`] = `
"<div class="relative inline-flex -space-x-px">
<div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2 py-1 text-xs gap-1 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2 py-1 text-xs gap-1 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<!--v-if-->
<!--v-if-->
</div> <button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-2 py-1 text-xs gap-1 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-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
</div> <button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-2 py-1 text-xs gap-1 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-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
<!--v-if--><span class="truncate"> Click me! </span>
<!--v-if-->
</button>

53
test/components/__snapshots__/Checkbox.spec.ts.snap
View File

@@ -2,7 +2,7 @@
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 text-white dark:text-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="19" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded text-white dark:text-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="16" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
@@ -11,44 +11,9 @@ exports[`Checkbox > renders with class correctly 1`] = `
</div>"
`;
exports[`Checkbox > renders with color black correctly 1`] = `
exports[`Checkbox > renders with color gray 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 text-white dark:text-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 dark:focus-visible:outline-white size-4" id="18" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
</div>
<!--v-if-->
</div>"
`;
exports[`Checkbox > renders with color green 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 text-white dark:text-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-500 dark:focus-visible:outline-green-400 size-4" id="16" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
</div>
<!--v-if-->
</div>"
`;
exports[`Checkbox > renders with color primary 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 text-white dark:text-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="15" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
</div>
<!--v-if-->
</div>"
`;
exports[`Checkbox > renders with color red 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 text-white dark:text-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:focus-visible:outline-red-400 size-4" id="17" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded text-white dark:text-gray-900 ring-inset focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 dark:focus-visible:outline-white size-4 ring-2 ring-gray-900 dark:ring-white bg-gray-900 dark:bg-white" id="15" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span class="iconify i-heroicons:check-20-solid shrink-0 size-full" aria-hidden="true" style="pointer-events: none;" data-state="checked"></span></button>
<!---->
</div>
<!--v-if-->
@@ -79,12 +44,12 @@ exports[`Checkbox > renders with description correctly 1`] = `
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 text-white dark:text-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="22" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded text-white dark:text-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="19" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
</div>
<div class="ms-2 text-sm"><label for="22" class="block font-medium text-gray-700 dark:text-gray-200">Description slot</label>
<div class="ms-2 text-sm"><label for="19" class="block font-medium text-gray-700 dark:text-gray-200">Description slot</label>
<!--v-if-->
</div>
</div>"
@@ -156,12 +121,12 @@ exports[`Checkbox > renders with label correctly 1`] = `
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 text-white dark:text-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="21" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded text-white dark:text-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="18" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
</div>
<div class="ms-2 text-sm"><label for="21" class="block font-medium text-gray-700 dark:text-gray-200">Label slot</label>
<div class="ms-2 text-sm"><label for="18" class="block font-medium text-gray-700 dark:text-gray-200">Label slot</label>
<!--v-if-->
</div>
</div>"
@@ -185,7 +150,7 @@ exports[`Checkbox > renders with required correctly 1`] = `
</button>
<!---->
</div>
<div class="ms-2 text-sm"><label for="8" class="block font-medium text-gray-700 dark:text-gray-200 after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-400">Label</label>
<div class="ms-2 text-sm"><label for="8" class="block font-medium text-gray-700 dark:text-gray-200 after:content-['*'] after:ms-0.5 after:text-error-500 dark:after:text-error-400">Label</label>
<!--v-if-->
</div>
</div>"
@@ -248,7 +213,7 @@ exports[`Checkbox > renders with size xs correctly 1`] = `
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 text-white dark:text-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="20" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded text-white dark:text-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="17" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->

10
test/components/__snapshots__/Chip.spec.ts.snap
View File

@@ -4,18 +4,8 @@ exports[`Chip > renders with as correctly 1`] = `"<span class="relative inline-f
exports[`Chip > renders with class correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0 mx-auto"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
exports[`Chip > renders with color black correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-gray-900 dark:bg-white h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
exports[`Chip > renders with color gray correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-gray-500 dark:bg-gray-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
exports[`Chip > renders with color green correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-green-500 dark:bg-green-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
exports[`Chip > renders with color primary correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
exports[`Chip > renders with color red correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-red-500 dark:bg-red-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
exports[`Chip > renders with color white correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-white dark:bg-gray-900 h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
exports[`Chip > renders with content slot correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform">Content slot</span></div>"`;
exports[`Chip > renders with default slot correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0">Default slot<span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;

78
test/components/__snapshots__/CommandPalette.spec.ts.snap
View File

@@ -2,7 +2,7 @@
exports[`CommandPalette > renders with as correctly 1`] = `
"<section style="pointer-events: auto;" dir="ltr" class="flex flex-col min-h-0 divide-y divide-gray-200 dark:divide-gray-800">
<div class="relative inline-flex items-center [&>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-3 py-2 text-sm gap-2 bg-transparent pl-10" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-3"><span class="iconify i-heroicons:magnifying-glass-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
<div class="relative inline-flex items-center [&>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-gray-900 dark:text-white pl-10" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-3"><span class="iconify i-heroicons:magnifying-glass-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
<!--v-if-->
</div>
<!--teleport start-->
@@ -37,7 +37,7 @@ exports[`CommandPalette > renders with as correctly 1`] = `
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-green-500 dark:bg-green-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">feature</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
</div>
<div id="radix-vue-combobox-option-218" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-217" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">enhancement</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-blue-500 dark:bg-blue-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">enhancement</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
</div>
</div>
<div role="group" aria-labelledby="radix-vue-combobox-group-219" class="p-1 isolate">
@@ -65,7 +65,7 @@ exports[`CommandPalette > renders with as correctly 1`] = `
exports[`CommandPalette > renders with class correctly 1`] = `
"<div style="pointer-events: auto;" dir="ltr" class="flex flex-col min-h-0 divide-y divide-gray-300 dark:divide-gray-700">
<div class="relative inline-flex items-center [&>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-3 py-2 text-sm gap-2 bg-transparent pl-10" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-3"><span class="iconify i-heroicons:magnifying-glass-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
<div class="relative inline-flex items-center [&>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-gray-900 dark:text-white pl-10" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-3"><span class="iconify i-heroicons:magnifying-glass-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
<!--v-if-->
</div>
<!--teleport start-->
@@ -100,7 +100,7 @@ exports[`CommandPalette > renders with class correctly 1`] = `
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-green-500 dark:bg-green-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">feature</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
</div>
<div id="radix-vue-combobox-option-238" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-237" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">enhancement</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-blue-500 dark:bg-blue-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">enhancement</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
</div>
</div>
<div role="group" aria-labelledby="radix-vue-combobox-group-239" class="p-1 isolate">
@@ -128,7 +128,7 @@ exports[`CommandPalette > renders with class correctly 1`] = `
exports[`CommandPalette > renders with close correctly 1`] = `
"<div style="pointer-events: auto;" dir="ltr" class="flex flex-col min-h-0 divide-y divide-gray-200 dark:divide-gray-800">
<div class="relative inline-flex items-center [&>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-3 py-2 text-sm gap-2 bg-transparent pl-10 pr-10" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-3"><span class="iconify i-heroicons:magnifying-glass-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span><span class="absolute inset-y-0 end-0 flex items-center pr-3"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 text-gray-700 dark:text-gray-200 hover:bg-gray-50 disabled:bg-transparent dark:hover:bg-gray-800 dark:hover:disabled:bg-transparent focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
<div class="relative inline-flex items-center [&>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-gray-900 dark:text-white pl-10 pr-10" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-3"><span class="iconify i-heroicons:magnifying-glass-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span><span class="absolute inset-y-0 end-0 flex items-center pr-3"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 text-gray-700 dark:text-gray-200 hover:bg-gray-100 focus-visible:bg-gray-100 disabled:bg-transparent dark:hover:bg-gray-800 dark:focus-visible:bg-gray-800 dark:hover:disabled:bg-transparent p-1.5"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
<!--v-if-->
<!--v-if--></button></span>
</div>
@@ -164,7 +164,7 @@ exports[`CommandPalette > renders with close correctly 1`] = `
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-green-500 dark:bg-green-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">feature</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
</div>
<div id="radix-vue-combobox-option-178" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-177" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">enhancement</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-blue-500 dark:bg-blue-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">enhancement</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
</div>
</div>
<div role="group" aria-labelledby="radix-vue-combobox-group-179" class="p-1 isolate">
@@ -192,7 +192,7 @@ exports[`CommandPalette > renders with close correctly 1`] = `
exports[`CommandPalette > renders with close slot correctly 1`] = `
"<div style="pointer-events: auto;" dir="ltr" class="flex flex-col min-h-0 divide-y divide-gray-200 dark:divide-gray-800">
<div class="relative inline-flex items-center [&>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-3 py-2 text-sm gap-2 bg-transparent pl-10 pr-10" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-3"><span class="iconify i-heroicons:magnifying-glass-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span><span class="absolute inset-y-0 end-0 flex items-center pr-3">Close slot</span></div>
<div class="relative inline-flex items-center [&>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-gray-900 dark:text-white pl-10 pr-10" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-3"><span class="iconify i-heroicons:magnifying-glass-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span><span class="absolute inset-y-0 end-0 flex items-center pr-3">Close slot</span></div>
<!--teleport start-->
<div id="radix-vue-combobox-content-382" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial;" class="relative overflow-hidden">
<!---->
@@ -225,7 +225,7 @@ exports[`CommandPalette > renders with close slot correctly 1`] = `
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-green-500 dark:bg-green-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">feature</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
</div>
<div id="radix-vue-combobox-option-398" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-397" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">enhancement</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-blue-500 dark:bg-blue-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">enhancement</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
</div>
</div>
<div role="group" aria-labelledby="radix-vue-combobox-group-399" class="p-1 isolate">
@@ -253,7 +253,7 @@ exports[`CommandPalette > renders with close slot correctly 1`] = `
exports[`CommandPalette > renders with closeIcon correctly 1`] = `
"<div style="pointer-events: auto;" dir="ltr" class="flex flex-col min-h-0 divide-y divide-gray-200 dark:divide-gray-800">
<div class="relative inline-flex items-center [&>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-3 py-2 text-sm gap-2 bg-transparent pl-10 pr-10" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-3"><span class="iconify i-heroicons:magnifying-glass-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span><span class="absolute inset-y-0 end-0 flex items-center pr-3"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 text-gray-700 dark:text-gray-200 hover:bg-gray-50 disabled:bg-transparent dark:hover:bg-gray-800 dark:hover:disabled:bg-transparent focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:trash shrink-0 size-5" aria-hidden="true"></span>
<div class="relative inline-flex items-center [&>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-gray-900 dark:text-white pl-10 pr-10" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-3"><span class="iconify i-heroicons:magnifying-glass-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span><span class="absolute inset-y-0 end-0 flex items-center pr-3"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-sm gap-1.5 text-gray-700 dark:text-gray-200 hover:bg-gray-100 focus-visible:bg-gray-100 disabled:bg-transparent dark:hover:bg-gray-800 dark:focus-visible:bg-gray-800 dark:hover:disabled:bg-transparent p-1.5"><span class="iconify i-heroicons:trash shrink-0 size-5" aria-hidden="true"></span>
<!--v-if-->
<!--v-if--></button></span>
</div>
@@ -289,7 +289,7 @@ exports[`CommandPalette > renders with closeIcon correctly 1`] = `
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-green-500 dark:bg-green-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">feature</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
</div>
<div id="radix-vue-combobox-option-198" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-197" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">enhancement</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-blue-500 dark:bg-blue-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">enhancement</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
</div>
</div>
<div role="group" aria-labelledby="radix-vue-combobox-group-199" class="p-1 isolate">
@@ -317,7 +317,7 @@ exports[`CommandPalette > renders with closeIcon correctly 1`] = `
exports[`CommandPalette > renders with custom slot correctly 1`] = `
"<div style="pointer-events: auto;" dir="ltr" class="flex flex-col min-h-0 divide-y divide-gray-200 dark:divide-gray-800">
<div class="relative inline-flex items-center [&>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-3 py-2 text-sm gap-2 bg-transparent pl-10" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-3"><span class="iconify i-heroicons:magnifying-glass-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
<div class="relative inline-flex items-center [&>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-gray-900 dark:text-white pl-10" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-3"><span class="iconify i-heroicons:magnifying-glass-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
<!--v-if-->
</div>
<!--teleport start-->
@@ -349,7 +349,7 @@ exports[`CommandPalette > renders with custom slot correctly 1`] = `
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-green-500 dark:bg-green-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">feature</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
</div>
<div id="radix-vue-combobox-option-378" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-377" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">enhancement</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-blue-500 dark:bg-blue-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">enhancement</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
</div>
</div>
<div role="group" aria-labelledby="radix-vue-combobox-group-379" class="p-1 isolate">
@@ -377,7 +377,7 @@ exports[`CommandPalette > renders with custom slot correctly 1`] = `
exports[`CommandPalette > renders with defaultValue correctly 1`] = `
"<div style="pointer-events: auto;" dir="ltr" class="flex flex-col min-h-0 divide-y divide-gray-200 dark:divide-gray-800">
<div class="relative inline-flex items-center [&>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-3 py-2 text-sm gap-2 bg-transparent pl-10" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-3"><span class="iconify i-heroicons:magnifying-glass-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
<div class="relative inline-flex items-center [&>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-gray-900 dark:text-white pl-10" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-3"><span class="iconify i-heroicons:magnifying-glass-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
<!--v-if-->
</div>
<!--teleport start-->
@@ -412,7 +412,7 @@ exports[`CommandPalette > renders with defaultValue correctly 1`] = `
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-green-500 dark:bg-green-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">feature</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
</div>
<div id="radix-vue-combobox-option-57" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-56" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">enhancement</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-blue-500 dark:bg-blue-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">enhancement</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
</div>
</div>
<div role="group" aria-labelledby="radix-vue-combobox-group-58" class="p-1 isolate">
@@ -440,7 +440,7 @@ exports[`CommandPalette > renders with defaultValue correctly 1`] = `
exports[`CommandPalette > renders with disabled correctly 1`] = `
"<div style="pointer-events: auto;" dir="ltr" class="flex flex-col min-h-0 divide-y divide-gray-200 dark:divide-gray-800">
<div class="relative inline-flex items-center [&>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-3 py-2 text-sm gap-2 bg-transparent pl-10" disabled="" aria-expanded="true" aria-controls="" aria-disabled="true" aria-autocomplete="list" role="combobox" autocomplete="false" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-3"><span class="iconify i-heroicons:magnifying-glass-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
<div class="relative inline-flex items-center [&>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-gray-900 dark:text-white pl-10" disabled="" aria-expanded="true" aria-controls="" aria-disabled="true" aria-autocomplete="list" role="combobox" autocomplete="false" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-3"><span class="iconify i-heroicons:magnifying-glass-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
<!--v-if-->
</div>
<!--teleport start-->
@@ -475,7 +475,7 @@ exports[`CommandPalette > renders with disabled correctly 1`] = `
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-green-500 dark:bg-green-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">feature</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
</div>
<div id="radix-vue-combobox-option-97" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-96" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">enhancement</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-blue-500 dark:bg-blue-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">enhancement</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
</div>
</div>
<div role="group" aria-labelledby="radix-vue-combobox-group-98" class="p-1 isolate">
@@ -503,7 +503,7 @@ exports[`CommandPalette > renders with disabled correctly 1`] = `
exports[`CommandPalette > renders with empty slot correctly 1`] = `
"<div style="pointer-events: auto;" dir="ltr" class="flex flex-col min-h-0 divide-y divide-gray-200 dark:divide-gray-800">
<div class="relative inline-flex items-center [&>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-3 py-2 text-sm gap-2 bg-transparent pl-10" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-3"><span class="iconify i-heroicons:magnifying-glass-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
<div class="relative inline-flex items-center [&>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-gray-900 dark:text-white pl-10" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-3"><span class="iconify i-heroicons:magnifying-glass-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
<!--v-if-->
</div>
<!--teleport start-->
@@ -538,7 +538,7 @@ exports[`CommandPalette > renders with empty slot correctly 1`] = `
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-green-500 dark:bg-green-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">feature</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
</div>
<div id="radix-vue-combobox-option-278" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-277" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">enhancement</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-blue-500 dark:bg-blue-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">enhancement</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
</div>
</div>
<div role="group" aria-labelledby="radix-vue-combobox-group-279" class="p-1 isolate">
@@ -566,7 +566,7 @@ exports[`CommandPalette > renders with empty slot correctly 1`] = `
exports[`CommandPalette > renders with groups correctly 1`] = `
"<div style="pointer-events: auto;" dir="ltr" class="flex flex-col min-h-0 divide-y divide-gray-200 dark:divide-gray-800">
<div class="relative inline-flex items-center [&>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-3 py-2 text-sm gap-2 bg-transparent pl-10" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-3"><span class="iconify i-heroicons:magnifying-glass-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
<div class="relative inline-flex items-center [&>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-gray-900 dark:text-white pl-10" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-3"><span class="iconify i-heroicons:magnifying-glass-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
<!--v-if-->
</div>
<!--teleport start-->
@@ -601,7 +601,7 @@ exports[`CommandPalette > renders with groups correctly 1`] = `
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-green-500 dark:bg-green-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">feature</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
</div>
<div id="radix-vue-combobox-option-17" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-16" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">enhancement</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-blue-500 dark:bg-blue-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">enhancement</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
</div>
</div>
<div role="group" aria-labelledby="radix-vue-combobox-group-18" class="p-1 isolate">
@@ -629,7 +629,7 @@ exports[`CommandPalette > renders with groups correctly 1`] = `
exports[`CommandPalette > renders with icon correctly 1`] = `
"<div style="pointer-events: auto;" dir="ltr" class="flex flex-col min-h-0 divide-y divide-gray-200 dark:divide-gray-800">
<div class="relative inline-flex items-center [&>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-3 py-2 text-sm gap-2 bg-transparent pl-10" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-3"><span class="iconify i-heroicons:command-line shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
<div class="relative inline-flex items-center [&>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-gray-900 dark:text-white pl-10" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-3"><span class="iconify i-heroicons:command-line shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
<!--v-if-->
</div>
<!--teleport start-->
@@ -664,7 +664,7 @@ exports[`CommandPalette > renders with icon correctly 1`] = `
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-green-500 dark:bg-green-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">feature</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
</div>
<div id="radix-vue-combobox-option-117" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-116" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">enhancement</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-blue-500 dark:bg-blue-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">enhancement</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
</div>
</div>
<div role="group" aria-labelledby="radix-vue-combobox-group-118" class="p-1 isolate">
@@ -692,7 +692,7 @@ exports[`CommandPalette > renders with icon correctly 1`] = `
exports[`CommandPalette > renders with item slot correctly 1`] = `
"<div style="pointer-events: auto;" dir="ltr" class="flex flex-col min-h-0 divide-y divide-gray-200 dark:divide-gray-800">
<div class="relative inline-flex items-center [&>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-3 py-2 text-sm gap-2 bg-transparent pl-10" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-3"><span class="iconify i-heroicons:magnifying-glass-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
<div class="relative inline-flex items-center [&>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-gray-900 dark:text-white pl-10" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-3"><span class="iconify i-heroicons:magnifying-glass-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
<!--v-if-->
</div>
<!--teleport start-->
@@ -740,7 +740,7 @@ exports[`CommandPalette > renders with item slot correctly 1`] = `
exports[`CommandPalette > renders with item-label slot correctly 1`] = `
"<div style="pointer-events: auto;" dir="ltr" class="flex flex-col min-h-0 divide-y divide-gray-200 dark:divide-gray-800">
<div class="relative inline-flex items-center [&>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-3 py-2 text-sm gap-2 bg-transparent pl-10" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-3"><span class="iconify i-heroicons:magnifying-glass-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
<div class="relative inline-flex items-center [&>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-gray-900 dark:text-white pl-10" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-3"><span class="iconify i-heroicons:magnifying-glass-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
<!--v-if-->
</div>
<!--teleport start-->
@@ -775,7 +775,7 @@ exports[`CommandPalette > renders with item-label slot correctly 1`] = `
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-green-500 dark:bg-green-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1">Item label slot</span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
</div>
<div id="radix-vue-combobox-option-338" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-337" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1">Item label slot</span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-blue-500 dark:bg-blue-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1">Item label slot</span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
</div>
</div>
<div role="group" aria-labelledby="radix-vue-combobox-group-339" class="p-1 isolate">
@@ -803,7 +803,7 @@ exports[`CommandPalette > renders with item-label slot correctly 1`] = `
exports[`CommandPalette > renders with item-leading slot correctly 1`] = `
"<div style="pointer-events: auto;" dir="ltr" class="flex flex-col min-h-0 divide-y divide-gray-200 dark:divide-gray-800">
<div class="relative inline-flex items-center [&>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-3 py-2 text-sm gap-2 bg-transparent pl-10" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-3"><span class="iconify i-heroicons:magnifying-glass-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
<div class="relative inline-flex items-center [&>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-gray-900 dark:text-white pl-10" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-3"><span class="iconify i-heroicons:magnifying-glass-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
<!--v-if-->
</div>
<!--teleport start-->
@@ -857,7 +857,7 @@ exports[`CommandPalette > renders with item-leading slot correctly 1`] = `
exports[`CommandPalette > renders with item-trailing slot correctly 1`] = `
"<div style="pointer-events: auto;" dir="ltr" class="flex flex-col min-h-0 divide-y divide-gray-200 dark:divide-gray-800">
<div class="relative inline-flex items-center [&>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-3 py-2 text-sm gap-2 bg-transparent pl-10" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-3"><span class="iconify i-heroicons:magnifying-glass-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
<div class="relative inline-flex items-center [&>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-gray-900 dark:text-white pl-10" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-3"><span class="iconify i-heroicons:magnifying-glass-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
<!--v-if-->
</div>
<!--teleport start-->
@@ -889,7 +889,7 @@ exports[`CommandPalette > renders with item-trailing slot correctly 1`] = `
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-green-500 dark:bg-green-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">feature</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
</div>
<div id="radix-vue-combobox-option-358" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-357" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">enhancement</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-blue-500 dark:bg-blue-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">enhancement</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
</div>
</div>
<div role="group" aria-labelledby="radix-vue-combobox-group-359" class="p-1 isolate">
@@ -917,7 +917,7 @@ exports[`CommandPalette > renders with item-trailing slot correctly 1`] = `
exports[`CommandPalette > renders with loading correctly 1`] = `
"<div style="pointer-events: auto;" dir="ltr" class="flex flex-col min-h-0 divide-y divide-gray-200 dark:divide-gray-800">
<div class="relative inline-flex items-center [&>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-3 py-2 text-sm gap-2 bg-transparent pl-10" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-3"><span class="iconify i-heroicons:arrow-path-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5 animate-spin" aria-hidden="true"></span></span>
<div class="relative inline-flex items-center [&>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-gray-900 dark:text-white pl-10" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-3"><span class="iconify i-heroicons:arrow-path-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5 animate-spin" aria-hidden="true"></span></span>
<!--v-if-->
</div>
<!--teleport start-->
@@ -952,7 +952,7 @@ exports[`CommandPalette > renders with loading correctly 1`] = `
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-green-500 dark:bg-green-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">feature</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
</div>
<div id="radix-vue-combobox-option-137" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-136" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">enhancement</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-blue-500 dark:bg-blue-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">enhancement</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
</div>
</div>
<div role="group" aria-labelledby="radix-vue-combobox-group-138" class="p-1 isolate">
@@ -980,7 +980,7 @@ exports[`CommandPalette > renders with loading correctly 1`] = `
exports[`CommandPalette > renders with loadingIcon correctly 1`] = `
"<div style="pointer-events: auto;" dir="ltr" class="flex flex-col min-h-0 divide-y divide-gray-200 dark:divide-gray-800">
<div class="relative inline-flex items-center [&>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-3 py-2 text-sm gap-2 bg-transparent pl-10" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-3"><span class="iconify i-heroicons:sparkles shrink-0 text-gray-400 dark:text-gray-500 size-5 animate-spin" aria-hidden="true"></span></span>
<div class="relative inline-flex items-center [&>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-gray-900 dark:text-white pl-10" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-3"><span class="iconify i-heroicons:sparkles shrink-0 text-gray-400 dark:text-gray-500 size-5 animate-spin" aria-hidden="true"></span></span>
<!--v-if-->
</div>
<!--teleport start-->
@@ -1007,7 +1007,7 @@ exports[`CommandPalette > renders with loadingIcon correctly 1`] = `
exports[`CommandPalette > renders with modelValue correctly 1`] = `
"<div style="pointer-events: auto;" dir="ltr" class="flex flex-col min-h-0 divide-y divide-gray-200 dark:divide-gray-800">
<div class="relative inline-flex items-center [&>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-3 py-2 text-sm gap-2 bg-transparent pl-10" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-3"><span class="iconify i-heroicons:magnifying-glass-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
<div class="relative inline-flex items-center [&>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-gray-900 dark:text-white pl-10" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-3"><span class="iconify i-heroicons:magnifying-glass-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
<!--v-if-->
</div>
<!--teleport start-->
@@ -1042,7 +1042,7 @@ exports[`CommandPalette > renders with modelValue correctly 1`] = `
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-green-500 dark:bg-green-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">feature</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
</div>
<div id="radix-vue-combobox-option-37" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-36" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">enhancement</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-blue-500 dark:bg-blue-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">enhancement</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
</div>
</div>
<div role="group" aria-labelledby="radix-vue-combobox-group-38" class="p-1 isolate">
@@ -1070,7 +1070,7 @@ exports[`CommandPalette > renders with modelValue correctly 1`] = `
exports[`CommandPalette > renders with placeholder correctly 1`] = `
"<div style="pointer-events: auto;" dir="ltr" class="flex flex-col min-h-0 divide-y divide-gray-200 dark:divide-gray-800">
<div class="relative inline-flex items-center [&>input]:h-12"><input type="text" placeholder="Search..." class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-3 py-2 text-sm gap-2 bg-transparent pl-10" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-3"><span class="iconify i-heroicons:magnifying-glass-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
<div class="relative inline-flex items-center [&>input]:h-12"><input type="text" placeholder="Search..." class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-gray-900 dark:text-white pl-10" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-3"><span class="iconify i-heroicons:magnifying-glass-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
<!--v-if-->
</div>
<!--teleport start-->
@@ -1105,7 +1105,7 @@ exports[`CommandPalette > renders with placeholder correctly 1`] = `
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-green-500 dark:bg-green-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">feature</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
</div>
<div id="radix-vue-combobox-option-77" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-76" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">enhancement</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-blue-500 dark:bg-blue-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">enhancement</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
</div>
</div>
<div role="group" aria-labelledby="radix-vue-combobox-group-78" class="p-1 isolate">
@@ -1133,7 +1133,7 @@ exports[`CommandPalette > renders with placeholder correctly 1`] = `
exports[`CommandPalette > renders with selectedIcon correctly 1`] = `
"<div style="pointer-events: auto;" dir="ltr" class="flex flex-col min-h-0 divide-y divide-gray-200 dark:divide-gray-800">
<div class="relative inline-flex items-center [&>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-3 py-2 text-sm gap-2 bg-transparent pl-10" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-3"><span class="iconify i-heroicons:magnifying-glass-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
<div class="relative inline-flex items-center [&>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-gray-900 dark:text-white pl-10" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-3"><span class="iconify i-heroicons:magnifying-glass-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
<!--v-if-->
</div>
<!--teleport start-->
@@ -1168,7 +1168,7 @@ exports[`CommandPalette > renders with selectedIcon correctly 1`] = `
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-green-500 dark:bg-green-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">feature</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
</div>
<div id="radix-vue-combobox-option-158" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-157" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">enhancement</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-blue-500 dark:bg-blue-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">enhancement</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
</div>
</div>
<div role="group" aria-labelledby="radix-vue-combobox-group-159" class="p-1 isolate">
@@ -1196,7 +1196,7 @@ exports[`CommandPalette > renders with selectedIcon correctly 1`] = `
exports[`CommandPalette > renders with ui correctly 1`] = `
"<div style="pointer-events: auto;" dir="ltr" class="flex flex-col min-h-0 divide-y divide-gray-200 dark:divide-gray-800">
<div class="relative inline-flex items-center [&>input]:h-10"><input type="text" placeholder="Type a command or search..." class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-3 py-2 text-sm gap-2 bg-transparent pl-10" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-3"><span class="iconify i-heroicons:magnifying-glass-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
<div class="relative inline-flex items-center [&>input]:h-10"><input type="text" placeholder="Type a command or search..." class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-gray-900 dark:text-white pl-10" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-3"><span class="iconify i-heroicons:magnifying-glass-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
<!--v-if-->
</div>
<!--teleport start-->
@@ -1231,7 +1231,7 @@ exports[`CommandPalette > renders with ui correctly 1`] = `
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-green-500 dark:bg-green-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">feature</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
</div>
<div id="radix-vue-combobox-option-258" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-257" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 transition-colors before:transition-colors" data-radix-vue-combobox-item="">
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">enhancement</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
<div class="relative inline-flex items-center justify-center shrink-0 mx-1.5"><span class="rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-blue-500 dark:bg-blue-400 h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1"><!--v-if--><span class="text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900">enhancement</span><span class="text-gray-400 dark:text-gray-500 [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
</div>
</div>
<div role="group" aria-labelledby="radix-vue-combobox-group-259" class="p-1 isolate">

60
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-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" value="bob@dylan.com">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" value="bob@dylan.com">
<!--v-if-->
<!--v-if-->
</div>
@@ -21,11 +21,11 @@ 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" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-inset ring-red-500 dark:ring-red-400 focus-visible:ring-2 focus-visible:ring-red-500 dark:focus-visible:ring-red-400" value="short">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error-500 dark:focus-visible:ring-error-400 ring ring-inset ring-error-500 dark:ring-error-400" value="short">
<!--v-if-->
<!--v-if-->
</div>
<p class="mt-2 text-red-500 dark:text-red-400">Must be at least 8 characters</p>
<p class="mt-2 text-error-500 dark:text-error-400">Must be at least 8 characters</p>
</div>
</div>
</form>"
@@ -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-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" value="bob@dylan.com">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" 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" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" value="validpassword">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" 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-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" value="bob@dylan.com">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" value="bob@dylan.com">
<!--v-if-->
<!--v-if-->
</div>
@@ -83,11 +83,11 @@ 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" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-inset ring-red-500 dark:ring-red-400 focus-visible:ring-2 focus-visible:ring-red-500 dark:focus-visible:ring-red-400" value="short">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error-500 dark:focus-visible:ring-error-400 ring ring-inset ring-error-500 dark:ring-error-400" value="short">
<!--v-if-->
<!--v-if-->
</div>
<p class="mt-2 text-red-500 dark:text-red-400">Must be at least 8 characters</p>
<p class="mt-2 text-error-500 dark:text-error-400">Must be at least 8 characters</p>
</div>
</div>
</form>"
@@ -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-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" value="bob@dylan.com">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" 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" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" value="validpassword">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" 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-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" value="bob@dylan.com">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" value="bob@dylan.com">
<!--v-if-->
<!--v-if-->
</div>
@@ -149,11 +149,11 @@ 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" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-inset ring-red-500 dark:ring-red-400 focus-visible:ring-2 focus-visible:ring-red-500 dark:focus-visible:ring-red-400" value="short">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error-500 dark:focus-visible:ring-error-400 ring ring-inset ring-error-500 dark:ring-error-400" value="short">
<!--v-if-->
<!--v-if-->
</div>
<p class="mt-2 text-red-500 dark:text-red-400">Must be at least 8 characters</p>
<p class="mt-2 text-error-500 dark:text-error-400">Must be at least 8 characters</p>
</div>
</div>
</form>"
@@ -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-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" value="bob@dylan.com">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" 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" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" value="validpassword">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" 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-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" value="bob@dylan.com">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" value="bob@dylan.com">
<!--v-if-->
<!--v-if-->
</div>
@@ -211,11 +211,11 @@ 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" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-inset ring-red-500 dark:ring-red-400 focus-visible:ring-2 focus-visible:ring-red-500 dark:focus-visible:ring-red-400" value="short">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error-500 dark:focus-visible:ring-error-400 ring ring-inset ring-error-500 dark:ring-error-400" value="short">
<!--v-if-->
<!--v-if-->
</div>
<p class="mt-2 text-red-500 dark:text-red-400">Must be at least 8 characters</p>
<p class="mt-2 text-error-500 dark:text-error-400">Must be at least 8 characters</p>
</div>
</div>
</form>"
@@ -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-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" value="bob@dylan.com">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" 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" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" value="validpassword">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" 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-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" value="bob@dylan.com">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" value="bob@dylan.com">
<!--v-if-->
<!--v-if-->
</div>
@@ -273,11 +273,11 @@ 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" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-inset ring-red-500 dark:ring-red-400 focus-visible:ring-2 focus-visible:ring-red-500 dark:focus-visible:ring-red-400" value="short">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error-500 dark:focus-visible:ring-error-400 ring ring-inset ring-error-500 dark:ring-error-400" value="short">
<!--v-if-->
<!--v-if-->
</div>
<p class="mt-2 text-red-500 dark:text-red-400">Must be at least 8 characters</p>
<p class="mt-2 text-error-500 dark:text-error-400">Must be at least 8 characters</p>
</div>
</div>
</form>"
@@ -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-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" value="bob@dylan.com">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" 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" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" value="validpassword">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" 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-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" value="bob@dylan.com">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" value="bob@dylan.com">
<!--v-if-->
<!--v-if-->
</div>
@@ -335,11 +335,11 @@ 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" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-inset ring-red-500 dark:ring-red-400 focus-visible:ring-2 focus-visible:ring-red-500 dark:focus-visible:ring-red-400" value="short">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error-500 dark:focus-visible:ring-error-400 ring ring-inset ring-error-500 dark:ring-error-400" value="short">
<!--v-if-->
<!--v-if-->
</div>
<p class="mt-2 text-red-500 dark:text-red-400">Must be at least 8 characters</p>
<p class="mt-2 text-error-500 dark:text-error-400">Must be at least 8 characters</p>
</div>
</div>
</form>"
@@ -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-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" value="bob@dylan.com">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" 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" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" value="validpassword">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" value="validpassword">
<!--v-if-->
<!--v-if-->
</div>

6
test/components/__snapshots__/FormField.spec.ts.snap
View File

@@ -43,7 +43,7 @@ exports[`FormField > renders with error correctly 1`] = `
<!--v-if-->
</div>
<div class="">
<p class="mt-2 text-red-500 dark:text-red-400">Username is already taken</p>
<p class="mt-2 text-error-500 dark:text-error-400">Username is already taken</p>
</div>
</div>"
`;
@@ -55,7 +55,7 @@ exports[`FormField > renders with error slot correctly 1`] = `
<!--v-if-->
</div>
<div class="">
<p class="mt-2 text-red-500 dark:text-red-400">Error slot</p>
<p class="mt-2 text-error-500 dark:text-error-400">Error slot</p>
</div>
</div>"
`;
@@ -139,7 +139,7 @@ exports[`FormField > renders with label slot correctly 1`] = `
exports[`FormField > renders with required correctly 1`] = `
"<div class="text-sm">
<div class="">
<div class="flex content-center items-center justify-between"><label for="1" class="block font-medium text-gray-700 dark:text-gray-200 after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-400">Username</label>
<div class="flex content-center items-center justify-between"><label for="1" class="block font-medium text-gray-700 dark:text-gray-200 after:content-['*'] after:ms-0.5 after:text-error-500 dark:after:text-error-400">Username</label>
<!--v-if-->
</div>
<!--v-if-->

165
test/components/__snapshots__/Input.spec.ts.snap
View File

@@ -1,201 +1,222 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Input > renders with class correctly 1`] = `
"<div class="inline-flex items-center absolute"><input type="text" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Input > renders with color gray correctly 1`] = `
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Input > renders with color green correctly 1`] = `
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-inset ring-green-500 dark:ring-green-400 focus-visible:ring-2 focus-visible:ring-green-500 dark:focus-visible:ring-green-400">
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Input > renders with color primary correctly 1`] = `
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-inset ring-primary-500 dark:ring-primary-400 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Input > renders with color red correctly 1`] = `
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-inset ring-red-500 dark:ring-red-400 focus-visible:ring-2 focus-visible:ring-red-500 dark:focus-visible:ring-red-400">
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Input > renders with color white correctly 1`] = `
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
"<div class="inline-flex items-center absolute"><input type="text" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Input > renders with default slot correctly 1`] = `
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">Default slot
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">Default slot
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Input > renders with disabled correctly 1`] = `
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" disabled="">
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" disabled="">
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Input > renders with gray variant ghost correctly 1`] = `
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white hover:bg-gray-100 focus:bg-gray-100 disabled:bg-transparent dark:hover:bg-gray-800 dark:focus:bg-gray-800 dark:disabled:bg-transparent">
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Input > renders with gray variant none correctly 1`] = `
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white">
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Input > renders with gray variant outline correctly 1`] = `
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-gray-900 dark:focus-visible:ring-white">
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Input > renders with gray variant soft correctly 1`] = `
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-gray-50 hover:bg-gray-100 focus:bg-gray-100 disabled:bg-gray-50 dark:bg-gray-800/50 dark:hover:bg-gray-800 dark:focus:bg-gray-800 dark:disabled:bg-gray-800/50">
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Input > renders with gray variant subtle correctly 1`] = `
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-gray-100 dark:bg-gray-800 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-gray-900 dark:focus-visible:ring-white">
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Input > renders with icon correctly 1`] = `
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pl-9"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><span class="iconify i-heroicons:magnifying-glass shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pl-9"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><span class="iconify i-heroicons:magnifying-glass shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
<!--v-if-->
</div>"
`;
exports[`Input > renders with id correctly 1`] = `
"<div class="relative inline-flex items-center"><input id="id" type="text" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
"<div class="relative inline-flex items-center"><input id="id" type="text" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Input > renders with leading and icon correctly 1`] = `
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pl-9"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><span class="iconify i-heroicons:magnifying-glass shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pl-9"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><span class="iconify i-heroicons:magnifying-glass shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
<!--v-if-->
</div>"
`;
exports[`Input > renders with leading slot correctly 1`] = `
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pl-9"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5">Leading slot</span>
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pl-9"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5">Leading slot</span>
<!--v-if-->
</div>"
`;
exports[`Input > renders with leadingIcon correctly 1`] = `
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pl-9"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><span class="iconify i-heroicons:magnifying-glass shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pl-9"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><span class="iconify i-heroicons:magnifying-glass shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
<!--v-if-->
</div>"
`;
exports[`Input > renders with loading correctly 1`] = `
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pl-9"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><span class="iconify i-heroicons:arrow-path-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5 animate-spin" aria-hidden="true"></span></span>
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pl-9"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><span class="iconify i-heroicons:arrow-path-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5 animate-spin" aria-hidden="true"></span></span>
<!--v-if-->
</div>"
`;
exports[`Input > renders with loadingIcon correctly 1`] = `
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pl-9"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><span class="iconify i-heroicons:sparkles shrink-0 text-gray-400 dark:text-gray-500 size-5 animate-spin" aria-hidden="true"></span></span>
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pl-9"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><span class="iconify i-heroicons:sparkles shrink-0 text-gray-400 dark:text-gray-500 size-5 animate-spin" aria-hidden="true"></span></span>
<!--v-if-->
</div>"
`;
exports[`Input > renders with name correctly 1`] = `
"<div class="relative inline-flex items-center"><input type="text" name="name" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
"<div class="relative inline-flex items-center"><input type="text" name="name" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Input > renders with placeholder correctly 1`] = `
"<div class="relative inline-flex items-center"><input type="text" placeholder="Search..." class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
"<div class="relative inline-flex items-center"><input type="text" placeholder="Search..." class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Input > renders with primary variant ghost correctly 1`] = `
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white hover:bg-gray-100 focus:bg-gray-100 disabled:bg-transparent dark:hover:bg-gray-800 dark:focus:bg-gray-800 dark:disabled:bg-transparent">
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Input > renders with primary variant none correctly 1`] = `
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white">
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Input > renders with primary variant outline correctly 1`] = `
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Input > renders with primary variant soft correctly 1`] = `
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-gray-50 hover:bg-gray-100 focus:bg-gray-100 disabled:bg-gray-50 dark:bg-gray-800/50 dark:hover:bg-gray-800 dark:focus:bg-gray-800 dark:disabled:bg-gray-800/50">
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Input > renders with primary variant subtle correctly 1`] = `
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-gray-100 dark:bg-gray-800 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Input > renders with required correctly 1`] = `
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" required="">
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" required="">
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Input > renders with size lg correctly 1`] = `
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-3 py-2 text-sm gap-2 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Input > renders with size md correctly 1`] = `
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Input > renders with size sm correctly 1`] = `
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-xs gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Input > renders with size xl correctly 1`] = `
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-3 py-2 text-base gap-2 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Input > renders with size xs correctly 1`] = `
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2 py-1 text-xs gap-1 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Input > renders with trailing and icon correctly 1`] = `
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-9">
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-9">
<!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:magnifying-glass shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
</div>"
`;
exports[`Input > renders with trailing slot correctly 1`] = `
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-9">
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-9">
<!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pr-2.5">Trailing slot</span>
</div>"
`;
exports[`Input > renders with trailingIcon correctly 1`] = `
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-9">
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-9">
<!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:magnifying-glass shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
</div>"
`;
exports[`Input > renders with type correctly 1`] = `
"<div class="relative inline-flex items-center"><input type="password" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
"<div class="relative inline-flex items-center"><input type="password" class="w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Input > renders with ui correctly 1`] = `
"<div class="relative inline-flex items-center"><input type="text" class="w-full border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 rounded-full">
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Input > renders with variant none correctly 1`] = `
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 bg-transparent">
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Input > renders with variant outline correctly 1`] = `
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
"<div class="relative inline-flex items-center"><input type="text" class="w-full border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 rounded-full">
<!--v-if-->
<!--v-if-->
</div>"

929
test/components/__snapshots__/InputMenu.spec.ts.snap
View File

File diff suppressed because it is too large Load Diff

12
test/components/__snapshots__/Kbd.spec.ts.snap
View File

@@ -4,12 +4,6 @@ exports[`Kbd > renders with as correctly 1`] = `"<span class="inline-flex items-
exports[`Kbd > renders with class correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded font-sans bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 h-5 min-w-[20px] text-[11px] font-bold">K</kbd>"`;
exports[`Kbd > renders with color black correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded font-medium font-sans bg-gray-900 dark:bg-white text-white dark:text-gray-900 h-5 min-w-[20px] text-[11px]">K</kbd>"`;
exports[`Kbd > renders with color gray correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded font-medium font-sans bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-200 ring ring-inset ring-gray-300 dark:ring-gray-700 h-5 min-w-[20px] text-[11px]">K</kbd>"`;
exports[`Kbd > renders with color white correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded font-medium font-sans bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 h-5 min-w-[20px] text-[11px]">K</kbd>"`;
exports[`Kbd > renders with default slot correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded font-medium font-sans bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 h-5 min-w-[20px] text-[11px]">Default slot</kbd>"`;
exports[`Kbd > renders with size lg correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded font-medium font-sans bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 h-6 min-w-[24px] text-[12px]">K</kbd>"`;
@@ -19,3 +13,9 @@ exports[`Kbd > renders with size md correctly 1`] = `"<kbd class="inline-flex it
exports[`Kbd > renders with size sm correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded font-medium font-sans bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 h-4 min-w-[16px] text-[10px]">K</kbd>"`;
exports[`Kbd > renders with value correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded font-medium font-sans bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 h-5 min-w-[20px] text-[11px]">K</kbd>"`;
exports[`Kbd > renders with variant outline correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded font-medium font-sans bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 h-5 min-w-[20px] text-[11px]">K</kbd>"`;
exports[`Kbd > renders with variant solid correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded font-medium font-sans bg-gray-900 dark:bg-white text-white dark:text-gray-900 h-5 min-w-[20px] text-[11px]">K</kbd>"`;
exports[`Kbd > renders with variant subtle correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded font-medium font-sans bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200 ring ring-inset ring-gray-300 dark:ring-gray-700 h-5 min-w-[20px] text-[11px]">K</kbd>"`;

Some files were not shown because too many files have changed in this diff Show More