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

fix(module): stop using tailwind's shorthand arbitrary variable syntax (#2366)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Sandro Circi
2024-10-14 10:42:26 +02:00
committed by GitHub
parent ea07dffdd5
commit dcce571cda
131 changed files with 3724 additions and 3724 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -23,11 +23,11 @@ const route = useRoute()
<UFooter>
<template #left>
<NuxtLink v-if="route.path.startsWith('/pro')" to="https://ui.nuxt.com/pro/purchase" target="_blank" class="text-sm text-[--ui-text-muted]">
Purchase <span class="text-[--ui-text-highlighted]">Nuxt UI Pro</span>
<NuxtLink v-if="route.path.startsWith('/pro')" to="https://ui.nuxt.com/pro/purchase" target="_blank" class="text-sm text-[var(--ui-text-muted)]">
Purchase <span class="text-[var(--ui-text-highlighted)]">Nuxt UI Pro</span>
</NuxtLink>
<NuxtLink v-else to="https://github.com/nuxt/ui" target="_blank" class="text-sm text-[--ui-text-muted]">
Published under <span class="text-[--ui-text-highlighted]">MIT License</span>
<NuxtLink v-else to="https://github.com/nuxt/ui" target="_blank" class="text-sm text-[var(--ui-text-muted)]">
Published under <span class="text-[var(--ui-text-highlighted)]">MIT License</span>
</NuxtLink>
</template>

4
docs/app/components/Header.vue
View File

@@ -22,10 +22,10 @@ defineShortcuts({
<template>
<UHeader :ui="{ left: 'min-w-0' }">
<template #left>
<NuxtLink to="/" class="flex items-end gap-2 font-bold text-xl text-[--ui-text-highlighted] min-w-0 focus-visible:outline-[--ui-primary]" aria-label="Nuxt UI">
<NuxtLink to="/" class="flex items-end gap-2 font-bold text-xl text-[var(--ui-text-highlighted)] min-w-0 focus-visible:outline-[var(--ui-primary)]" aria-label="Nuxt UI">
<Logo class="w-auto h-6 shrink-0" />
<UBadge :label="`v${config.version}`" variant="subtle" size="sm" class="-mb-[2px] rounded-[--ui-radius] font-semibold inline-block truncate" />
<UBadge :label="`v${config.version}`" variant="subtle" size="sm" class="-mb-[2px] rounded-[var(--ui-radius)] font-semibold inline-block truncate" />
</NuxtLink>
</template>

14
docs/app/components/content/ComponentCode.vue
View File

@@ -214,15 +214,15 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
<template>
<div class="my-5">
<div>
<div v-if="options.length" class="flex items-center gap-2.5 border border-[--ui-color-neutral-200] dark:border-[--ui-color-neutral-700] border-b-0 relative rounded-t-[calc(var(--ui-radius)*1.5)] px-4 py-2.5 overflow-x-auto">
<div v-if="options.length" class="flex items-center gap-2.5 border border-[var(--ui-color-neutral-200)] dark:border-[var(--ui-color-neutral-700)] border-b-0 relative rounded-t-[calc(var(--ui-radius)*1.5)] px-4 py-2.5 overflow-x-auto">
<template v-for="option in options" :key="option.name">
<UFormField
:label="option.label"
size="sm"
class="inline-flex ring ring-[--ui-border-accented] rounded-[--ui-radius]"
class="inline-flex ring ring-[var(--ui-border-accented)] rounded-[var(--ui-radius)]"
:ui="{
wrapper: 'bg-[--ui-bg-elevated]/50 rounded-l-[--ui-radius] flex border-r border-[--ui-border-accented]',
label: 'text-[--ui-text-muted] px-2 py-1.5',
wrapper: 'bg-[var(--ui-bg-elevated)]/50 rounded-l-[var(--ui-radius)] flex border-r border-[var(--ui-border-accented)]',
label: 'text-[var(--ui-text-muted)] px-2 py-1.5',
container: 'mt-0'
}"
>
@@ -233,7 +233,7 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
value-key="value"
color="neutral"
variant="soft"
class="rounded-[--ui-radius] rounded-l-none min-w-12"
class="rounded-[var(--ui-radius)] rounded-l-none min-w-12"
:search-input="false"
:class="[option.name.toLowerCase().endsWith('color') && 'pl-6']"
:ui="{ itemLeadingChip: 'size-2' }"
@@ -256,14 +256,14 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
:model-value="getComponentProp(option.name)"
color="neutral"
variant="soft"
:ui="{ base: 'rounded-[--ui-radius] rounded-l-none min-w-12' }"
:ui="{ base: 'rounded-[var(--ui-radius)] rounded-l-none min-w-12' }"
@update:model-value="setComponentProp(option.name, $event)"
/>
</UFormField>
</template>
</div>
<div class="flex justify-center border border-b-0 border-[--ui-color-neutral-200] dark:border-[--ui-color-neutral-700] relative p-4 z-[1]" :class="[!options.length && 'rounded-t-[calc(var(--ui-radius)*1.5)]', props.class]">
<div class="flex justify-center border border-b-0 border-[var(--ui-color-neutral-200)] dark:border-[var(--ui-color-neutral-700)] relative p-4 z-[1]" :class="[!options.length && 'rounded-t-[calc(var(--ui-radius)*1.5)]', props.class]">
<component :is="name" v-bind="{ ...componentProps, ...componentEvents }">
<template v-for="slot in Object.keys(slots || {})" :key="slot" #[slot]>
<ContentSlot :name="slot" unwrap="p">

14
docs/app/components/content/ComponentExample.vue
View File

@@ -114,8 +114,8 @@ const optionsValues = ref(props.options?.reduce((acc, option) => {
<template>
<div class="my-5">
<div v-if="preview">
<div class="border border-[--ui-color-neutral-200] dark:border-[--ui-color-neutral-700] relative z-[1]" :class="[{ 'border-b-0 rounded-t-[calc(var(--ui-radius)*1.5)]': props.source, 'rounded-[calc(var(--ui-radius)*1.5)]': !props.source }]">
<div v-if="props.options?.length || !!slots.options" class="flex gap-4 p-4 border-b border-[--ui-color-neutral-200] dark:border-[--ui-color-neutral-700]">
<div class="border border-[var(--ui-color-neutral-200)] dark:border-[var(--ui-color-neutral-700)] relative z-[1]" :class="[{ 'border-b-0 rounded-t-[calc(var(--ui-radius)*1.5)]': props.source, 'rounded-[calc(var(--ui-radius)*1.5)]': !props.source }]">
<div v-if="props.options?.length || !!slots.options" class="flex gap-4 p-4 border-b border-[var(--ui-color-neutral-200)] dark:border-[var(--ui-color-neutral-700)]">
<slot name="options" />
<UFormField
@@ -124,10 +124,10 @@ const optionsValues = ref(props.options?.reduce((acc, option) => {
:label="option.label"
:name="option.name"
size="sm"
class="inline-flex ring ring-[--ui-border-accented] rounded-[--ui-radius]"
class="inline-flex ring ring-[var(--ui-border-accented)] rounded-[var(--ui-radius)]"
:ui="{
wrapper: 'bg-[--ui-bg-elevated]/50 rounded-l-[--ui-radius] flex border-r border-[--ui-border-accented]',
label: 'text-[--ui-text-muted] px-2 py-1.5',
wrapper: 'bg-[var(--ui-bg-elevated)]/50 rounded-l-[var(--ui-radius)] flex border-r border-[var(--ui-border-accented)]',
label: 'text-[var(--ui-text-muted)] px-2 py-1.5',
container: 'mt-0'
}"
>
@@ -139,7 +139,7 @@ const optionsValues = ref(props.options?.reduce((acc, option) => {
:value-key="option.name.toLowerCase().endsWith('color') ? 'value' : undefined"
color="neutral"
variant="soft"
class="rounded-[--ui-radius] rounded-l-none min-w-12"
class="rounded-[var(--ui-radius)] rounded-l-none min-w-12"
:multiple="option.multiple"
:class="[option.name.toLowerCase().endsWith('color') && 'pl-6']"
:ui="{ itemLeadingChip: 'size-2' }"
@@ -160,7 +160,7 @@ const optionsValues = ref(props.options?.reduce((acc, option) => {
:model-value="get(optionsValues, option.name)"
color="neutral"
variant="soft"
:ui="{ base: 'rounded-[--ui-radius] rounded-l-none min-w-12' }"
:ui="{ base: 'rounded-[var(--ui-radius)] rounded-l-none min-w-12' }"
@update:model-value="set(optionsValues, option.name, $event)"
/>
</UFormField>

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

@@ -77,7 +77,7 @@ const metaProps: ComputedRef<ComponentMeta['props']> = computed(() => {
<ProseTd>
<HighlightInlineType v-if="prop.type" :type="prop.type" />
<MDC v-if="prop.description" :value="prop.description" class="text-[--ui-text-toned] mt-1" />
<MDC v-if="prop.description" :value="prop.description" class="text-[var(--ui-text-toned)] mt-1" />
<ComponentPropsSchema v-if="prop.schema" :prop="prop" :ignore="ignore" />
</ProseTd>

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

@@ -40,7 +40,7 @@ const schemaProps = computed(() => {
<ProseLi v-for="schemaProp in schemaProps" :key="schemaProp.name">
<HighlightInlineType :type="`${schemaProp.name}${schemaProp.required === false ? '?' : ''}: ${schemaProp.type}`" />
<MDC v-if="schemaProp.description" :value="schemaProp.description" class="text-[--ui-text-muted] my-1" />
<MDC v-if="schemaProp.description" :value="schemaProp.description" class="text-[var(--ui-text-muted)] my-1" />
</ProseLi>
</ProseUl>
</Collapsible>

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

@@ -31,7 +31,7 @@ const meta = await fetchComponentMeta(name as any)
<ProseTd>
<HighlightInlineType v-if="slot.type" :type="slot.type" />
<MDC v-if="slot.description" :value="slot.description" class="text-[--ui-text-toned] mt-1" />
<MDC v-if="slot.description" :value="slot.description" class="text-[var(--ui-text-toned)] mt-1" />
</ProseTd>
</ProseTr>
</ProseTbody>

4
docs/app/components/content/Placeholder.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="relative overflow-hidden rounded-[--ui-radius] border border-dashed border-[--ui-border-accented] opacity-75 px-4 flex items-center justify-center">
<svg class="absolute inset-0 h-full w-full stroke-[--ui-border-inverted]/10" fill="none">
<div class="relative overflow-hidden rounded-[var(--ui-radius)] border border-dashed border-[var(--ui-border-accented)] opacity-75 px-4 flex items-center justify-center">
<svg class="absolute inset-0 h-full w-full stroke-[var(--ui-border-inverted)]/10" fill="none">
<defs>
<pattern
id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"

2
docs/app/components/content/examples/accordion/AccordionContentSlotExample.vue
View File

@@ -18,7 +18,7 @@ const items = [
<template>
<UAccordion :items="items">
<template #content="{ item }">
<p class="pb-3.5 text-sm text-[--ui-text-muted]">
<p class="pb-3.5 text-sm text-[var(--ui-text-muted)]">
This is the {{ item.label }} panel.
</p>
</template>

2
docs/app/components/content/examples/accordion/AccordionCustomSlotExample.vue
View File

@@ -22,7 +22,7 @@ const items = [
<template>
<UAccordion :items="items">
<template #colors="{ item }">
<p class="text-sm pb-3.5 text-[--ui-primary]">
<p class="text-sm pb-3.5 text-[var(--ui-primary)]">
{{ item.content }}
</p>
</template>

6
docs/app/components/content/examples/avatar-group/AvatarGroupLinkExample.vue
View File

@@ -3,7 +3,7 @@
<ULink
to="https://github.com/benjamincanac"
target="_blank"
class="hover:ring-[--ui-primary] transition"
class="hover:ring-[var(--ui-primary)] transition"
raw
>
<UAvatar
@@ -15,7 +15,7 @@
<ULink
to="https://github.com/romhml"
target="_blank"
class="hover:ring-[--ui-primary] transition"
class="hover:ring-[var(--ui-primary)] transition"
raw
>
<UAvatar
@@ -27,7 +27,7 @@
<ULink
to="https://github.com/noook"
target="_blank"
class="hover:ring-[--ui-primary] transition"
class="hover:ring-[var(--ui-primary)] transition"
raw
>
<UAvatar

2
docs/app/components/content/examples/breadcrumb/BreadcrumbSeparatorSlotExample.vue
View File

@@ -14,7 +14,7 @@ const items = [{
<template>
<UBreadcrumb :items="items">
<template #separator>
<span class="mx-2 text-[--ui-text-muted]">/</span>
<span class="mx-2 text-[var(--ui-text-muted)]">/</span>
</template>
</UBreadcrumb>
</template>

4
docs/app/components/content/examples/context-menu/ContextMenuCustomSlotExample.vue
View File

@@ -13,7 +13,7 @@ const items = [{
<template>
<UContextMenu :items="items" class="w-48">
<div class="flex items-center justify-center rounded-md border border-dashed border-[--ui-border-accented] text-sm aspect-video w-72">
<div class="flex items-center justify-center rounded-md border border-dashed border-[var(--ui-border-accented)] text-sm aspect-video w-72">
Right click here
</div>
@@ -22,7 +22,7 @@ const items = [{
</template>
<template #refresh-trailing>
<UIcon v-if="loading" name="i-heroicons-arrow-path-20-solid" class="shrink-0 size-5 text-[--ui-primary] animate-spin" />
<UIcon v-if="loading" name="i-heroicons-arrow-path-20-solid" class="shrink-0 size-5 text-[var(--ui-primary)] animate-spin" />
</template>
</UContextMenu>
</template>

2
docs/app/components/content/examples/drawer/DrawerCommandPaletteExample.vue
View File

@@ -32,7 +32,7 @@ const groups = computed(() => [{
:loading="status === 'pending'"
:groups="groups"
placeholder="Search users..."
class="h-96 border-t border-[--ui-border]"
class="h-96 border-t border-[var(--ui-border)]"
/>
</template>
</UDrawer>

2
docs/app/components/content/examples/dropdown-menu/DropdownMenuCustomSlotExample.vue
View File

@@ -17,7 +17,7 @@ const items = [{
<UButton label="Open" color="neutral" variant="outline" icon="i-heroicons-bars-3" />
<template #profile-trailing>
<UIcon name="i-heroicons-check-badge" class="shrink-0 size-5 text-[--ui-primary]" />
<UIcon name="i-heroicons-check-badge" class="shrink-0 size-5 text-[var(--ui-primary)]" />
</template>
</UDropdownMenu>
</template>

2
docs/app/components/content/examples/input-menu/InputMenuFilterFieldsExample.vue
View File

@@ -33,7 +33,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
<template #item-label="{ item }">
{{ item.label }}
<span class="text-[--ui-text-muted]">
<span class="text-[var(--ui-text-muted)]">
{{ item.email }}
</span>
</template>

2
docs/app/components/content/examples/select-menu/SelectMenuFilterFieldsExample.vue
View File

@@ -33,7 +33,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
<template #item-label="{ item }">
{{ item.label }}
<span class="text-[--ui-text-muted]">
<span class="text-[var(--ui-text-muted)]">
{{ item.email }}
</span>
</template>

4
docs/app/components/content/examples/tabs/TabsCustomSlotExample.vue
View File

@@ -26,7 +26,7 @@ const state = reactive({
<template>
<UTabs :items="items" variant="link" class="gap-4 w-full" :ui="{ trigger: 'flex-1' }">
<template #account="{ item }">
<p class="text-[--ui-text-muted] mb-4">
<p class="text-[var(--ui-text-muted)] mb-4">
{{ item.description }}
</p>
@@ -43,7 +43,7 @@ const state = reactive({
</template>
<template #password="{ item }">
<p class="text-[--ui-text-muted] mb-4">
<p class="text-[var(--ui-text-muted)] mb-4">
{{ item.description }}
</p>

6
docs/app/components/content/examples/toaster/ToasterDurationExample.vue
View File

@@ -7,10 +7,10 @@ const appConfig = useAppConfig()
<UFormField
label="toaster.duration"
size="sm"
class="inline-flex ring ring-[--ui-border-accented] rounded"
class="inline-flex ring ring-[var(--ui-border-accented)] rounded"
:ui="{
wrapper: 'bg-[--ui-bg-elevated]/50 rounded-l flex border-r border-[--ui-border-accented]',
label: 'text-[--ui-text-muted] px-2 py-1.5',
wrapper: 'bg-[var(--ui-bg-elevated)]/50 rounded-l flex border-r border-[var(--ui-border-accented)]',
label: 'text-[var(--ui-text-muted)] px-2 py-1.5',
container: 'mt-0'
}"
>

6
docs/app/components/content/examples/toaster/ToasterExpandExample.vue
View File

@@ -7,10 +7,10 @@ const appConfig = useAppConfig()
<UFormField
label="toaster.expand"
size="sm"
class="inline-flex ring ring-[--ui-border-accented] rounded"
class="inline-flex ring ring-[var(--ui-border-accented)] rounded"
:ui="{
wrapper: 'bg-[--ui-bg-elevated]/50 rounded-l flex border-r border-[--ui-border-accented]',
label: 'text-[--ui-text-muted] px-2 py-1.5',
wrapper: 'bg-[var(--ui-bg-elevated)]/50 rounded-l flex border-r border-[var(--ui-border-accented)]',
label: 'text-[var(--ui-text-muted)] px-2 py-1.5',
container: 'mt-0'
}"
>

6
docs/app/components/content/examples/toaster/ToasterPositionExample.vue
View File

@@ -10,10 +10,10 @@ const appConfig = useAppConfig()
<UFormField
label="toaster.position"
size="sm"
class="inline-flex ring ring-[--ui-border-accented] rounded"
class="inline-flex ring ring-[var(--ui-border-accented)] rounded"
:ui="{
wrapper: 'bg-[--ui-bg-elevated]/50 rounded-l flex border-r border-[--ui-border-accented]',
label: 'text-[--ui-text-muted] px-2 py-1.5',
wrapper: 'bg-[var(--ui-bg-elevated)]/50 rounded-l flex border-r border-[var(--ui-border-accented)]',
label: 'text-[var(--ui-text-muted)] px-2 py-1.5',
container: 'mt-0'
}"
>

2
docs/app/components/theme-picker/ThemePicker.vue
View File

@@ -7,7 +7,7 @@
:variant="open ? 'soft' : 'ghost'"
square
aria-label="Color picker"
:ui="{ leadingIcon: 'text-[--ui-primary]' }"
:ui="{ leadingIcon: 'text-[var(--ui-primary)]' }"
/>
</template>

4
docs/app/components/theme-picker/ThemePickerButton.vue
View File

@@ -5,13 +5,13 @@
:icon="icon"
:label="label"
:variant="selected ? 'soft' : 'outline'"
class="capitalize ring-[--ui-border] rounded-[--ui-radius] text-[11px]"
class="capitalize ring-[var(--ui-border)] rounded-[var(--ui-radius)] text-[11px]"
@click.stop.prevent="$emit('select')"
>
<template v-if="chip" #leading>
<span
class="inline-block w-2 h-2 rounded-full"
:class="`bg-[--color-light] dark:bg-[--color-dark]`"
:class="`bg-[var(--color-light)] dark:bg-[var(--color-dark)]`"
:style="{
'--color-light': `var(--color-${chip}-500)`,
'--color-dark': `var(--color-${chip}-400)`

12
docs/content/1.getting-started/3.theme.md
View File

@@ -110,7 +110,7 @@ export default defineAppConfig({
```
::note
Try the :prose-icon{name="i-heroicons-swatch" class="text-[--ui-primary]"} theme picker in the header above to change `primary` and `neutral` colors.
Try the :prose-icon{name="i-heroicons-swatch" class="text-[var(--ui-primary)]"} theme picker in the header above to change `primary` and `neutral` colors.
::
These colors are used to style the components but also to generate the `color` variants:
@@ -211,7 +211,7 @@ Nuxt UI automatically creates a CSS variable for each color alias you define whi
::
::note
You can use these variables in classes like `text-[--ui-primary]`, it will automatically adapt to the current color scheme.
You can use these variables in classes like `text-[var(--ui-primary)]`, it will automatically adapt to the current color scheme.
::
::tip
@@ -308,7 +308,7 @@ Nuxt UI automatically applies a text and background color on the `<body>` elemen
```css
body {
@apply antialiased text-[--ui-text] bg-[--ui-bg];
@apply antialiased text-[var(--ui-text)] bg-[var(--ui-bg)];
}
```
::
@@ -345,7 +345,7 @@ Nuxt UI uses a global `--ui-radius` CSS variable for consistent border rounding.
```
::note
Try the :prose-icon{name="i-heroicons-swatch" class="text-[--ui-primary]"} theme picker in the header above to change the base radius value.
Try the :prose-icon{name="i-heroicons-swatch" class="text-[var(--ui-primary)]"} theme picker in the header above to change the base radius value.
::
::tip
@@ -376,7 +376,7 @@ Components in Nuxt UI can have multiple `slots`, each representing a distinct HT
```ts [src/theme/card.ts]
export default {
slots: {
root: 'bg-[--ui-bg] ring ring-[--ui-border] divide-y divide-[--ui-border] rounded-[calc(var(--ui-radius)*2)] shadow',
root: 'bg-[var(--ui-bg)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] rounded-[calc(var(--ui-radius)*2)] shadow',
header: 'p-4 sm:px-6',
body: 'p-4 sm:p-6',
footer: 'p-4 sm:px-6'
@@ -435,7 +435,7 @@ Nuxt UI components use `variants` to change the `slots` styles based on props. H
```ts [src/theme/avatar.ts]
export default {
slots: {
root: 'inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated]',
root: 'inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)]',
image: 'h-full w-full rounded-[inherit] object-cover'
},
variants: {

2
docs/content/3.components/button.md
View File

@@ -214,7 +214,7 @@ props:
color: neutral
variant: outline
ui:
leadingIcon: 'text-[--ui-primary]'
leadingIcon: 'text-[var(--ui-primary)]'
slots:
default: |

12
docs/content/3.components/context-menu.md
View File

@@ -90,12 +90,12 @@ props:
slots:
default: |
<div class="flex items-center justify-center rounded-md border border-dashed border-[--ui-border-accented] text-sm aspect-video w-72">
<div class="flex items-center justify-center rounded-md border border-dashed border-[var(--ui-border-accented)] text-sm aspect-video w-72">
Right click here
</div>
---
:div{class="flex items-center justify-center rounded-md border border-dashed border-[--ui-border-accented] text-sm aspect-video w-72"}[Right click here]
:div{class="flex items-center justify-center rounded-md border border-dashed border-[var(--ui-border-accented)] text-sm aspect-video w-72"}[Right click here]
::
::note
@@ -131,12 +131,12 @@ props:
slots:
default: |
<div class="flex items-center justify-center rounded-md border border-dashed border-[--ui-border-accented] text-sm aspect-video w-72">
<div class="flex items-center justify-center rounded-md border border-dashed border-[var(--ui-border-accented)] text-sm aspect-video w-72">
Right click here
</div>
---
:div{class="flex items-center justify-center rounded-md border border-dashed border-[--ui-border-accented] text-sm aspect-video w-72"}[Right click here]
:div{class="flex items-center justify-center rounded-md border border-dashed border-[var(--ui-border-accented)] text-sm aspect-video w-72"}[Right click here]
::
### Disabled
@@ -164,12 +164,12 @@ props:
slots:
default: |
<div class="flex items-center justify-center rounded-md border border-dashed border-[--ui-border-accented] text-sm aspect-video w-72">
<div class="flex items-center justify-center rounded-md border border-dashed border-[var(--ui-border-accented)] text-sm aspect-video w-72">
Right click here
</div>
---
:div{class="flex items-center justify-center rounded-md border border-dashed border-[--ui-border-accented] text-sm aspect-video w-72"}[Right click here]
:div{class="flex items-center justify-center rounded-md border border-dashed border-[var(--ui-border-accented)] text-sm aspect-video w-72"}[Right click here]
::
## Examples

4
docs/content/3.components/drawer.md
View File

@@ -224,7 +224,7 @@ Make sure to add the `vaul-drawer-wrapper` directive to a parent element of your
```vue [app.vue]
<template>
<UApp>
<div class="bg-[--ui-bg]" vaul-drawer-wrapper>
<div class="bg-[var(--ui-bg)]" vaul-drawer-wrapper>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
@@ -238,7 +238,7 @@ export default defineNuxtConfig({
app: {
rootAttrs: {
'vaul-drawer-wrapper': '',
'class': 'bg-[--ui-bg]'
'class': 'bg-[var(--ui-bg)]'
}
}
})

12
docs/content/3.components/form.md
View File

@@ -171,10 +171,10 @@ When accessing the component via a template ref, you can use the following:
| Name | Type |
| ---- | ---- |
| `submit()`{lang="ts-type"} | `Promise<void>`{lang="ts-type"} <br> <div class="text-[--ui-text-toned] mt-1"><p>Triggers form submission.</p> |
| `validate(path?: string \| string[], opts: { silent?: boolean })`{lang="ts-type"} | `Promise<T>`{lang="ts-type"} <br> <div class="text-[--ui-text-toned] mt-1"><p>Triggers form validation. Will raise any errors unless `opts.silent` is set to true.</p> |
| `clear(path?: string)`{lang="ts-type"} | `void` <br> <div class="text-[--ui-text-toned] mt-1"><p>Clears form errors associated with a specific path. If no path is provided, clears all form errors.</p> |
| `getErrors(path?: string)`{lang="ts-type"} | `FormError[]`{lang="ts-type"} <br> <div class="text-[--ui-text-toned] mt-1"><p>Retrieves form errors associated with a specific path. If no path is provided, returns all form errors.</p></div> |
| `setErrors(errors: FormError[], path?: string)`{lang="ts-type"} | `void` <br> <div class="text-[--ui-text-toned] mt-1"><p>Sets form errors for a given path. If no path is provided, overrides all errors.</p> |
| `errors`{lang="ts-type"} | `Ref<FormError[]>`{lang="ts-type"} <br> <div class="text-[--ui-text-toned] mt-1"><p>A reference to the array containing validation errors. Use this to access or manipulate the error information.</p> |
| `submit()`{lang="ts-type"} | `Promise<void>`{lang="ts-type"} <br> <div class="text-[var(--ui-text-toned)] mt-1"><p>Triggers form submission.</p> |
| `validate(path?: string \| string[], opts: { silent?: boolean })`{lang="ts-type"} | `Promise<T>`{lang="ts-type"} <br> <div class="text-[var(--ui-text-toned)] mt-1"><p>Triggers form validation. Will raise any errors unless `opts.silent` is set to true.</p> |
| `clear(path?: string)`{lang="ts-type"} | `void` <br> <div class="text-[var(--ui-text-toned)] mt-1"><p>Clears form errors associated with a specific path. If no path is provided, clears all form errors.</p> |
| `getErrors(path?: string)`{lang="ts-type"} | `FormError[]`{lang="ts-type"} <br> <div class="text-[var(--ui-text-toned)] mt-1"><p>Retrieves form errors associated with a specific path. If no path is provided, returns all form errors.</p></div> |
| `setErrors(errors: FormError[], path?: string)`{lang="ts-type"} | `void` <br> <div class="text-[var(--ui-text-toned)] mt-1"><p>Sets form errors for a given path. If no path is provided, overrides all errors.</p> |
| `errors`{lang="ts-type"} | `Ref<FormError[]>`{lang="ts-type"} <br> <div class="text-[var(--ui-text-toned)] mt-1"><p>A reference to the array containing validation errors. Use this to access or manipulate the error information.</p> |
| `disabled`{lang="ts-type"} | `Ref<boolean>`{lang="ts-type"} |

2
docs/content/3.components/link.md
View File

@@ -65,7 +65,7 @@ props:
raw: true
to: /components/link
activeClass: 'font-bold'
inactiveClass: 'text-[--ui-text-muted]'
inactiveClass: 'text-[var(--ui-text-muted)]'
slots:
default: Link
---

2
docs/content/3.components/navigation-menu.md
View File

@@ -203,7 +203,7 @@ props:
badge: 3.8k
to: https://github.com/nuxt/ui
target: _blank
class: 'data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-l border-[--ui-border]'
class: 'data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-l border-[var(--ui-border)]'
---
::

2
docs/nuxt.config.ts
View File

@@ -8,7 +8,7 @@ export default defineNuxtConfig({
app: {
rootAttrs: {
'vaul-drawer-wrapper': '',
'class': 'bg-[--ui-bg]'
'class': 'bg-[var(--ui-bg)]'
}
},

4
playground/app/app.vue
View File

@@ -66,8 +66,8 @@ defineShortcuts({
<template>
<UApp :toaster="appConfig.toaster">
<div class="h-screen w-screen overflow-hidden flex min-h-0 bg-[--ui-bg]" vaul-drawer-wrapper>
<UNavigationMenu :items="items" orientation="vertical" class="border-r border-[--ui-border] overflow-y-auto w-48 p-4" />
<div class="h-screen w-screen overflow-hidden flex min-h-0 bg-[var(--ui-bg)]" vaul-drawer-wrapper>
<UNavigationMenu :items="items" orientation="vertical" class="border-r border-[var(--ui-border)] overflow-y-auto w-48 p-4" />
<div class="flex-1 flex flex-col items-center justify-around overflow-y-auto w-full py-12 px-4">
<NuxtPage />

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

@@ -1,6 +1,6 @@
<template>
<div class="relative overflow-hidden rounded-[--ui-radius] border border-dashed border-[--ui-border-accented] opacity-75 px-4 flex items-center justify-center">
<svg class="absolute inset-0 h-full w-full stroke-[--ui-border-inverted]/10" fill="none">
<div class="relative overflow-hidden rounded-[var(--ui-radius)] border border-dashed border-[var(--ui-border-accented)] opacity-75 px-4 flex items-center justify-center">
<svg class="absolute inset-0 h-full w-full stroke-[var(--ui-border-inverted)]/10" fill="none">
<defs>
<pattern
id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"

4
playground/app/pages/components/accordion.vue
View File

@@ -32,13 +32,13 @@ const items = [{
<UCard :ui="{ body: 'p-0 sm:p-0' }">
<UAccordion :items="items" class="w-96" :ui="{ trigger: 'px-3.5', body: 'px-3.5' }">
<template #body="{ item }">
<p class="text-[--ui-text-muted]">
<p class="text-[var(--ui-text-muted)]">
{{ item.content }}
</p>
</template>
<template #custom-body="{ item }">
<p class="text-[--ui-text-muted]">
<p class="text-[var(--ui-text-muted)]">
Custom: {{ item.content }}
</p>
</template>

2
playground/app/pages/components/command-palette.vue
View File

@@ -125,7 +125,7 @@ defineShortcuts({
<UButton label="Open drawer" color="neutral" variant="outline" />
<template #content>
<ReuseTemplate class="border-t border-[--ui-border]" />
<ReuseTemplate class="border-t border-[var(--ui-border)]" />
</template>
</UDrawer>

2
playground/app/pages/components/context-menu.vue
View File

@@ -88,7 +88,7 @@ defineShortcuts(extractShortcuts(items))
</div>
<UContextMenu :items="items" class="min-w-48" :size="size">
<div class="flex items-center justify-center rounded-md border border-dashed border-[--ui-border-accented] text-sm aspect-video w-72">
<div class="flex items-center justify-center rounded-md border border-dashed border-[var(--ui-border-accented)] text-sm aspect-video w-72">
Right click here
</div>
</UContextMenu>

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

@@ -130,7 +130,7 @@ defineShortcuts(extractShortcuts(items))
<UButton label="Open" color="neutral" variant="outline" icon="i-heroicons-bars-3" />
<template #custom-trailing>
<UIcon name="i-heroicons-check-badge" class="shrink-0 size-5 text-[--ui-primary]" />
<UIcon name="i-heroicons-check-badge" class="shrink-0 size-5 text-[var(--ui-primary)]" />
</template>
</UDropdownMenu>
</div>

8
playground/app/pages/components/link.vue
View File

@@ -8,7 +8,7 @@
<ULink active>
Button active
</ULink>
<ULink active class="font-medium" active-class="text-[--ui-text-highlighted]">
<ULink active class="font-medium" active-class="text-[var(--ui-text-highlighted)]">
Button active with class
</ULink>
<ULink active disabled>
@@ -18,7 +18,7 @@
<ULink>
Button inactive
</ULink>
<ULink class="font-medium" inactive-class="hover:text-[--ui-primary]">
<ULink class="font-medium" inactive-class="hover:text-[var(--ui-primary)]">
Button inactive with class
</ULink>
<ULink disabled>
@@ -34,7 +34,7 @@
<ULink to="/components/link">
Link active
</ULink>
<ULink to="/components/link" class="font-medium" active-class="text-[--ui-text-highlighted]">
<ULink to="/components/link" class="font-medium" active-class="text-[var(--ui-text-highlighted)]">
Link active with class
</ULink>
<ULink to="/components/link" disabled>
@@ -44,7 +44,7 @@
<ULink to="/components/button">
Link inactive
</ULink>
<ULink to="/components/button" class="font-medium" inactive-class="hover:text-[--ui-primary]">
<ULink to="/components/button" class="font-medium" inactive-class="hover:text-[var(--ui-primary)]">
Link inactive with class
</ULink>
<ULink to="/components/button" disabled>

2
playground/app/pages/components/navigation-menu.vue
View File

@@ -99,7 +99,7 @@ const items = [
:orientation="orientation"
:highlight="highlight"
:highlight-color="highlightColor"
:class="highlight && 'data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-l border-[--ui-border]'"
:class="highlight && 'data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-l border-[var(--ui-border)]'"
/>
</div>
</template>

2
playground/app/pages/components/separator.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col gap-4">
<div>
<p class="font-semibold text-[--ui-text-highlighted]">
<p class="font-semibold text-[var(--ui-text-highlighted)]">
Nuxt UI
</p>
<p>An open-source UI component library.</p>

2
playground/app/pages/components/tabs.vue
View File

@@ -57,7 +57,7 @@ const items = [{
class="w-96"
>
<template #custom="{ item }">
<span class="text-[--ui-text-muted]">Custom: {{ item.content }}</span>
<span class="text-[var(--ui-text-muted)]">Custom: {{ item.content }}</span>
</template>
</UTabs>
</div>

2
src/runtime/index.css
View File

@@ -6,7 +6,7 @@
@layer base {
body {
@apply antialiased text-[--ui-text] bg-[--ui-bg];
@apply antialiased text-[var(--ui-text)] bg-[var(--ui-bg)];
}
:root {

4
src/theme/accordion.ts
View File

@@ -1,9 +1,9 @@
export default {
slots: {
root: 'w-full',
item: 'border-b border-[--ui-border] last:border-b-0',
item: 'border-b border-[var(--ui-border)] last:border-b-0',
header: 'flex',
trigger: 'group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0',
trigger: 'group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0',
content: 'data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none',
body: 'text-sm pb-3.5',
leadingIcon: 'shrink-0 size-5',

16
src/theme/alert.ts
View File

@@ -38,49 +38,49 @@ export default (options: Required<ModuleOptions>) => ({
color,
variant: 'solid',
class: {
root: `bg-[--ui-${color}] text-[--ui-bg]`
root: `bg-[var(--ui-${color})] text-[var(--ui-bg)]`
}
})), ...(options.theme.colors || []).map((color: string) => ({
color,
variant: 'outline',
class: {
root: `text-[--ui-${color}] ring ring-inset ring-[--ui-${color}]/25`
root: `text-[var(--ui-${color})] ring ring-inset ring-[var(--ui-${color})]/25`
}
})), ...(options.theme.colors || []).map((color: string) => ({
color,
variant: 'soft',
class: {
root: `bg-[--ui-${color}]/10 text-[--ui-${color}]`
root: `bg-[var(--ui-${color})]/10 text-[var(--ui-${color})]`
}
})), ...(options.theme.colors || []).map((color: string) => ({
color,
variant: 'subtle',
class: {
root: `bg-[--ui-${color}]/10 text-[--ui-${color}] ring ring-inset ring-[--ui-${color}]/25`
root: `bg-[var(--ui-${color})]/10 text-[var(--ui-${color})] ring ring-inset ring-[var(--ui-${color})]/25`
}
})), {
color: 'neutral',
variant: 'solid',
class: {
root: 'text-[--ui-bg] bg-[--ui-bg-inverted]'
root: 'text-[var(--ui-bg)] bg-[var(--ui-bg-inverted)]'
}
}, {
color: 'neutral',
variant: 'outline',
class: {
root: 'text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border]'
root: 'text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border)]'
}
}, {
color: 'neutral',
variant: 'soft',
class: {
root: 'text-[--ui-text-highlighted] bg-[--ui-bg-elevated]/50'
root: 'text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)]/50'
}
}, {
color: 'neutral',
variant: 'subtle',
class: {
root: 'text-[--ui-text-highlighted] bg-[--ui-bg-elevated]/50 ring ring-inset ring-[--ui-border-accented]'
root: 'text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)]/50 ring ring-inset ring-[var(--ui-border-accented)]'
}
}],
defaultVariants: {

2
src/theme/avatar-group.ts
View File

@@ -1,7 +1,7 @@
export default {
slots: {
root: 'inline-flex flex-row-reverse justify-end',
base: 'relative rounded-full ring-[--ui-bg] first:me-0'
base: 'relative rounded-full ring-[var(--ui-bg)] first:me-0'
},
variants: {
size: {

6
src/theme/avatar.ts
View File

@@ -1,9 +1,9 @@
export default {
slots: {
root: 'inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated]',
root: 'inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)]',
image: 'h-full w-full rounded-[inherit] object-cover',
fallback: 'font-medium leading-none text-[--ui-text-muted] truncate',
icon: 'text-[--ui-text-muted] shrink-0'
fallback: 'font-medium leading-none text-[var(--ui-text-muted)] truncate',
icon: 'text-[var(--ui-text-muted)] shrink-0'
},
variants: {
size: {

16
src/theme/badge.ts
View File

@@ -22,35 +22,35 @@ export default (options: Required<ModuleOptions>) => ({
compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
color,
variant: 'solid',
class: `bg-[--ui-${color}] text-[--ui-bg]`
class: `bg-[var(--ui-${color})] text-[var(--ui-bg)]`
})), ...(options.theme.colors || []).map((color: string) => ({
color,
variant: 'outline',
class: `text-[--ui-${color}] ring ring-inset ring-[--ui-${color}]/50`
class: `text-[var(--ui-${color})] ring ring-inset ring-[var(--ui-${color})]/50`
})), ...(options.theme.colors || []).map((color: string) => ({
color,
variant: 'soft',
class: `bg-[--ui-${color}]/10 text-[--ui-${color}]`
class: `bg-[var(--ui-${color})]/10 text-[var(--ui-${color})]`
})), ...(options.theme.colors || []).map((color: string) => ({
color,
variant: 'subtle',
class: `bg-[--ui-${color}]/10 text-[--ui-${color}] ring ring-inset ring-[--ui-${color}]/25`
class: `bg-[var(--ui-${color})]/10 text-[var(--ui-${color})] ring ring-inset ring-[var(--ui-${color})]/25`
})), {
color: 'neutral',
variant: 'solid',
class: 'text-[--ui-bg] bg-[--ui-bg-inverted]'
class: 'text-[var(--ui-bg)] bg-[var(--ui-bg-inverted)]'
}, {
color: 'neutral',
variant: 'outline',
class: 'ring ring-inset ring-[--ui-border-accented] text-[--ui-text] bg-[--ui-bg]'
class: 'ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)]'
}, {
color: 'neutral',
variant: 'soft',
class: 'text-[--ui-text] bg-[--ui-bg-elevated]'
class: 'text-[var(--ui-text)] bg-[var(--ui-bg-elevated)]'
}, {
color: 'neutral',
variant: 'subtle',
class: 'ring ring-inset ring-[--ui-border-accented] text-[--ui-text] bg-[--ui-bg-elevated]'
class: 'ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg-elevated)]'
}],
defaultVariants: {
color: 'primary',

10
src/theme/breadcrumb.ts
View File

@@ -5,21 +5,21 @@ 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 focus-visible:outline-[--ui-primary]',
link: 'group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)]',
linkLeadingIcon: 'shrink-0 size-5',
linkLeadingAvatar: 'shrink-0',
linkLeadingAvatarSize: '2xs',
linkLabel: 'truncate',
separator: 'flex',
separatorIcon: 'shrink-0 size-5 text-[--ui-text-muted]'
separatorIcon: 'shrink-0 size-5 text-[var(--ui-text-muted)]'
},
variants: {
active: {
true: {
link: 'text-[--ui-primary] font-semibold'
link: 'text-[var(--ui-primary)] font-semibold'
},
false: {
link: 'text-[--ui-text-muted] font-medium'
link: 'text-[var(--ui-text-muted)] font-medium'
}
},
disabled: {
@@ -36,7 +36,7 @@ export default (options: Required<ModuleOptions>) => ({
active: false,
to: true,
class: {
link: ['hover:text-[--ui-text]', options.theme.transitions && 'transition-colors']
link: ['hover:text-[var(--ui-text)]', options.theme.transitions && 'transition-colors']
}
}]
})

24
src/theme/button.ts
View File

@@ -72,51 +72,51 @@ export default (options: Required<ModuleOptions>) => ({
compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
color,
variant: 'solid',
class: `text-[--ui-bg] bg-[--ui-${color}] hover:bg-[--ui-${color}]/75 disabled:bg-[--ui-${color}] aria-disabled:bg-[--ui-${color}] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-${color}]`
class: `text-[var(--ui-bg)] bg-[var(--ui-${color})] hover:bg-[var(--ui-${color})]/75 disabled:bg-[var(--ui-${color})] aria-disabled:bg-[var(--ui-${color})] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-${color})]`
})), ...(options.theme.colors || []).map((color: string) => ({
color,
variant: 'outline',
class: `ring ring-inset ring-[--ui-${color}]/50 text-[--ui-${color}] hover:bg-[--ui-${color}]/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-[--ui-${color}]`
class: `ring ring-inset ring-[var(--ui-${color})]/50 text-[var(--ui-${color})] hover:bg-[var(--ui-${color})]/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-[var(--ui-${color})]`
})), ...(options.theme.colors || []).map((color: string) => ({
color,
variant: 'soft',
class: `text-[--ui-${color}] bg-[--ui-${color}]/10 hover:bg-[--ui-${color}]/15 focus-visible:bg-[--ui-${color}]/15 disabled:bg-[--ui-${color}]/10 aria-disabled:bg-[--ui-${color}]/10`
class: `text-[var(--ui-${color})] bg-[var(--ui-${color})]/10 hover:bg-[var(--ui-${color})]/15 focus-visible:bg-[var(--ui-${color})]/15 disabled:bg-[var(--ui-${color})]/10 aria-disabled:bg-[var(--ui-${color})]/10`
})), ...(options.theme.colors || []).map((color: string) => ({
color,
variant: 'subtle',
class: `text-[--ui-${color}] ring ring-inset ring-[--ui-${color}]/25 bg-[--ui-${color}]/10 hover:bg-[--ui-${color}]/15 disabled:bg-[--ui-${color}]/10 aria-disabled:bg-[--ui-${color}]/10 focus-visible:ring-2 focus-visible:ring-[--ui-${color}]`
class: `text-[var(--ui-${color})] ring ring-inset ring-[var(--ui-${color})]/25 bg-[var(--ui-${color})]/10 hover:bg-[var(--ui-${color})]/15 disabled:bg-[var(--ui-${color})]/10 aria-disabled:bg-[var(--ui-${color})]/10 focus-visible:ring-2 focus-visible:ring-[var(--ui-${color})]`
})), ...(options.theme.colors || []).map((color: string) => ({
color,
variant: 'ghost',
class: `text-[--ui-${color}] hover:bg-[--ui-${color}]/10 focus-visible:bg-[--ui-${color}]/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent`
class: `text-[var(--ui-${color})] hover:bg-[var(--ui-${color})]/10 focus-visible:bg-[var(--ui-${color})]/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent`
})), ...(options.theme.colors || []).map((color: string) => ({
color,
variant: 'link',
class: `text-[--ui-${color}] hover:text-[--ui-${color}] disabled:text-[--ui-${color}] aria-disabled:text-[--ui-${color}] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-${color}]`
class: `text-[var(--ui-${color})] hover:text-[var(--ui-${color})] disabled:text-[var(--ui-${color})] aria-disabled:text-[var(--ui-${color})] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-${color})]`
})), {
color: 'neutral',
variant: 'solid',
class: 'text-[--ui-bg] bg-[--ui-bg-inverted] hover:bg-[--ui-bg-inverted]/80 disabled:bg-[--ui-bg-inverted] aria-disabled:bg-[--ui-bg-inverted] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-border-inverted]'
class: 'text-[var(--ui-bg)] bg-[var(--ui-bg-inverted)] hover:bg-[var(--ui-bg-inverted)]/80 disabled:bg-[var(--ui-bg-inverted)] aria-disabled:bg-[var(--ui-bg-inverted)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-border-inverted)]'
}, {
color: 'neutral',
variant: 'outline',
class: 'ring ring-inset ring-[--ui-border-accented] text-[--ui-text] bg-[--ui-bg] hover:bg-[--ui-bg-elevated] disabled:bg-[--ui-bg] aria-disabled:bg-[--ui-bg] focus-visible:ring-2 focus-visible:ring-[--ui-border-inverted]'
class: 'ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] hover:bg-[var(--ui-bg-elevated)] disabled:bg-[var(--ui-bg)] aria-disabled:bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)]'
}, {
color: 'neutral',
variant: 'soft',
class: 'text-[--ui-text] bg-[--ui-bg-elevated] hover:bg-[--ui-bg-accented]/75 focus-visible:bg-[--ui-bg-accented]/75 disabled:bg-[--ui-bg-elevated] aria-disabled:bg-[--ui-bg-elevated]'
class: 'text-[var(--ui-text)] bg-[var(--ui-bg-elevated)] hover:bg-[var(--ui-bg-accented)]/75 focus-visible:bg-[var(--ui-bg-accented)]/75 disabled:bg-[var(--ui-bg-elevated)] aria-disabled:bg-[var(--ui-bg-elevated)]'
}, {
color: 'neutral',
variant: 'subtle',
class: 'ring ring-inset ring-[--ui-border-accented] text-[--ui-text] bg-[--ui-bg-elevated] hover:bg-[--ui-bg-accented]/75 disabled:bg-[--ui-bg-elevated] aria-disabled:bg-[--ui-bg-elevated] focus-visible:ring-2 focus-visible:ring-[--ui-border-inverted]'
class: 'ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg-elevated)] hover:bg-[var(--ui-bg-accented)]/75 disabled:bg-[var(--ui-bg-elevated)] aria-disabled:bg-[var(--ui-bg-elevated)] focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)]'
}, {
color: 'neutral',
variant: 'ghost',
class: 'text-[--ui-text] hover:bg-[--ui-bg-elevated] focus-visible:bg-[--ui-bg-elevated] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent'
class: 'text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent'
}, {
color: 'neutral',
variant: 'link',
class: 'text-[--ui-text-muted] hover:text-[--ui-text] disabled:text-[--ui-text-muted] aria-disabled:text-[--ui-text-muted] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[--ui-border-inverted]'
class: 'text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)]'
}, {
size: 'xs',
square: true,

2
src/theme/card.ts
View File

@@ -1,6 +1,6 @@
export default {
slots: {
root: 'bg-[--ui-bg] ring ring-[--ui-border] divide-y divide-[--ui-border] rounded-[calc(var(--ui-radius)*2)] shadow',
root: 'bg-[var(--ui-bg)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] rounded-[calc(var(--ui-radius)*2)] shadow',
header: 'p-4 sm:px-6',
body: 'p-4 sm:p-6',
footer: 'p-4 sm:px-6'

4
src/theme/carousel.ts
View File

@@ -11,7 +11,7 @@ export default (options: Required<ModuleOptions>) => ({
prev: 'absolute rounded-full',
next: 'absolute rounded-full',
dots: 'absolute inset-x-0 -bottom-7 flex flex-wrap items-center justify-center gap-3',
dot: ['cursor-pointer size-3 bg-[--ui-border-accented] rounded-full', options.theme.transitions && 'transition']
dot: ['cursor-pointer size-3 bg-[var(--ui-border-accented)] rounded-full', options.theme.transitions && 'transition']
},
variants: {
orientation: {
@@ -30,7 +30,7 @@ export default (options: Required<ModuleOptions>) => ({
},
active: {
true: {
dot: 'bg-[--ui-border-inverted]'
dot: 'bg-[var(--ui-border-inverted)]'
}
}
},

16
src/theme/checkbox.ts
View File

@@ -3,17 +3,17 @@ import type { ModuleOptions } from '../module'
export default (options: Required<ModuleOptions>) => ({
slots: {
root: 'relative flex items-start',
base: 'shrink-0 flex items-center justify-center rounded-[--ui-radius] text-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2',
base: 'shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2',
container: 'flex items-center',
wrapper: 'ms-2',
icon: 'shrink-0 size-full',
label: 'block font-medium text-[--ui-text]',
description: 'text-[--ui-text-muted]'
label: 'block font-medium text-[var(--ui-text)]',
description: 'text-[var(--ui-text-muted)]'
},
variants: {
color: {
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, `focus-visible:outline-[--ui-${color}]`])),
neutral: 'focus-visible:outline-[--ui-border-inverted]'
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, `focus-visible:outline-[var(--ui-${color})]`])),
neutral: 'focus-visible:outline-[var(--ui-border-inverted)]'
},
size: {
xs: {
@@ -44,7 +44,7 @@ export default (options: Required<ModuleOptions>) => ({
},
required: {
true: {
label: 'after:content-[\'*\'] after:ms-0.5 after:text-[--ui-error]'
label: 'after:content-[\'*\'] after:ms-0.5 after:text-[var(--ui-error)]'
}
},
disabled: {
@@ -61,11 +61,11 @@ export default (options: Required<ModuleOptions>) => ({
compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
color,
checked: true,
class: `ring-2 ring-[--ui-${color}] bg-[--ui-${color}]`
class: `ring-2 ring-[var(--ui-${color})] bg-[var(--ui-${color})]`
})), {
color: 'neutral',
checked: true,
class: 'ring-2 ring-[--ui-border-inverted] bg-[--ui-bg-inverted]'
class: 'ring-2 ring-[var(--ui-border-inverted)] bg-[var(--ui-bg-inverted)]'
}],
defaultVariants: {
size: 'md',

6
src/theme/chip.ts
View File

@@ -3,12 +3,12 @@ import type { ModuleOptions } from '../module'
export default (options: Required<ModuleOptions>) => ({
slots: {
root: 'relative inline-flex items-center justify-center shrink-0',
base: 'rounded-full ring ring-[--ui-bg] flex items-center justify-center text-[--ui-bg] font-medium whitespace-nowrap'
base: 'rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap'
},
variants: {
color: {
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, `bg-[--ui-${color}]`])),
neutral: 'bg-[--ui-text-muted]'
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, `bg-[var(--ui-${color})]`])),
neutral: 'bg-[var(--ui-text-muted)]'
},
size: {
'3xs': 'h-[4px] min-w-[4px] text-[4px]',

18
src/theme/command-palette.ts
View File

@@ -2,28 +2,28 @@ import type { ModuleOptions } from '../module'
export default (options: Required<ModuleOptions>) => ({
slots: {
root: 'flex flex-col min-h-0 min-w-0 divide-y divide-[--ui-border]',
root: 'flex flex-col min-h-0 min-w-0 divide-y divide-[var(--ui-border)]',
input: '[&>input]:h-12',
close: '',
content: 'relative overflow-hidden',
viewport: 'divide-y divide-[--ui-border] scroll-py-1',
viewport: 'divide-y divide-[var(--ui-border)] scroll-py-1',
group: 'p-1 isolate',
empty: 'py-6 text-center text-sm',
label: 'px-2 py-1.5 text-xs font-semibold text-[--ui-text-highlighted]',
item: ['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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50', options.theme.transitions && 'transition-colors before:transition-colors'],
itemLeadingIcon: ['shrink-0 size-5 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text]', options.theme.transitions && 'transition-colors'],
label: 'px-2 py-1.5 text-xs font-semibold text-[var(--ui-text-highlighted)]',
item: ['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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50', options.theme.transitions && 'transition-colors before:transition-colors'],
itemLeadingIcon: ['shrink-0 size-5 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)]', options.theme.transitions && 'transition-colors'],
itemLeadingAvatar: 'shrink-0',
itemLeadingAvatarSize: '2xs',
itemLeadingChip: 'shrink-0 size-5',
itemLeadingChipSize: 'md',
itemTrailing: 'ms-auto inline-flex gap-1.5 items-center',
itemTrailingIcon: 'shrink-0 size-5',
itemTrailingHighlightedIcon: 'shrink-0 size-5 text-[--ui-text-dimmed] hidden group-data-highlighted:inline-flex',
itemTrailingHighlightedIcon: 'shrink-0 size-5 text-[var(--ui-text-dimmed)] hidden group-data-highlighted:inline-flex',
itemTrailingKbds: 'hidden lg:inline-flex items-center shrink-0 gap-0.5',
itemTrailingKbdsSize: 'md',
itemLabel: 'truncate space-x-1',
itemLabelBase: 'text-[--ui-text-highlighted] [&>mark]:text-[--ui-bg] [&>mark]:bg-[--ui-primary]',
itemLabelPrefix: 'text-[--ui-text]',
itemLabelSuffix: 'text-[--ui-text-dimmed] [&>mark]:text-[--ui-bg] [&>mark]:bg-[--ui-primary]'
itemLabelBase: 'text-[var(--ui-text-highlighted)] [&>mark]:text-[var(--ui-bg)] [&>mark]:bg-[var(--ui-primary)]',
itemLabelPrefix: 'text-[var(--ui-text)]',
itemLabelSuffix: 'text-[var(--ui-text-dimmed)] [&>mark]:text-[var(--ui-bg)] [&>mark]:bg-[var(--ui-primary)]'
}
})

16
src/theme/context-menu.ts
View File

@@ -2,10 +2,10 @@ import type { ModuleOptions } from '../module'
export default (options: Required<ModuleOptions>) => ({
slots: {
content: 'min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
content: 'min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
group: 'p-1 isolate',
label: 'w-full flex items-center font-semibold text-[--ui-text-highlighted]',
separator: '-mx-1 my-1 h-px bg-[--ui-border]',
label: 'w-full flex items-center font-semibold text-[var(--ui-text-highlighted)]',
separator: '-mx-1 my-1 h-px bg-[var(--ui-border)]',
item: 'group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75',
itemLeadingIcon: 'shrink-0',
itemLeadingAvatar: 'shrink-0',
@@ -15,17 +15,17 @@ export default (options: Required<ModuleOptions>) => ({
itemTrailingKbds: 'hidden lg:inline-flex items-center shrink-0',
itemTrailingKbdsSize: '',
itemLabel: 'truncate',
itemLabelExternalIcon: 'size-3 align-top text-[--ui-text-dimmed]'
itemLabelExternalIcon: 'size-3 align-top text-[var(--ui-text-dimmed)]'
},
variants: {
active: {
true: {
item: 'text-[--ui-text-highlighted] before:bg-[--ui-bg-elevated]',
itemLeadingIcon: 'text-[--ui-text]'
item: 'text-[var(--ui-text-highlighted)] before:bg-[var(--ui-bg-elevated)]',
itemLeadingIcon: 'text-[var(--ui-text)]'
},
false: {
item: ['text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-[state=open]:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 data-[state=open]:before:bg-[--ui-bg-elevated]/50', options.theme.transitions && 'transition-colors before:transition-colors'],
itemLeadingIcon: ['text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] group-data-[state=open]:text-[--ui-text]', options.theme.transitions && 'transition-colors']
item: ['text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50', options.theme.transitions && 'transition-colors before:transition-colors'],
itemLeadingIcon: ['text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)]', options.theme.transitions && 'transition-colors']
}
},
size: {

10
src/theme/drawer.ts
View File

@@ -1,12 +1,12 @@
export default {
slots: {
overlay: 'fixed inset-0 bg-[--ui-bg-elevated]/75',
content: 'fixed bg-[--ui-bg] ring ring-[--ui-border] flex focus:outline-none',
handle: 'shrink-0 rounded-full bg-[--ui-bg-accented]',
overlay: 'fixed inset-0 bg-[var(--ui-bg-elevated)]/75',
content: 'fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none',
handle: 'shrink-0 rounded-full bg-[var(--ui-bg-accented)]',
container: 'w-full flex flex-col gap-4 p-4 overflow-y-auto',
header: '',
title: 'text-[--ui-text-highlighted] font-semibold',
description: 'mt-1 text-[--ui-text-muted] text-sm',
title: 'text-[var(--ui-text-highlighted)] font-semibold',
description: 'mt-1 text-[var(--ui-text-muted)] text-sm',
body: 'flex-1',
footer: 'flex flex-col gap-1.5'
},

18
src/theme/dropdown-menu.ts
View File

@@ -2,11 +2,11 @@ import type { ModuleOptions } from '../module'
export default (options: Required<ModuleOptions>) => ({
slots: {
content: 'min-w-32 bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] divide-y divide-[--ui-border] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
arrow: 'fill-[--ui-border]',
content: 'min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
arrow: 'fill-[var(--ui-border)]',
group: 'p-1 isolate',
label: 'w-full flex items-center font-semibold text-[--ui-text-highlighted]',
separator: '-mx-1 my-1 h-px bg-[--ui-border]',
label: 'w-full flex items-center font-semibold text-[var(--ui-text-highlighted)]',
separator: '-mx-1 my-1 h-px bg-[var(--ui-border)]',
item: 'group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75',
itemLeadingIcon: 'shrink-0',
itemLeadingAvatar: 'shrink-0',
@@ -16,17 +16,17 @@ export default (options: Required<ModuleOptions>) => ({
itemTrailingKbds: 'hidden lg:inline-flex items-center shrink-0',
itemTrailingKbdsSize: '',
itemLabel: 'truncate',
itemLabelExternalIcon: 'size-3 align-top text-[--ui-text-dimmed]'
itemLabelExternalIcon: 'size-3 align-top text-[var(--ui-text-dimmed)]'
},
variants: {
active: {
true: {
item: 'text-[--ui-text-highlighted] before:bg-[--ui-bg-elevated]',
itemLeadingIcon: 'text-[--ui-text]'
item: 'text-[var(--ui-text-highlighted)] before:bg-[var(--ui-bg-elevated)]',
itemLeadingIcon: 'text-[var(--ui-text)]'
},
false: {
item: ['text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-[state=open]:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50 data-[state=open]:before:bg-[--ui-bg-elevated]/50', options.theme.transitions && 'transition-colors before:transition-colors'],
itemLeadingIcon: ['text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] group-data-[state=open]:text-[--ui-text]', options.theme.transitions && 'transition-colors']
item: ['text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50', options.theme.transitions && 'transition-colors before:transition-colors'],
itemLeadingIcon: ['text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)]', options.theme.transitions && 'transition-colors']
}
},
size: {

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

@@ -3,12 +3,12 @@ export default {
root: '',
wrapper: '',
labelWrapper: 'flex content-center items-center justify-between',
label: 'block font-medium text-[--ui-text]',
label: 'block font-medium text-[var(--ui-text)]',
container: 'mt-1 relative',
description: 'text-[--ui-text-muted]',
error: 'mt-2 text-[--ui-error]',
hint: 'text-[--ui-text-muted]',
help: 'mt-2 text-[--ui-text-muted]'
description: 'text-[var(--ui-text-muted)]',
error: 'mt-2 text-[var(--ui-error)]',
hint: 'text-[var(--ui-text-muted)]',
help: 'mt-2 text-[var(--ui-text-muted)]'
},
variants: {
size: {
@@ -20,7 +20,7 @@ export default {
},
required: {
true: {
label: `after:content-['*'] after:ms-0.5 after:text-[--ui-error]`
label: `after:content-['*'] after:ms-0.5 after:text-[var(--ui-error)]`
}
}
},

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

@@ -7,15 +7,15 @@ export default (options: Required<ModuleOptions>) => {
slots: {
base: () => ['rounded-[calc(var(--ui-radius)*1.5)]', options.theme.transitions && 'transition-colors'],
trailing: 'group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75',
arrow: 'fill-[--ui-border]',
content: 'max-h-60 w-[--radix-popper-anchor-width] bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
viewport: 'divide-y divide-[--ui-border] scroll-py-1',
arrow: 'fill-[var(--ui-border)]',
content: 'max-h-60 w-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
viewport: 'divide-y divide-[var(--ui-border)] scroll-py-1',
group: 'p-1 isolate',
empty: 'py-2 text-center text-sm text-[--ui-text-muted]',
label: 'font-semibold text-[--ui-text-highlighted]',
separator: '-mx-1 my-1 h-px bg-[--ui-border]',
item: ['group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50', options.theme.transitions && 'transition-colors before:transition-colors'],
itemLeadingIcon: ['shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text]', options.theme.transitions && 'transition-colors'],
empty: 'py-2 text-center text-sm text-[var(--ui-text-muted)]',
label: 'font-semibold text-[var(--ui-text-highlighted)]',
separator: '-mx-1 my-1 h-px bg-[var(--ui-border)]',
item: ['group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50', options.theme.transitions && 'transition-colors before:transition-colors'],
itemLeadingIcon: ['shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)]', options.theme.transitions && 'transition-colors'],
itemLeadingAvatar: 'shrink-0',
itemLeadingAvatarSize: '',
itemLeadingChip: 'shrink-0',
@@ -23,11 +23,11 @@ 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-[--ui-radius] font-medium inline-flex items-center gap-0.5 ring ring-inset ring-[--ui-border-accented] bg-[--ui-bg-elevated] text-[--ui-text] data-disabled:cursor-not-allowed data-disabled:opacity-75',
tagsItem: 'px-1.5 py-0.5 rounded-[var(--ui-radius)] font-medium inline-flex items-center gap-0.5 ring ring-inset ring-[var(--ui-border-accented)] bg-[var(--ui-bg-elevated)] text-[var(--ui-text)] data-disabled:cursor-not-allowed data-disabled:opacity-75',
tagsItemText: 'truncate',
tagsItemDelete: ['inline-flex items-center rounded-[calc(var(--ui-radius)/2)] text-[--ui-text-dimmed] hover:text-[--ui-text] hover:bg-[--ui-bg-accented]/75 disabled:pointer-events-none', options.theme.transitions && 'transition-colors'],
tagsItemDelete: ['inline-flex items-center rounded-[calc(var(--ui-radius)/2)] text-[var(--ui-text-dimmed)] hover:text-[var(--ui-text)] hover:bg-[var(--ui-bg-accented)]/75 disabled:pointer-events-none', options.theme.transitions && 'transition-colors'],
tagsItemDeleteIcon: '',
tagsInput: 'border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75'
tagsInput: 'border-0 placeholder-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75'
},
variants: {
multiple: {
@@ -101,12 +101,12 @@ export default (options: Required<ModuleOptions>) => {
color,
multiple: true,
variant: ['outline', 'subtle'],
class: `has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[--${color}]`
class: `has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[var(--${color})]`
})), {
color: 'neutral',
multiple: true,
variant: ['outline', 'subtle'],
class: 'has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[--ui-border-inverted]'
class: 'has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[var(--ui-border-inverted)]'
}]
}, input(options))
}

26
src/theme/input.ts
View File

@@ -4,12 +4,12 @@ import { buttonGroupVariantWithRoot } from './button-group'
export default (options: Required<ModuleOptions>) => ({
slots: {
root: 'relative inline-flex items-center',
base: ['w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75', options.theme.transitions && 'transition-colors'],
base: ['w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75', options.theme.transitions && 'transition-colors'],
leading: 'absolute inset-y-0 start-0 flex items-center',
leadingIcon: 'shrink-0 text-[--ui-text-dimmed]',
leadingIcon: 'shrink-0 text-[var(--ui-text-dimmed)]',
leadingAvatar: 'shrink-0',
trailing: 'absolute inset-y-0 end-0 flex items-center',
trailingIcon: 'shrink-0 text-[--ui-text-dimmed]'
trailingIcon: 'shrink-0 text-[var(--ui-text-dimmed)]'
},
variants: {
...buttonGroupVariantWithRoot,
@@ -51,11 +51,11 @@ export default (options: Required<ModuleOptions>) => ({
}
},
variant: {
outline: 'text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented]',
soft: 'text-[--ui-text-highlighted] bg-[--ui-bg-elevated]/50 hover:bg-[--ui-bg-elevated] focus:bg-[--ui-bg-elevated] disabled:bg-[--ui-bg-elevated]/50',
subtle: 'text-[--ui-text-highlighted] bg-[--ui-bg-elevated] ring ring-inset ring-[--ui-border-accented]',
ghost: 'text-[--ui-text-highlighted] hover:bg-[--ui-bg-elevated] focus:bg-[--ui-bg-elevated] disabled:bg-transparent dark:disabled:bg-transparent',
none: 'text-[--ui-text-highlighted]'
outline: 'text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)]',
soft: 'text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)]/50 hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-[var(--ui-bg-elevated)]/50',
subtle: 'text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] ring ring-inset ring-[var(--ui-border-accented)]',
ghost: 'text-[var(--ui-text-highlighted)] hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent',
none: 'text-[var(--ui-text-highlighted)]'
},
color: {
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, ''])),
@@ -74,25 +74,25 @@ export default (options: Required<ModuleOptions>) => ({
true: ''
},
type: {
file: 'file:mr-1.5 file:font-medium file:text-[--ui-text-muted] file:outline-none'
file: 'file:mr-1.5 file:font-medium file:text-[var(--ui-text-muted)] file:outline-none'
}
},
compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
color,
variant: ['outline', 'subtle'],
class: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-${color}]`
class: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-${color})]`
})), ...(options.theme.colors || []).map((color: string) => ({
color,
highlight: true,
class: `ring ring-inset ring-[--ui-${color}]`
class: `ring ring-inset ring-[var(--ui-${color})]`
})), {
color: 'neutral',
variant: ['outline', 'subtle'],
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-border-inverted]'
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)]'
}, {
color: 'neutral',
highlight: true,
class: 'ring ring-inset ring-[--ui-border-inverted]'
class: 'ring ring-inset ring-[var(--ui-border-inverted)]'
}, {
leading: true,
size: 'xs',

8
src/theme/kbd.ts
View File

@@ -1,10 +1,10 @@
export default {
base: 'inline-flex items-center justify-center px-1 rounded-[--ui-radius] font-medium font-sans',
base: 'inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans',
variants: {
variant: {
solid: 'bg-[--ui-bg-inverted] text-[--ui-bg]',
outline: 'bg-[--ui-bg] text-[--ui-text-highlighted] ring ring-inset ring-[--ui-border-accented]',
subtle: 'bg-[--ui-bg-elevated] text-[--ui-text] ring ring-inset ring-[--ui-border-accented]'
solid: 'bg-[var(--ui-bg-inverted)] text-[var(--ui-bg)]',
outline: 'bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)]',
subtle: 'bg-[var(--ui-bg-elevated)] text-[var(--ui-text)] ring ring-inset ring-[var(--ui-border-accented)]'
},
size: {
sm: 'h-4 min-w-[16px] text-[10px]',

6
src/theme/link.ts
View File

@@ -1,11 +1,11 @@
import type { ModuleOptions } from '../module'
export default (options: Required<ModuleOptions>) => ({
base: 'focus-visible:outline-[--ui-primary]',
base: 'focus-visible:outline-[var(--ui-primary)]',
variants: {
active: {
true: 'text-[--ui-primary]',
false: ['text-[--ui-text-muted] hover:text-[--ui-text]', options.theme.transitions && 'transition-colors']
true: 'text-[var(--ui-primary)]',
false: ['text-[var(--ui-text-muted)] hover:text-[var(--ui-text)]', options.theme.transitions && 'transition-colors']
},
disabled: {
true: 'cursor-not-allowed opacity-75'

10
src/theme/modal.ts
View File

@@ -1,12 +1,12 @@
export default {
slots: {
overlay: 'fixed inset-0 bg-[--ui-bg-elevated]/75',
content: 'fixed w-full h-dvh bg-[--ui-bg] divide-y divide-[--ui-border] flex flex-col focus:outline-none',
overlay: 'fixed inset-0 bg-[var(--ui-bg-elevated)]/75',
content: 'fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none',
header: 'px-4 py-5 sm:px-6',
body: 'flex-1 p-4 sm:p-6',
footer: 'flex items-center gap-1.5 p-4 sm:px-6',
title: 'text-[--ui-text-highlighted] font-semibold',
description: 'mt-1 text-[--ui-text-muted] text-sm',
title: 'text-[var(--ui-text-highlighted)] font-semibold',
description: 'mt-1 text-[var(--ui-text-muted)] text-sm',
close: 'absolute top-4 right-4'
},
variants: {
@@ -21,7 +21,7 @@ export default {
content: 'inset-0'
},
false: {
content: 'top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[--ui-border]'
content: 'top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]'
}
}
}

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

@@ -14,32 +14,32 @@ export default (options: Required<ModuleOptions>) => ({
linkTrailingBadgeSize: 'sm',
linkTrailingIcon: 'size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200',
linkLabel: 'truncate',
linkLabelExternalIcon: 'size-3 align-top text-[--ui-text-dimmed]',
linkLabelExternalIcon: 'size-3 align-top text-[var(--ui-text-dimmed)]',
childList: 'grid grid-cols-2 gap-2 p-2',
childItem: '',
childLink: 'group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-left',
childLinkWrapper: 'flex flex-col items-start',
childLinkIcon: 'size-5 shrink-0',
childLinkLabel: 'font-semibold text-sm relative inline-flex',
childLinkLabelExternalIcon: 'size-3 align-top text-[--ui-text-dimmed]',
childLinkDescription: 'text-sm text-[--ui-text-muted]',
separator: 'px-2 h-px bg-[--ui-border]',
childLinkLabelExternalIcon: 'size-3 align-top text-[var(--ui-text-dimmed)]',
childLinkDescription: 'text-sm text-[var(--ui-text-muted)]',
separator: 'px-2 h-px bg-[var(--ui-border)]',
viewportWrapper: 'absolute top-full inset-x-0 flex w-full',
// FIXME: add `sm:w-[var(--radix-navigation-menu-viewport-width)]` / `transition-[width,height]` / `origin-[top_center]` once position is based on trigger
viewport: 'relative overflow-hidden bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] h-[--radix-navigation-menu-viewport-height] w-full data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
viewport: 'relative overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] h-[var(--radix-navigation-menu-viewport-height)] w-full data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
content: 'absolute top-0 left-0 w-full data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]',
indicator: 'data-[state=visible]:animate-[fade-in_100ms_ease-out] data-[state=hidden]:animate-[fade-out_100ms_ease-in] bottom-0 z-[1] flex h-2.5 items-end justify-center overflow-hidden transition-transform duration-200 ease-out',
arrow: 'relative top-[50%] size-2.5 rotate-45 border border-[--ui-border] bg-[--ui-bg] z-[1] rounded-[calc(var(--ui-radius)/2)]'
arrow: 'relative top-[50%] size-2.5 rotate-45 border border-[var(--ui-border)] bg-[var(--ui-bg)] z-[1] rounded-[calc(var(--ui-radius)/2)]'
},
variants: {
color: {
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
link: `focus-visible:before:ring-[--ui-${color}]`,
childLink: `focus-visible:outline-[--ui-${color}]`
link: `focus-visible:before:ring-[var(--ui-${color})]`,
childLink: `focus-visible:outline-[var(--ui-${color})]`
}])),
neutral: {
link: 'focus-visible:before:ring-[--ui-border-inverted]',
childLink: 'focus-visible:outline-[--ui-border-inverted]'
link: 'focus-visible:before:ring-[var(--ui-border-inverted)]',
childLink: 'focus-visible:outline-[var(--ui-border-inverted)]'
}
},
highlightColor: {
@@ -64,14 +64,14 @@ export default (options: Required<ModuleOptions>) => ({
},
active: {
true: {
childLink: 'bg-[--ui-bg-elevated] text-[--ui-text-highlighted]',
childLinkIcon: 'text-[--ui-text]'
childLink: 'bg-[var(--ui-bg-elevated)] text-[var(--ui-text-highlighted)]',
childLinkIcon: 'text-[var(--ui-text)]'
},
false: {
link: 'text-[--ui-text-muted]',
linkLeadingIcon: 'text-[--ui-text-dimmed]',
childLink: ['hover:bg-[--ui-bg-elevated]/50 text-[--ui-text] hover:text-[--ui-text-highlighted]', options.theme.transitions && 'transition-colors'],
childLinkIcon: ['text-[--ui-text-dimmed] group-hover:text-[--ui-text]', options.theme.transitions && 'transition-colors']
link: 'text-[var(--ui-text-muted)]',
linkLeadingIcon: 'text-[var(--ui-text-dimmed)]',
childLink: ['hover:bg-[var(--ui-bg-elevated)]/50 text-[var(--ui-text)] hover:text-[var(--ui-text-highlighted)]', options.theme.transitions && 'transition-colors'],
childLinkIcon: ['text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)]', options.theme.transitions && 'transition-colors']
}
},
disabled: {
@@ -102,76 +102,76 @@ export default (options: Required<ModuleOptions>) => ({
active: false,
variant: 'pill',
class: {
link: ['hover:text-[--ui-text-highlighted] hover:before:bg-[--ui-bg-elevated]/50 data-[state=open]:text-[--ui-text-highlighted] data-[state=open]:before:bg-[--ui-bg-elevated]/50', options.theme.transitions && 'transition-colors before:transition-colors'],
linkLeadingIcon: ['group-hover:text-[--ui-text] group-data-[state=open]:text-[--ui-text]', options.theme.transitions && 'transition-colors']
link: ['hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50', options.theme.transitions && 'transition-colors before:transition-colors'],
linkLeadingIcon: ['group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)]', options.theme.transitions && 'transition-colors']
}
}, ...(options.theme.colors || []).map((color: string) => ({
color,
variant: 'pill',
active: true,
class: {
link: `text-[--ui-${color}]`,
linkLeadingIcon: `text-[--ui-${color}]`
link: `text-[var(--ui-${color})]`,
linkLeadingIcon: `text-[var(--ui-${color})]`
}
})), {
color: 'neutral',
variant: 'pill',
active: true,
class: {
link: 'text-[--ui-text-highlighted]',
linkLeadingIcon: 'text-[--ui-text-highlighted]'
link: 'text-[var(--ui-text-highlighted)]',
linkLeadingIcon: 'text-[var(--ui-text-highlighted)]'
}
}, {
variant: 'pill',
active: true,
highlight: false,
class: {
link: 'before:bg-[--ui-bg-elevated]'
link: 'before:bg-[var(--ui-bg-elevated)]'
}
}, {
variant: 'pill',
active: true,
highlight: true,
class: {
link: ['hover:before:bg-[--ui-bg-elevated]/50', options.theme.transitions && 'before:transition-colors']
link: ['hover:before:bg-[var(--ui-bg-elevated)]/50', options.theme.transitions && 'before:transition-colors']
}
}, {
disabled: false,
active: false,
variant: 'link',
class: {
link: ['hover:text-[--ui-text-highlighted] data-[state=open]:text-[--ui-text-highlighted]', options.theme.transitions && 'transition-colors'],
linkLeadingIcon: ['group-hover:text-[--ui-text] group-data-[state=open]:text-[--ui-text]', options.theme.transitions && 'transition-colors']
link: ['hover:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)]', options.theme.transitions && 'transition-colors'],
linkLeadingIcon: ['group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)]', options.theme.transitions && 'transition-colors']
}
}, ...(options.theme.colors || []).map((color: string) => ({
color,
variant: 'link',
active: true,
class: {
link: `text-[--ui-${color}]`,
linkLeadingIcon: `text-[--ui-${color}]`
link: `text-[var(--ui-${color})]`,
linkLeadingIcon: `text-[var(--ui-${color})]`
}
})), {
color: 'neutral',
variant: 'link',
active: true,
class: {
link: 'text-[--ui-text-highlighted]',
linkLeadingIcon: 'text-[--ui-text-highlighted]'
link: 'text-[var(--ui-text-highlighted)]',
linkLeadingIcon: 'text-[var(--ui-text-highlighted)]'
}
}, ...(options.theme.colors || []).map((highlightColor: string) => ({
highlightColor,
highlight: true,
active: true,
class: {
link: `after:bg-[--ui-${highlightColor}]`
link: `after:bg-[var(--ui-${highlightColor})]`
}
})), {
highlightColor: 'neutral',
highlight: true,
active: true,
class: {
link: 'after:bg-[--ui-bg-inverted]'
link: 'after:bg-[var(--ui-bg-inverted)]'
}
}],
defaultVariants: {

4
src/theme/popover.ts
View File

@@ -1,6 +1,6 @@
export default {
slots: {
content: 'bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none',
arrow: 'fill-[--ui-border]'
content: 'bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none',
arrow: 'fill-[var(--ui-border)]'
}
}

14
src/theme/progress.ts
View File

@@ -3,9 +3,9 @@ import type { ModuleOptions } from '../module'
export default (options: Required<ModuleOptions>) => ({
slots: {
root: 'gap-2',
base: 'relative overflow-hidden rounded-full bg-[--ui-bg-accented]',
base: 'relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)]',
indicator: 'rounded-full size-full transition-transform duration-200 ease-out',
status: 'flex justify-end text-[--ui-text-dimmed] transition-[width] duration-200',
status: 'flex justify-end text-[var(--ui-text-dimmed)] transition-[width] duration-200',
steps: 'grid items-end',
step: 'truncate text-end row-start-1 col-start-1 transition-opacity'
},
@@ -18,12 +18,12 @@ export default (options: Required<ModuleOptions>) => ({
},
color: {
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
indicator: `bg-[--ui-${color}]`,
steps: `text-[--ui-${color}]`
indicator: `bg-[var(--ui-${color})]`,
steps: `text-[var(--ui-${color})]`
}])),
neutral: {
indicator: 'bg-[--ui-bg-inverted]',
steps: 'text-[--ui-bg]'
indicator: 'bg-[var(--ui-bg-inverted)]',
steps: 'text-[var(--ui-bg)]'
}
},
size: {
@@ -61,7 +61,7 @@ export default (options: Required<ModuleOptions>) => ({
step: 'opacity-100'
},
first: {
step: 'opacity-100 text-[--ui-text-muted]'
step: 'opacity-100 text-[var(--ui-text-muted)]'
},
other: {
step: 'opacity-0'

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

@@ -4,24 +4,24 @@ export default (options: Required<ModuleOptions>) => ({
slots: {
root: 'relative',
fieldset: 'flex',
legend: 'mb-1 block font-medium text-[--ui-text]',
legend: 'mb-1 block font-medium text-[var(--ui-text)]',
item: 'flex items-start',
base: 'rounded-full ring ring-inset ring-[--ui-border-accented] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-[--ui-bg]',
indicator: 'flex items-center justify-center size-full rounded-full after:bg-[--ui-bg] after:rounded-full',
base: 'rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-[var(--ui-bg)]',
indicator: 'flex items-center justify-center size-full rounded-full after:bg-[var(--ui-bg)] after:rounded-full',
container: 'flex items-center',
wrapper: 'ms-2',
label: 'block font-medium text-[--ui-text]',
description: 'text-[--ui-text-muted]'
label: 'block font-medium text-[var(--ui-text)]',
description: 'text-[var(--ui-text-muted)]'
},
variants: {
color: {
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
base: `focus-visible:outline-[--ui-${color}]`,
indicator: `bg-[--ui-${color}]`
base: `focus-visible:outline-[var(--ui-${color})]`,
indicator: `bg-[var(--ui-${color})]`
}])),
neutral: {
base: 'focus-visible:outline-[--ui-border-inverted]',
indicator: 'bg-[--ui-bg-inverted]'
base: 'focus-visible:outline-[var(--ui-border-inverted)]',
indicator: 'bg-[var(--ui-bg-inverted)]'
}
},
orientation: {
@@ -83,7 +83,7 @@ export default (options: Required<ModuleOptions>) => ({
},
required: {
true: {
legend: 'after:content-[\'*\'] after:ms-0.5 after:text-[--ui-error]'
legend: 'after:content-[\'*\'] after:ms-0.5 after:text-[var(--ui-error)]'
}
}
},

2
src/theme/select-menu.ts
View File

@@ -7,7 +7,7 @@ export default (options: Required<ModuleOptions>) => {
slots: {
value: 'truncate',
placeholder: 'truncate text-current/50',
input: 'placeholder-[--ui-text-dimmed] border-0 border-b border-[--ui-border] focus:outline-none'
input: 'placeholder-[var(--ui-text-dimmed)] border-0 border-b border-[var(--ui-border)] focus:outline-none'
},
variants: {
size: {

16
src/theme/select.ts
View File

@@ -9,15 +9,15 @@ export default (options: Required<ModuleOptions>) => {
root: () => undefined,
base: () => ['relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75', options.theme.transitions && 'transition-colors'],
value: 'truncate group-data-placeholder:text-current/50',
arrow: 'fill-[--ui-border]',
content: 'max-h-60 w-[--radix-popper-anchor-width] bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[--ui-border] overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
viewport: 'divide-y divide-[--ui-border] scroll-py-1',
arrow: 'fill-[var(--ui-border)]',
content: 'max-h-60 w-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
viewport: 'divide-y divide-[var(--ui-border)] scroll-py-1',
group: 'p-1 isolate',
empty: 'py-2 text-center text-sm text-[--ui-text-muted]',
label: 'font-semibold text-[--ui-text-highlighted]',
separator: '-mx-1 my-1 h-px bg-[--ui-border]',
item: ['group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50', options.theme.transitions && 'transition-colors before:transition-colors'],
itemLeadingIcon: ['shrink-0 text-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text]', options.theme.transitions && 'transition-colors'],
empty: 'py-2 text-center text-sm text-[var(--ui-text-muted)]',
label: 'font-semibold text-[var(--ui-text-highlighted)]',
separator: '-mx-1 my-1 h-px bg-[var(--ui-border)]',
item: ['group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50', options.theme.transitions && 'transition-colors before:transition-colors'],
itemLeadingIcon: ['shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)]', options.theme.transitions && 'transition-colors'],
itemLeadingAvatar: 'shrink-0',
itemLeadingAvatarSize: '',
itemLeadingChip: 'shrink-0',

6
src/theme/separator.ts
View File

@@ -4,7 +4,7 @@ export default (options: Required<ModuleOptions>) => ({
slots: {
root: 'flex items-center align-center text-center',
border: '',
container: 'font-medium text-[--ui-text] flex',
container: 'font-medium text-[var(--ui-text)] flex',
icon: 'shrink-0 size-5',
avatar: 'shrink-0',
avatarSize: '2xs',
@@ -12,8 +12,8 @@ export default (options: Required<ModuleOptions>) => ({
},
variants: {
color: {
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, { border: `border-[--ui-${color}]` }])),
neutral: { border: 'border-[--ui-border]' }
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, { border: `border-[var(--ui-${color})]` }])),
neutral: { border: 'border-[var(--ui-border)]' }
},
orientation: {
horizontal: {

2
src/theme/skeleton.ts
View File

@@ -1,3 +1,3 @@
export default {
base: 'animate-pulse rounded-[calc(var(--ui-radius)*1.5)] bg-[--ui-bg-elevated]'
base: 'animate-pulse rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-bg-elevated)]'
}

8
src/theme/slideover.ts
View File

@@ -1,12 +1,12 @@
export default {
slots: {
overlay: 'fixed inset-0 bg-[--ui-bg-elevated]/75',
content: 'fixed bg-[--ui-bg] divide-y divide-[--ui-border] sm:ring ring-[--ui-border] sm:shadow-lg flex flex-col focus:outline-none',
overlay: 'fixed inset-0 bg-[var(--ui-bg-elevated)]/75',
content: 'fixed bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] sm:ring ring-[var(--ui-border)] sm:shadow-lg flex flex-col focus:outline-none',
header: 'px-4 py-5 sm:px-6',
body: 'flex-1 overflow-y-auto p-4 sm:p-6',
footer: 'flex items-center gap-1.5 p-4 sm:px-6',
title: 'text-[--ui-text-highlighted] font-semibold',
description: 'mt-1 text-[--ui-text-muted] text-sm',
title: 'text-[var(--ui-text-highlighted)] font-semibold',
description: 'mt-1 text-[var(--ui-text-muted)] text-sm',
close: 'absolute top-4 right-4'
},
variants: {

12
src/theme/slider.ts
View File

@@ -3,19 +3,19 @@ import type { ModuleOptions } from '../module'
export default (options: Required<ModuleOptions>) => ({
slots: {
root: 'relative flex items-center select-none touch-none',
track: 'relative bg-[--ui-bg-accented] overflow-hidden rounded-full grow',
track: 'relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow',
range: 'absolute rounded-full',
thumb: 'rounded-full bg-[--ui-bg] ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2'
thumb: 'rounded-full bg-[var(--ui-bg)] ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2'
},
variants: {
color: {
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
range: `bg-[--ui-${color}]`,
thumb: `ring-[--ui-${color}] focus-visible:outline-[--ui-${color}]`
range: `bg-[var(--ui-${color})]`,
thumb: `ring-[var(--ui-${color})] focus-visible:outline-[var(--ui-${color})]`
}])),
neutral: {
range: 'bg-[--ui-bg-inverted]',
thumb: 'ring-[--ui-border-inverted] focus-visible:outline-[--ui-border-inverted]/50'
range: 'bg-[var(--ui-bg-inverted)]',
thumb: 'ring-[var(--ui-border-inverted)] focus-visible:outline-[var(--ui-border-inverted)]/50'
}
},
size: {

20
src/theme/switch.ts
View File

@@ -3,23 +3,23 @@ import type { ModuleOptions } from '../module'
export default (options: Required<ModuleOptions>) => ({
slots: {
root: 'relative flex items-start',
base: ['inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-[--ui-bg] data-[state=unchecked]:bg-[--ui-bg-accented]', options.theme.transitions && 'transition-colors duration-200'],
base: ['inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--ui-bg)] data-[state=unchecked]:bg-[var(--ui-bg-accented)]', options.theme.transitions && 'transition-colors duration-200'],
container: 'flex items-center',
thumb: 'group pointer-events-none block rounded-full bg-[--ui-bg] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center',
icon: ['absolute shrink-0 group-data-[state=unchecked]:text-[--ui-text-dimmed] opacity-0 size-10/12', options.theme.transitions && 'transition-[color,opacity] duration-200'],
thumb: 'group pointer-events-none block rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center',
icon: ['absolute shrink-0 group-data-[state=unchecked]:text-[var(--ui-text-dimmed)] opacity-0 size-10/12', options.theme.transitions && 'transition-[color,opacity] duration-200'],
wrapper: 'ms-2',
label: 'block font-medium text-[--ui-text]',
description: 'text-[--ui-text-muted]'
label: 'block font-medium text-[var(--ui-text)]',
description: 'text-[var(--ui-text-muted)]'
},
variants: {
color: {
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
base: `data-[state=checked]:bg-[--ui-${color}] focus-visible:ring-[--ui-${color}]`,
icon: `group-data-[state=checked]:text-[--ui-${color}]`
base: `data-[state=checked]:bg-[var(--ui-${color})] focus-visible:ring-[var(--ui-${color})]`,
icon: `group-data-[state=checked]:text-[var(--ui-${color})]`
}])),
neutral: {
base: 'data-[state=checked]:bg-[--ui-bg-inverted] focus-visible:ring-[--ui-border-inverted]',
icon: 'group-data-[state=checked]:text-[--ui-text-highlighted]'
base: 'data-[state=checked]:bg-[var(--ui-bg-inverted)] focus-visible:ring-[var(--ui-border-inverted)]',
icon: 'group-data-[state=checked]:text-[var(--ui-text-highlighted)]'
}
},
size: {
@@ -71,7 +71,7 @@ export default (options: Required<ModuleOptions>) => ({
},
required: {
true: {
label: 'after:content-[\'*\'] after:ms-0.5 after:text-[--ui-error]'
label: 'after:content-[\'*\'] after:ms-0.5 after:text-[var(--ui-error)]'
}
},
disabled: {

26
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-[--ui-text-muted] hover:data-[state=inactive]:text-[--ui-text] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none', options.theme.transitions && 'transition-colors'],
trigger: ['relative inline-flex items-center shrink-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none', options.theme.transitions && 'transition-colors'],
content: 'focus:outline-none w-full',
leadingIcon: 'shrink-0',
leadingAvatar: 'shrink-0',
@@ -19,12 +19,12 @@ export default (options: Required<ModuleOptions>) => ({
},
variant: {
pill: {
list: 'bg-[--ui-bg-elevated] rounded-[calc(var(--ui-radius)*2)]',
list: 'bg-[var(--ui-bg-elevated)] rounded-[calc(var(--ui-radius)*2)]',
trigger: 'flex-1',
indicator: 'rounded-[calc(var(--ui-radius)*1.5)] shadow-sm'
},
link: {
list: 'border-[--ui-border]',
list: 'border-[var(--ui-border)]',
indicator: 'rounded-full'
}
},
@@ -32,12 +32,12 @@ export default (options: Required<ModuleOptions>) => ({
horizontal: {
root: 'flex-col',
list: 'w-full',
indicator: 'left-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position]',
indicator: 'left-0 w-[var(--radix-tabs-indicator-size)] translate-x-[var(--radix-tabs-indicator-position)]',
trigger: 'justify-center'
},
vertical: {
list: 'flex-col',
indicator: 'top-0 h-[--radix-tabs-indicator-size] translate-y-[--radix-tabs-indicator-position]'
indicator: 'top-0 h-[var(--radix-tabs-indicator-size)] translate-y-[var(--radix-tabs-indicator-position)]'
}
},
size: {
@@ -99,29 +99,29 @@ export default (options: Required<ModuleOptions>) => ({
color,
variant: 'pill',
class: {
indicator: `bg-[--ui-${color}]`,
trigger: `data-[state=active]:text-[--ui-bg] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-${color}]`
indicator: `bg-[var(--ui-${color})]`,
trigger: `data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-${color})]`
}
})), {
color: 'neutral',
variant: 'pill',
class: {
indicator: 'bg-[--ui-bg-inverted]',
trigger: 'data-[state=active]:text-[--ui-bg] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-border-inverted]'
indicator: 'bg-[var(--ui-bg-inverted)]',
trigger: 'data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-border-inverted)]'
}
}, ...(options.theme.colors || []).map((color: string) => ({
color,
variant: 'link',
class: {
indicator: `bg-[--ui-${color}]`,
trigger: `data-[state=active]:text-[--ui-${color}] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-${color}]`
indicator: `bg-[var(--ui-${color})]`,
trigger: `data-[state=active]:text-[var(--ui-${color})] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-${color})]`
}
})), {
color: 'neutral',
variant: 'link',
class: {
indicator: 'bg-[--ui-bg-inverted]',
trigger: 'data-[state=active]:text-[--ui-text-highlighted] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-border-inverted]'
indicator: 'bg-[var(--ui-bg-inverted)]',
trigger: 'data-[state=active]:text-[var(--ui-text-highlighted)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)]'
}
}],
defaultVariants: {

18
src/theme/toast.ts
View File

@@ -2,10 +2,10 @@ import type { ModuleOptions } from '../module'
export default (options: Required<ModuleOptions>) => ({
slots: {
root: 'relative group overflow-hidden bg-[--ui-bg] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[--ui-border] p-4 flex gap-2.5 focus:outline-none',
root: 'relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none',
wrapper: 'w-0 flex-1 flex flex-col gap-1',
title: 'text-sm font-medium text-[--ui-text-highlighted]',
description: 'text-sm text-[--ui-text-muted]',
title: 'text-sm font-medium text-[var(--ui-text-highlighted)]',
description: 'text-sm text-[var(--ui-text-muted)]',
icon: 'shrink-0 size-5',
avatar: 'shrink-0',
avatarSize: '2xl',
@@ -16,14 +16,14 @@ export default (options: Required<ModuleOptions>) => ({
variants: {
color: {
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
root: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-${color}]`,
icon: `text-[--ui-${color}]`,
progress: `bg-[--ui-${color}]`
root: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-${color})]`,
icon: `text-[var(--ui-${color})]`,
progress: `bg-[var(--ui-${color})]`
}])),
neutral: {
root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-border-inverted]',
icon: 'text-[--ui-text-highlighted]',
progress: 'bg-[--ui-bg-inverted]'
root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)]',
icon: 'text-[var(--ui-text-highlighted)]',
progress: 'bg-[var(--ui-bg-inverted)]'
}
},
multiline: {

8
src/theme/toaster.ts
View File

@@ -1,7 +1,7 @@
export default {
slots: {
viewport: 'fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[--height] focus:outline-none',
base: 'absolute inset-x-0 z-[--index] transform-[--transform] data-[expanded=false]:data-[front=false]:h-[--front-height] data-[expanded=false]:data-[front=false]:*:invisible data-[state=closed]:animate-[toast-closed_200ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-200 ease-out'
viewport: 'fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none',
base: 'absolute inset-x-0 z-[var(--index)] transform-[var(--transform)] data-[expanded=false]:data-[front=false]:h-[var(--front-height)] data-[expanded=false]:data-[front=false]:*:invisible data-[state=closed]:animate-[toast-closed_200ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-200 ease-out'
},
variants: {
position: {
@@ -45,10 +45,10 @@ export default {
}
}, {
swipeDirection: ['left', 'right'],
class: 'data-[swipe=move]:translate-x-[--radix-toast-swipe-move-x] data-[swipe=end]:translate-x-[--radix-toast-swipe-end-x] data-[swipe=cancel]:translate-x-0'
class: 'data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=cancel]:translate-x-0'
}, {
swipeDirection: ['up', 'down'],
class: 'data-[swipe=move]:translate-y-[--radix-toast-swipe-move-y] data-[swipe=end]:translate-y-[--radix-toast-swipe-end-y] data-[swipe=cancel]:translate-y-0'
class: 'data-[swipe=move]:translate-y-[var(--radix-toast-swipe-move-y)] data-[swipe=end]:translate-y-[var(--radix-toast-swipe-end-y)] data-[swipe=cancel]:translate-y-0'
}],
defaultVariants: {
position: 'bottom-right'

4
src/theme/tooltip.ts
View File

@@ -1,7 +1,7 @@
export default {
slots: {
content: 'flex items-center gap-1 bg-[--ui-bg] text-[--ui-text-highlighted] shadow rounded-[--ui-radius] ring ring-[--ui-border] h-6 px-2 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
arrow: 'fill-[--ui-border]',
content: 'flex items-center gap-1 bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] shadow rounded-[var(--ui-radius)] ring ring-[var(--ui-border)] h-6 px-2 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
arrow: 'fill-[var(--ui-border)]',
text: 'truncate',
kbds: `hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-['·'] before:mr-0.5`,
kbdsSize: 'sm'

2
test/components/Accordion.spec.ts
View File

@@ -46,7 +46,7 @@ describe('Accordion', () => {
['with collapsible', { props: { ...props, collapsible: false } }],
['with trailingIcon', { props: { ...props, trailingIcon: 'i-heroicons-plus' } }],
['with class', { props: { ...props, class: 'w-96' } }],
['with ui', { props: { ...props, ui: { item: 'border-[--ui-border-accented]' } } }],
['with ui', { props: { ...props, ui: { item: 'border-[var(--ui-border-accented)]' } } }],
// Slots
['with leading slot', { props: { ...props, modelValue: '1' }, slots: { leading: () => 'Leading slot' } }],
['with default slot', { props: { ...props, modelValue: '1' }, slots: { default: () => 'Default slot' } }],

2
test/components/Avatar.spec.ts
View File

@@ -13,7 +13,7 @@ describe('Avatar', () => {
['with text', { props: { text: '+1' } }],
['with icon', { props: { icon: 'i-heroicons-photo' } }],
...sizes.map((size: string) => [`with size ${size}`, { props: { src: 'https://avatars.githubusercontent.com/u/739984?v=4', size } }]),
['with class', { props: { class: 'bg-[--ui-bg]' } }],
['with class', { props: { class: 'bg-[var(--ui-bg)]' } }],
['with ui', { props: { ui: { fallback: 'font-bold' } } }]
])('renders %s correctly', async (nameOrHtml: string, options: { props?: AvatarProps }) => {
const html = await ComponentRender(nameOrHtml, options, Avatar)

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

@@ -17,7 +17,7 @@ describe('Chip', () => {
['with color neutral', { props: { color: 'neutral' } }],
['without show', { props: { show: false } }],
['with class', { props: { class: 'mx-auto' } }],
['with ui', { props: { ui: { base: 'text-[--ui-text-muted]' } } }],
['with ui', { props: { ui: { base: 'text-[var(--ui-text-muted)]' } } }],
// Slots
['with default slot', { slots: { default: () => 'Default slot' } }],
['with content slot', { slots: { content: () => 'Content slot' } }]

2
test/components/Collapsible.spec.ts
View File

@@ -9,7 +9,7 @@ describe('Collapsible', () => {
// Props
['with open', { props }],
['with class', { props: { ...props, class: 'gap-4' } }],
['with ui', { props: { ...props, ui: { content: 'bg-[--ui-bg-elevated]' } } }],
['with ui', { props: { ...props, ui: { content: 'bg-[var(--ui-bg-elevated)]' } } }],
// Slots
['with default slot', { props, slots: { default: () => 'Default slot' } }],
['with content slot', { props, slots: { content: () => 'Content slot' } }]

2
test/components/CommandPalette.spec.ts
View File

@@ -74,7 +74,7 @@ describe('CommandPalette', () => {
['with close', { props: { ...props, close: true } }],
['with closeIcon', { props: { ...props, close: true, closeIcon: 'i-heroicons-trash' } }],
['with as', { props: { ...props, as: 'section' } }],
['with class', { props: { ...props, class: 'divide-[--ui-border-accented]' } }],
['with class', { props: { ...props, class: 'divide-[var(--ui-border-accented)]' } }],
['with ui', { props: { ...props, ui: { input: '[&>input]:h-10' } } }],
// Slots
['with empty slot', { props, slots: { empty: () => 'Empty slot' } }],

2
test/components/Drawer.spec.ts
View File

@@ -14,7 +14,7 @@ describe('Drawer', () => {
['with right direction', { props: { ...props, direction: 'right' as const, title: 'Title', description: 'Description' } }],
['without handle', { props: { ...props, handle: false, title: 'Title', description: 'Description' } }],
['without overlay', { props: { ...props, overlay: false, title: 'Title', description: 'Description' } }],
['with class', { props: { ...props, class: 'bg-[--ui-bg-elevated]' } }],
['with class', { props: { ...props, class: 'bg-[var(--ui-bg-elevated)]' } }],
['with ui', { props: { ...props, ui: { handle: 'w-20' } } }],
// Slots
['with default slot', { props, slots: { default: () => 'Default slot' } }],

2
test/components/FormField.spec.ts
View File

@@ -29,7 +29,7 @@ describe('FormField', () => {
['with hint', { props: { hint: 'Use letters, numbers, and special characters' } }],
...sizes.map((size: string) => [`with size ${size}`, { props: { label: 'Username', description: 'Enter your username', size } }]),
['with class', { props: { class: 'relative' } }],
['with ui', { props: { ui: { label: 'text-[--ui-text-highlighted]' } } }],
['with ui', { props: { ui: { label: 'text-[var(--ui-text-highlighted)]' } } }],
// Slots
['with default slot', { slots: { default: () => 'Default slot' } }],
['with label slot', { slots: { label: () => 'Label slot' } }],

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

@@ -11,8 +11,8 @@ describe('Link', () => {
['with disabled', { props: { disabled: true } }],
['with raw', { props: { raw: true } }],
['with class', { props: { class: 'font-medium' } }],
['with activeClass', { props: { active: true, activeClass: 'text-[--ui-text-highlighted]' } }],
['with inactiveClass', { props: { active: false, inactiveClass: 'hover:text-[--ui-primary]' } }],
['with activeClass', { props: { active: true, activeClass: 'text-[var(--ui-text-highlighted)]' } }],
['with inactiveClass', { props: { active: false, inactiveClass: 'hover:text-[var(--ui-primary)]' } }],
// Slots
['with default slot', { slots: { default: () => 'Default slot' } }]
])('renders %s correctly', async (nameOrHtml: string, options: { props?: LinkProps, slots?: Partial<LinkSlots> }) => {

2
test/components/Modal.spec.ts
View File

@@ -15,7 +15,7 @@ describe('Modal', () => {
['without transition', { props: { ...props, transition: false, title: 'Title', description: 'Description' } }],
['without close', { props: { ...props, close: false, title: 'Title', description: 'Description' } }],
['with closeIcon', { props: { ...props, closeIcon: 'i-heroicons-trash' } }],
['with class', { props: { ...props, class: 'bg-[--ui-bg-elevated]' } }],
['with class', { props: { ...props, class: 'bg-[var(--ui-bg-elevated)]' } }],
['with ui', { props: { ...props, ui: { close: 'right-2' } } }],
// Slots
['with default slot', { props, slots: { default: () => 'Default slot' } }],

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

@@ -22,7 +22,7 @@ describe('Progress', () => {
...animations.map((animation: string) => [`with animation ${animation}`, { props: { animation } }]),
['with color neutral', { props: { color: 'neutral', modelValue: 50 } }],
['with class', { props: { class: 'w-48' } }],
['with ui', { props: { ui: { base: 'bg-[--ui-bg]' } } }],
['with ui', { props: { ui: { base: 'bg-[var(--ui-bg)]' } } }],
// Slots
['with status slot', { slots: { status: () => 'Status slot' } }]
])('renders %s correctly', async (nameOrHtml: string, options: { props?: ProgressProps, slots?: Partial<ProgressSlots> }) => {

2
test/components/Slideover.spec.ts
View File

@@ -17,7 +17,7 @@ describe('Slideover', () => {
['without transition', { props: { ...props, transition: false, title: 'Title', description: 'Description' } }],
['without close', { props: { ...props, close: false, title: 'Title', description: 'Description' } }],
['with closeIcon', { props: { ...props, closeIcon: 'i-heroicons-trash' } }],
['with class', { props: { ...props, class: 'bg-[--ui-bg-elevated]' } }],
['with class', { props: { ...props, class: 'bg-[var(--ui-bg-elevated)]' } }],
['with ui', { props: { ...props, ui: { close: 'right-2' } } }],
// Slots
['with default slot', { props, slots: { default: () => 'Default slot' } }],

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

@@ -22,7 +22,7 @@ describe('Slider', () => {
...sizes.map((size: string) => [`with size ${size}`, { props: { size } }]),
['with color neutral', { props: { color: 'neutral', defaultValue: 10 } }],
['with class', { props: { class: 'w-48' } }],
['with ui', { props: { ui: { track: 'bg-[--ui-bg-elevated]' } } }]
['with ui', { props: { ui: { track: 'bg-[var(--ui-bg-elevated)]' } } }]
])('renders %s correctly', async (nameOrHtml: string, options: { props?: SliderProps }) => {
const html = await ComponentRender(nameOrHtml, options, Slider)
expect(html).toMatchSnapshot()

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

@@ -38,7 +38,7 @@ describe('Tabs', () => {
...variants.map((variant: string) => [`with neutral variant ${variant}`, { props: { ...props, variant, color: 'neutral' } }]),
['without content', { props: { ...props, content: false } }],
['with class', { props: { ...props, class: 'w-96' } }],
['with ui', { props: { ...props, ui: { content: 'w-full ring ring-[--ui-border]' } } }],
['with ui', { props: { ...props, ui: { content: 'w-full ring ring-[var(--ui-border)]' } } }],
// Slots
['with leading slot', { props, slots: { leading: () => 'Leading slot' } }],
['with default slot', { props, slots: { default: () => 'Default slot' } }],

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

@@ -38,7 +38,7 @@ describe('Toast', () => {
['with closeIcon', { props: { ...props, closeIcon: 'i-heroicons-trash' } }],
['with type', { props: { ...props, type: 'background' as const } }],
['with color neutral', { props: { ...props, color: 'neutral' as const } }],
['with class', { props: { ...props, class: 'bg-[--ui-bg-elevated]/50' } }],
['with class', { props: { ...props, class: 'bg-[var(--ui-bg-elevated)]/50' } }],
['with ui', { props: { ...props, ui: { title: 'font-bold' } } }],
// Slots
['with leading slot', { props, slots: { leading: () => 'Leading slot' } }],

432
test/components/__snapshots__/Accordion.spec.ts.snap
View File

@@ -2,38 +2,38 @@
exports[`Accordion > renders with as correctly 1`] = `
"<section class="w-full">
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-1">
<!---->
</div>
</div>
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-3">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-5">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-7">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-9">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-11">
<!---->
</div>
@@ -43,38 +43,38 @@ exports[`Accordion > renders with as correctly 1`] = `
exports[`Accordion > renders with body slot correctly 1`] = `
"<div class="w-full">
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-1">
<!---->
</div>
</div>
<div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" aria-labelledby="radix-vue-accordion-trigger-v-0-0-2" data-state="open" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-3">
<div class="text-sm pb-3.5">Body slot</div>
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-5">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-7">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-9">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-11">
<!---->
</div>
@@ -84,38 +84,38 @@ exports[`Accordion > renders with body slot correctly 1`] = `
exports[`Accordion > renders with class correctly 1`] = `
"<div class="w-96">
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-1">
<!---->
</div>
</div>
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-3">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-5">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-7">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-9">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-11">
<!---->
</div>
@@ -125,38 +125,38 @@ exports[`Accordion > renders with class correctly 1`] = `
exports[`Accordion > renders with collapsible correctly 1`] = `
"<div class="w-full">
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-1">
<!---->
</div>
</div>
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-3">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-5">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-7">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-9">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-11">
<!---->
</div>
@@ -166,36 +166,36 @@ exports[`Accordion > renders with collapsible correctly 1`] = `
exports[`Accordion > renders with content slot correctly 1`] = `
"<div class="w-full">
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-1">
<!---->
</div>
</div>
<div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" aria-labelledby="radix-vue-accordion-trigger-v-0-0-2" data-state="open" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-3">Content slot</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-5">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-7">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-9">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-11">
<!---->
</div>
@@ -205,38 +205,38 @@ exports[`Accordion > renders with content slot correctly 1`] = `
exports[`Accordion > renders with custom body slot correctly 1`] = `
"<div class="w-full">
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-1">
<!---->
</div>
</div>
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-3">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-5">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-7">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-9">
<!---->
</div>
</div>
<div data-state="open" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="open" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="open" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="open" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" aria-labelledby="radix-vue-accordion-trigger-v-0-0-10" data-state="open" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-11">
<div class="text-sm pb-3.5">Custom body slot</div>
</div>
@@ -246,38 +246,38 @@ exports[`Accordion > renders with custom body slot correctly 1`] = `
exports[`Accordion > renders with custom slot correctly 1`] = `
"<div class="w-full">
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-1">
<!---->
</div>
</div>
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-3">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-5">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-7">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-9">
<!---->
</div>
</div>
<div data-state="open" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="open" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="open" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="open" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" aria-labelledby="radix-vue-accordion-trigger-v-0-0-10" data-state="open" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-11">Custom slot</div>
</div>
</div>"
@@ -285,38 +285,38 @@ exports[`Accordion > renders with custom slot correctly 1`] = `
exports[`Accordion > renders with default slot correctly 1`] = `
"<div class="w-full">
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Default slot</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Default slot</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-1">
<!---->
</div>
</div>
<div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Default slot</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Default slot</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" aria-labelledby="radix-vue-accordion-trigger-v-0-0-2" data-state="open" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-3">
<div class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Default slot</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Default slot</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-5">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Default slot</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Default slot</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-7">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Default slot</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Default slot</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-9">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Default slot</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Default slot</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-11">
<!---->
</div>
@@ -326,38 +326,38 @@ exports[`Accordion > renders with default slot correctly 1`] = `
exports[`Accordion > renders with defaultValue correctly 1`] = `
"<div class="w-full">
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-1">
<!---->
</div>
</div>
<div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" aria-labelledby="radix-vue-accordion-trigger-v-0-0-2" data-state="open" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-3">
<div class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-5">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-7">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-9">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-11">
<!---->
</div>
@@ -367,38 +367,38 @@ exports[`Accordion > renders with defaultValue correctly 1`] = `
exports[`Accordion > renders with disabled correctly 1`] = `
"<div class="w-full">
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-0" data-state="closed" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-1">
<!---->
</div>
</div>
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-3">
<!---->
</div>
</div>
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-4" data-state="closed" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-5">
<!---->
</div>
</div>
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-6" data-state="closed" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-7">
<!---->
</div>
</div>
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-8" data-state="closed" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-9">
<!---->
</div>
</div>
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-10" data-state="closed" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-11">
<!---->
</div>
@@ -408,38 +408,38 @@ exports[`Accordion > renders with disabled correctly 1`] = `
exports[`Accordion > renders with items correctly 1`] = `
"<div class="w-full">
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-1">
<!---->
</div>
</div>
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-3">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-5">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-7">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-9">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-11">
<!---->
</div>
@@ -449,38 +449,38 @@ exports[`Accordion > renders with items correctly 1`] = `
exports[`Accordion > renders with labelKey correctly 1`] = `
"<div class="w-full">
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">i-heroicons-information-circle</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">i-heroicons-information-circle</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-1">
<!---->
</div>
</div>
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">i-heroicons-arrow-down-tray</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">i-heroicons-arrow-down-tray</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-3">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">i-heroicons-eye-dropper</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">i-heroicons-eye-dropper</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-5">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">i-heroicons-rectangle-group</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">i-heroicons-rectangle-group</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-7">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">i-heroicons-square-3-stack-3d</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">i-heroicons-square-3-stack-3d</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-9">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">i-heroicons-wrench-screwdriver</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">i-heroicons-wrench-screwdriver</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-11">
<!---->
</div>
@@ -490,38 +490,38 @@ exports[`Accordion > renders with labelKey correctly 1`] = `
exports[`Accordion > renders with leading slot correctly 1`] = `
"<div class="w-full">
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0">Leading slot<span class="text-left break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0">Leading slot<span class="text-left break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-1">
<!---->
</div>
</div>
<div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0 cursor-not-allowed opacity-75">Leading slot<span class="text-left break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75">Leading slot<span class="text-left break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" aria-labelledby="radix-vue-accordion-trigger-v-0-0-2" data-state="open" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-3">
<div class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0">Leading slot<span class="text-left break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0">Leading slot<span class="text-left break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-5">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0">Leading slot<span class="text-left break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0">Leading slot<span class="text-left break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-7">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0">Leading slot<span class="text-left break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0">Leading slot<span class="text-left break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-9">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0">Leading slot<span class="text-left break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0">Leading slot<span class="text-left break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-11">
<!---->
</div>
@@ -531,38 +531,38 @@ exports[`Accordion > renders with leading slot correctly 1`] = `
exports[`Accordion > renders with modelValue correctly 1`] = `
"<div class="w-full">
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-1">
<!---->
</div>
</div>
<div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" aria-labelledby="radix-vue-accordion-trigger-v-0-0-2" data-state="open" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-3">
<div class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-5">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-7">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-9">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-11">
<!---->
</div>
@@ -572,38 +572,38 @@ exports[`Accordion > renders with modelValue correctly 1`] = `
exports[`Accordion > renders with trailing slot correctly 1`] = `
"<div class="w-full">
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Getting Started</span>Trailing slot</button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Getting Started</span>Trailing slot</button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-1">
<!---->
</div>
</div>
<div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Installation</span>Trailing slot</button></h3>
<div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Installation</span>Trailing slot</button></h3>
<div role="region" aria-labelledby="radix-vue-accordion-trigger-v-0-0-2" data-state="open" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-3">
<div class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Theming</span>Trailing slot</button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Theming</span>Trailing slot</button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-5">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Layouts</span>Trailing slot</button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Layouts</span>Trailing slot</button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-7">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Components</span>Trailing slot</button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Components</span>Trailing slot</button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-9">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Utilities</span>Trailing slot</button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Utilities</span>Trailing slot</button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-11">
<!---->
</div>
@@ -613,38 +613,38 @@ exports[`Accordion > renders with trailing slot correctly 1`] = `
exports[`Accordion > renders with trailingIcon correctly 1`] = `
"<div class="w-full">
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Getting Started</span><span class="iconify i-heroicons:plus shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Getting Started</span><span class="iconify i-heroicons:plus shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-1">
<!---->
</div>
</div>
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Installation</span><span class="iconify i-heroicons:plus shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Installation</span><span class="iconify i-heroicons:plus shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-3">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Theming</span><span class="iconify i-heroicons:plus shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Theming</span><span class="iconify i-heroicons:plus shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-5">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Layouts</span><span class="iconify i-heroicons:plus shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Layouts</span><span class="iconify i-heroicons:plus shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-7">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Components</span><span class="iconify i-heroicons:plus shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Components</span><span class="iconify i-heroicons:plus shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-9">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-11">
<!---->
</div>
@@ -654,38 +654,38 @@ exports[`Accordion > renders with trailingIcon correctly 1`] = `
exports[`Accordion > renders with type correctly 1`] = `
"<div class="w-full">
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-1">
<!---->
</div>
</div>
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-3">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-5">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-7">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-9">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-11">
<!---->
</div>
@@ -695,38 +695,38 @@ exports[`Accordion > renders with type correctly 1`] = `
exports[`Accordion > renders with ui correctly 1`] = `
"<div class="w-full">
<div data-state="closed" data-orientation="vertical" class="border-b last:border-b-0 border-[--ui-border-accented]">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b last:border-b-0 border-[var(--ui-border-accented)]">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-1">
<!---->
</div>
</div>
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b last:border-b-0 border-[--ui-border-accented]">
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b last:border-b-0 border-[var(--ui-border-accented)]">
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-3">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b last:border-b-0 border-[--ui-border-accented]">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b last:border-b-0 border-[var(--ui-border-accented)]">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-5">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b last:border-b-0 border-[--ui-border-accented]">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b last:border-b-0 border-[var(--ui-border-accented)]">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-7">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b last:border-b-0 border-[--ui-border-accented]">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b last:border-b-0 border-[var(--ui-border-accented)]">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-9">
<!---->
</div>
</div>
<div data-state="closed" data-orientation="vertical" class="border-b last:border-b-0 border-[--ui-border-accented]">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[--ui-primary] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div data-state="closed" data-orientation="vertical" class="border-b last:border-b-0 border-[var(--ui-border-accented)]">
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-11">
<!---->
</div>

46
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-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[--ui-primary] text-[--ui-bg]">
"<article class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)] text-[var(--ui-bg)]">
<!--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-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[--ui-primary] text-[--ui-bg]"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] 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-[--ui-text-muted] truncate"></span></span>
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)] text-[var(--ui-bg)]"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] 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-[var(--ui-text-muted)] 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-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[--ui-primary] text-[--ui-bg] w-48">
"<div class="relative overflow-hidden rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)] text-[var(--ui-bg)] 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-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[--ui-primary] text-[--ui-bg]">
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)] text-[var(--ui-bg)]">
<!--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-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[--ui-text-muted] hover:text-[--ui-text] disabled:text-[--ui-text-muted] aria-disabled:text-[--ui-text-muted] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[--ui-border-inverted] p-0.5"><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-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] 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-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[--ui-primary] text-[--ui-bg]">
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)] text-[var(--ui-bg)]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
@@ -63,14 +63,14 @@ exports[`Alert > renders with close slot correctly 1`] = `
`;
exports[`Alert > renders with closeIcon correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[--ui-primary] text-[--ui-bg]">
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)] text-[var(--ui-bg)]">
<!--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-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[--ui-text-muted] hover:text-[--ui-text] disabled:text-[--ui-text-muted] aria-disabled:text-[--ui-text-muted] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[--ui-border-inverted] p-0.5"><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-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0.5"><span class="iconify i-heroicons:trash shrink-0 size-5" aria-hidden="true"></span>
<!--v-if-->
<!--v-if-->
</button></div>
@@ -78,7 +78,7 @@ exports[`Alert > renders with closeIcon correctly 1`] = `
`;
exports[`Alert > renders with description correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[--ui-primary] text-[--ui-bg]">
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
@@ -90,7 +90,7 @@ exports[`Alert > renders with description correctly 1`] = `
`;
exports[`Alert > renders with description slot correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[--ui-primary] text-[--ui-bg]">
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)] text-[var(--ui-bg)]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
@@ -102,7 +102,7 @@ exports[`Alert > renders with description slot correctly 1`] = `
`;
exports[`Alert > renders with icon correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[--ui-primary] text-[--ui-bg]"><span class="iconify i-heroicons:light-bulb shrink-0 size-5" aria-hidden="true"></span>
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)] text-[var(--ui-bg)]"><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-->
@@ -113,7 +113,7 @@ exports[`Alert > renders with icon correctly 1`] = `
`;
exports[`Alert > renders with leading slot correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[--ui-primary] text-[--ui-bg]">
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)] text-[var(--ui-bg)]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Leading slot</div>
@@ -125,7 +125,7 @@ exports[`Alert > renders with leading slot correctly 1`] = `
`;
exports[`Alert > renders with neutral variant outline correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border]">
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border)]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
@@ -137,7 +137,7 @@ exports[`Alert > renders with neutral variant outline correctly 1`] = `
`;
exports[`Alert > renders with neutral variant soft correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center text-[--ui-text-highlighted] bg-[--ui-bg-elevated]/50">
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)]/50">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
@@ -149,7 +149,7 @@ exports[`Alert > renders with neutral variant soft correctly 1`] = `
`;
exports[`Alert > renders with neutral variant solid correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center text-[--ui-bg] bg-[--ui-bg-inverted]">
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center text-[var(--ui-bg)] bg-[var(--ui-bg-inverted)]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
@@ -161,7 +161,7 @@ exports[`Alert > renders with neutral variant solid correctly 1`] = `
`;
exports[`Alert > renders with neutral variant subtle correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center text-[--ui-text-highlighted] bg-[--ui-bg-elevated]/50 ring ring-inset ring-[--ui-border-accented]">
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)]/50 ring ring-inset ring-[var(--ui-border-accented)]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
@@ -173,7 +173,7 @@ exports[`Alert > renders with neutral variant subtle correctly 1`] = `
`;
exports[`Alert > renders with primary variant outline correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center text-[--ui-primary] ring ring-inset ring-[--ui-primary]/25">
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
@@ -185,7 +185,7 @@ exports[`Alert > renders with primary variant outline correctly 1`] = `
`;
exports[`Alert > renders with primary variant soft correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[--ui-primary]/10 text-[--ui-primary]">
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)]/10 text-[var(--ui-primary)]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
@@ -197,7 +197,7 @@ exports[`Alert > renders with primary variant soft correctly 1`] = `
`;
exports[`Alert > renders with primary variant solid correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[--ui-primary] text-[--ui-bg]">
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)] text-[var(--ui-bg)]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
@@ -209,7 +209,7 @@ exports[`Alert > renders with primary variant solid correctly 1`] = `
`;
exports[`Alert > renders with primary variant subtle correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[--ui-primary]/10 text-[--ui-primary] ring ring-inset ring-[--ui-primary]/25">
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)]/10 text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
@@ -221,7 +221,7 @@ exports[`Alert > renders with primary variant subtle correctly 1`] = `
`;
exports[`Alert > renders with title correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[--ui-primary] text-[--ui-bg]">
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)] text-[var(--ui-bg)]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
@@ -233,7 +233,7 @@ exports[`Alert > renders with title correctly 1`] = `
`;
exports[`Alert > renders with title slot correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[--ui-primary] text-[--ui-bg]">
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)] text-[var(--ui-bg)]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Title slot</div>
@@ -245,7 +245,7 @@ exports[`Alert > renders with title slot correctly 1`] = `
`;
exports[`Alert > renders with ui correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[--ui-primary] text-[--ui-bg]">
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)] text-[var(--ui-bg)]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-bold">Alert</div>

30
test/components/__snapshots__/Avatar.spec.ts.snap
View File

@@ -1,31 +1,31 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Avatar > renders with alt correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-8 text-base"><!--v-if--><span class="font-medium leading-none text-[--ui-text-muted] truncate">BC</span></span>"`;
exports[`Avatar > renders with alt correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-8 text-base"><!--v-if--><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">BC</span></span>"`;
exports[`Avatar > renders with class correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle size-8 text-base bg-[--ui-bg]"><!--v-if--><span class="font-medium leading-none text-[--ui-text-muted] truncate"></span></span>"`;
exports[`Avatar > renders with class correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle size-8 text-base bg-[var(--ui-bg)]"><!--v-if--><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"></span></span>"`;
exports[`Avatar > renders with icon correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-8 text-base"><!--v-if--><span class="iconify i-heroicons:photo text-[--ui-text-muted] shrink-0" aria-hidden="true"></span></span>"`;
exports[`Avatar > renders with icon correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-8 text-base"><!--v-if--><span class="iconify i-heroicons:photo text-[var(--ui-text-muted)] shrink-0" aria-hidden="true"></span></span>"`;
exports[`Avatar > renders with size 2xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-11 text-[22px]"><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-[--ui-text-muted] truncate"></span></span>"`;
exports[`Avatar > renders with size 2xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-11 text-[22px]"><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-[var(--ui-text-muted)] truncate"></span></span>"`;
exports[`Avatar > renders with size 2xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-5 text-[10px]"><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-[--ui-text-muted] truncate"></span></span>"`;
exports[`Avatar > renders with size 2xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px]"><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-[var(--ui-text-muted)] truncate"></span></span>"`;
exports[`Avatar > renders with size 3xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-12 text-2xl"><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-[--ui-text-muted] truncate"></span></span>"`;
exports[`Avatar > renders with size 3xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-12 text-2xl"><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-[var(--ui-text-muted)] truncate"></span></span>"`;
exports[`Avatar > renders with size 3xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-4 text-[8px]"><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-[--ui-text-muted] truncate"></span></span>"`;
exports[`Avatar > renders with size 3xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-4 text-[8px]"><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-[var(--ui-text-muted)] truncate"></span></span>"`;
exports[`Avatar > renders with size lg correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-9 text-lg"><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-[--ui-text-muted] truncate"></span></span>"`;
exports[`Avatar > renders with size lg correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-9 text-lg"><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-[var(--ui-text-muted)] truncate"></span></span>"`;
exports[`Avatar > renders with size md correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-8 text-base"><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-[--ui-text-muted] truncate"></span></span>"`;
exports[`Avatar > renders with size md correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-8 text-base"><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-[var(--ui-text-muted)] truncate"></span></span>"`;
exports[`Avatar > renders with size sm correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-7 text-sm"><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-[--ui-text-muted] truncate"></span></span>"`;
exports[`Avatar > renders with size sm correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-7 text-sm"><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-[var(--ui-text-muted)] truncate"></span></span>"`;
exports[`Avatar > renders with size xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-10 text-xl"><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-[--ui-text-muted] truncate"></span></span>"`;
exports[`Avatar > renders with size xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-10 text-xl"><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-[var(--ui-text-muted)] truncate"></span></span>"`;
exports[`Avatar > renders with size xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-6 text-xs"><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-[--ui-text-muted] truncate"></span></span>"`;
exports[`Avatar > renders with size xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-6 text-xs"><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-[var(--ui-text-muted)] truncate"></span></span>"`;
exports[`Avatar > renders with src correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-8 text-base"><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-[--ui-text-muted] truncate"></span></span>"`;
exports[`Avatar > renders with src correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-8 text-base"><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-[var(--ui-text-muted)] truncate"></span></span>"`;
exports[`Avatar > renders with text correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-8 text-base"><!--v-if--><span class="font-medium leading-none text-[--ui-text-muted] truncate">+1</span></span>"`;
exports[`Avatar > renders with text correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-8 text-base"><!--v-if--><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">+1</span></span>"`;
exports[`Avatar > renders with ui correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] size-8 text-base"><!--v-if--><span class="leading-none text-[--ui-text-muted] truncate font-bold"></span></span>"`;
exports[`Avatar > renders with ui correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-8 text-base"><!--v-if--><span class="leading-none text-[var(--ui-text-muted)] truncate font-bold"></span></span>"`;

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

@@ -1,77 +1,77 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`AvatarGroup > renders with as correctly 1`] = `"<span class="inline-flex flex-row-reverse justify-end"><!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[--ui-bg-elevated] size-8 text-base relative rounded-full ring-[--ui-bg] first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[--ui-bg-elevated] size-8 text-base relative rounded-full ring-[--ui-bg] first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[--ui-bg-elevated] size-8 text-base relative rounded-full ring-[--ui-bg] first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate">BC</span></span></span>"`;
exports[`AvatarGroup > renders with as correctly 1`] = `"<span class="inline-flex flex-row-reverse justify-end"><!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-8 text-base relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-8 text-base relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-8 text-base relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">BC</span></span></span>"`;
exports[`AvatarGroup > renders with class correctly 1`] = `
"<div class="inline-flex flex-row-reverse justify-start">
<!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[--ui-bg-elevated] size-8 text-base relative rounded-full ring-[--ui-bg] first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[--ui-bg-elevated] size-8 text-base relative rounded-full ring-[--ui-bg] first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[--ui-bg-elevated] size-8 text-base relative rounded-full ring-[--ui-bg] first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate">BC</span></span>
<!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-8 text-base relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-8 text-base relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-8 text-base relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">BC</span></span>
</div>"
`;
exports[`AvatarGroup > renders with default slot correctly 1`] = `
"<div class="inline-flex flex-row-reverse justify-end">
<!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[--ui-bg-elevated] size-8 text-base relative rounded-full ring-[--ui-bg] first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[--ui-bg-elevated] size-8 text-base relative rounded-full ring-[--ui-bg] first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[--ui-bg-elevated] size-8 text-base relative rounded-full ring-[--ui-bg] first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate">BC</span></span>
<!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-8 text-base relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-8 text-base relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-8 text-base relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">BC</span></span>
</div>"
`;
exports[`AvatarGroup > renders with max correctly 1`] = `"<div class="inline-flex flex-row-reverse justify-end"><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[--ui-bg-elevated] size-8 text-base relative rounded-full ring-[--ui-bg] first:me-0 ring-2 -me-1.5"><!--v-if--><span class="font-medium leading-none text-[--ui-text-muted] truncate">+1</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[--ui-bg-elevated] size-8 text-base relative rounded-full ring-[--ui-bg] first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[--ui-bg-elevated] size-8 text-base relative rounded-full ring-[--ui-bg] first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate">BC</span></span></div>"`;
exports[`AvatarGroup > renders with max correctly 1`] = `"<div class="inline-flex flex-row-reverse justify-end"><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-8 text-base relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-2 -me-1.5"><!--v-if--><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">+1</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-8 text-base relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-8 text-base relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">BC</span></span></div>"`;
exports[`AvatarGroup > renders with size 2xl correctly 1`] = `
"<div class="inline-flex flex-row-reverse justify-end">
<!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[--ui-bg-elevated] size-11 text-[22px] relative rounded-full ring-[--ui-bg] first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[--ui-bg-elevated] size-11 text-[22px] relative rounded-full ring-[--ui-bg] first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[--ui-bg-elevated] size-11 text-[22px] relative rounded-full ring-[--ui-bg] first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate">BC</span></span>
<!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-11 text-[22px] relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-11 text-[22px] relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-11 text-[22px] relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">BC</span></span>
</div>"
`;
exports[`AvatarGroup > renders with size 2xs correctly 1`] = `
"<div class="inline-flex flex-row-reverse justify-end">
<!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[--ui-bg-elevated] size-5 text-[10px] relative rounded-full ring-[--ui-bg] first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[--ui-bg-elevated] size-5 text-[10px] relative rounded-full ring-[--ui-bg] first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[--ui-bg-elevated] size-5 text-[10px] relative rounded-full ring-[--ui-bg] first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate">BC</span></span>
<!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">BC</span></span>
</div>"
`;
exports[`AvatarGroup > renders with size 3xl correctly 1`] = `
"<div class="inline-flex flex-row-reverse justify-end">
<!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[--ui-bg-elevated] size-12 text-2xl relative rounded-full ring-[--ui-bg] first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[--ui-bg-elevated] size-12 text-2xl relative rounded-full ring-[--ui-bg] first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[--ui-bg-elevated] size-12 text-2xl relative rounded-full ring-[--ui-bg] first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate">BC</span></span>
<!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-12 text-2xl relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-12 text-2xl relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-12 text-2xl relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">BC</span></span>
</div>"
`;
exports[`AvatarGroup > renders with size 3xs correctly 1`] = `
"<div class="inline-flex flex-row-reverse justify-end">
<!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[--ui-bg-elevated] size-4 text-[8px] relative rounded-full ring-[--ui-bg] first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[--ui-bg-elevated] size-4 text-[8px] relative rounded-full ring-[--ui-bg] first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[--ui-bg-elevated] size-4 text-[8px] relative rounded-full ring-[--ui-bg] first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate">BC</span></span>
<!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-4 text-[8px] relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-4 text-[8px] relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-4 text-[8px] relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">BC</span></span>
</div>"
`;
exports[`AvatarGroup > renders with size lg correctly 1`] = `
"<div class="inline-flex flex-row-reverse justify-end">
<!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[--ui-bg-elevated] size-9 text-lg relative rounded-full ring-[--ui-bg] first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[--ui-bg-elevated] size-9 text-lg relative rounded-full ring-[--ui-bg] first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[--ui-bg-elevated] size-9 text-lg relative rounded-full ring-[--ui-bg] first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate">BC</span></span>
<!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-9 text-lg relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-9 text-lg relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-9 text-lg relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">BC</span></span>
</div>"
`;
exports[`AvatarGroup > renders with size md correctly 1`] = `
"<div class="inline-flex flex-row-reverse justify-end">
<!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[--ui-bg-elevated] size-8 text-base relative rounded-full ring-[--ui-bg] first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[--ui-bg-elevated] size-8 text-base relative rounded-full ring-[--ui-bg] first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[--ui-bg-elevated] size-8 text-base relative rounded-full ring-[--ui-bg] first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate">BC</span></span>
<!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-8 text-base relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-8 text-base relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-8 text-base relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">BC</span></span>
</div>"
`;
exports[`AvatarGroup > renders with size sm correctly 1`] = `
"<div class="inline-flex flex-row-reverse justify-end">
<!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[--ui-bg-elevated] size-7 text-sm relative rounded-full ring-[--ui-bg] first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[--ui-bg-elevated] size-7 text-sm relative rounded-full ring-[--ui-bg] first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[--ui-bg-elevated] size-7 text-sm relative rounded-full ring-[--ui-bg] first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate">BC</span></span>
<!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-7 text-sm relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-7 text-sm relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-7 text-sm relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">BC</span></span>
</div>"
`;
exports[`AvatarGroup > renders with size xl correctly 1`] = `
"<div class="inline-flex flex-row-reverse justify-end">
<!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[--ui-bg-elevated] size-10 text-xl relative rounded-full ring-[--ui-bg] first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[--ui-bg-elevated] size-10 text-xl relative rounded-full ring-[--ui-bg] first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[--ui-bg-elevated] size-10 text-xl relative rounded-full ring-[--ui-bg] first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate">BC</span></span>
<!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-10 text-xl relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-10 text-xl relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-10 text-xl relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">BC</span></span>
</div>"
`;
exports[`AvatarGroup > renders with size xs correctly 1`] = `
"<div class="inline-flex flex-row-reverse justify-end">
<!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[--ui-bg-elevated] size-6 text-xs relative rounded-full ring-[--ui-bg] first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[--ui-bg-elevated] size-6 text-xs relative rounded-full ring-[--ui-bg] first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[--ui-bg-elevated] size-6 text-xs relative rounded-full ring-[--ui-bg] first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate">BC</span></span>
<!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-6 text-xs relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-6 text-xs relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-6 text-xs relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">BC</span></span>
</div>"
`;
exports[`AvatarGroup > renders with ui correctly 1`] = `
"<div class="inline-flex flex-row-reverse justify-end">
<!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[--ui-bg-elevated] size-8 text-base relative ring-[--ui-bg] first:me-0 ring-2 -me-1.5 rounded-lg"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[--ui-bg-elevated] size-8 text-base relative ring-[--ui-bg] first:me-0 ring-2 -me-1.5 rounded-lg"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[--ui-bg-elevated] size-8 text-base relative ring-[--ui-bg] first:me-0 ring-2 -me-1.5 rounded-lg"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[--ui-text-muted] truncate">BC</span></span>
<!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-8 text-base relative ring-[var(--ui-bg)] first:me-0 ring-2 -me-1.5 rounded-lg"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-8 text-base relative ring-[var(--ui-bg)] first:me-0 ring-2 -me-1.5 rounded-lg"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-8 text-base relative ring-[var(--ui-bg)] first:me-0 ring-2 -me-1.5 rounded-lg"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">BC</span></span>
</div>"
`;

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

@@ -1,31 +1,31 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Badge > renders with as correctly 1`] = `"<div class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 bg-[--ui-primary] text-[--ui-bg]">Badge</div>"`;
exports[`Badge > renders with as correctly 1`] = `"<div class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]">Badge</div>"`;
exports[`Badge > renders with class correctly 1`] = `"<span class="inline-flex items-center text-xs px-2 py-1 bg-[--ui-primary] text-[--ui-bg] rounded-full font-bold">Badge</span>"`;
exports[`Badge > renders with class correctly 1`] = `"<span class="inline-flex items-center text-xs px-2 py-1 bg-[var(--ui-primary)] text-[var(--ui-bg)] rounded-full font-bold">Badge</span>"`;
exports[`Badge > renders with default slot correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 bg-[--ui-primary] text-[--ui-bg]">Default slot</span>"`;
exports[`Badge > renders with default slot correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]">Default slot</span>"`;
exports[`Badge > renders with label correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 bg-[--ui-primary] text-[--ui-bg]">Badge</span>"`;
exports[`Badge > renders with label correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]">Badge</span>"`;
exports[`Badge > renders with neutral variant outline correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 ring ring-inset ring-[--ui-border-accented] text-[--ui-text] bg-[--ui-bg]">Badge</span>"`;
exports[`Badge > renders with neutral variant outline correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)]">Badge</span>"`;
exports[`Badge > renders with neutral variant soft correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 text-[--ui-text] bg-[--ui-bg-elevated]">Badge</span>"`;
exports[`Badge > renders with neutral variant soft correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 text-[var(--ui-text)] bg-[var(--ui-bg-elevated)]">Badge</span>"`;
exports[`Badge > renders with neutral variant solid correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 text-[--ui-bg] bg-[--ui-bg-inverted]">Badge</span>"`;
exports[`Badge > renders with neutral variant solid correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 text-[var(--ui-bg)] bg-[var(--ui-bg-inverted)]">Badge</span>"`;
exports[`Badge > renders with neutral variant subtle correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 ring ring-inset ring-[--ui-border-accented] text-[--ui-text] bg-[--ui-bg-elevated]">Badge</span>"`;
exports[`Badge > renders with neutral variant subtle correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg-elevated)]">Badge</span>"`;
exports[`Badge > renders with primary variant outline correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 text-[--ui-primary] ring ring-inset ring-[--ui-primary]/50">Badge</span>"`;
exports[`Badge > renders with primary variant outline correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/50">Badge</span>"`;
exports[`Badge > renders with primary variant soft correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 bg-[--ui-primary]/10 text-[--ui-primary]">Badge</span>"`;
exports[`Badge > renders with primary variant soft correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 bg-[var(--ui-primary)]/10 text-[var(--ui-primary)]">Badge</span>"`;
exports[`Badge > renders with primary variant solid correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 bg-[--ui-primary] text-[--ui-bg]">Badge</span>"`;
exports[`Badge > renders with primary variant solid correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]">Badge</span>"`;
exports[`Badge > renders with primary variant subtle correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 bg-[--ui-primary]/10 text-[--ui-primary] ring ring-inset ring-[--ui-primary]/25">Badge</span>"`;
exports[`Badge > renders with primary variant subtle correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 bg-[var(--ui-primary)]/10 text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25">Badge</span>"`;
exports[`Badge > renders with size lg correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-sm px-2 py-1 bg-[--ui-primary] text-[--ui-bg]">Badge</span>"`;
exports[`Badge > renders with size lg correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-sm px-2 py-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]">Badge</span>"`;
exports[`Badge > renders with size md correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 bg-[--ui-primary] text-[--ui-bg]">Badge</span>"`;
exports[`Badge > renders with size md correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]">Badge</span>"`;
exports[`Badge > renders with size sm correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-1.5 py-0.5 bg-[--ui-primary] text-[--ui-bg]">Badge</span>"`;
exports[`Badge > renders with size sm correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-1.5 py-0.5 bg-[var(--ui-primary)] text-[var(--ui-bg)]">Badge</span>"`;

106
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 focus-visible:outline-[--ui-primary] text-[--ui-text-muted] font-medium hover:text-[--ui-text] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] 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-[--ui-text-muted] 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-[--ui-text-muted]" 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 focus-visible:outline-[--ui-primary] text-[--ui-text-muted] font-medium cursor-not-allowed opacity-75"><span class="iconify i-heroicons:cube-transparent shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</span></span></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-[--ui-text-muted]" aria-hidden="true"></span></li>
<li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[--ui-primary] text-[--ui-primary] 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="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] 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-[var(--ui-text-muted)] 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-[var(--ui-text-muted)]" 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 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium cursor-not-allowed opacity-75"><span class="iconify i-heroicons:cube-transparent shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</span></span></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-[var(--ui-text-muted)]" aria-hidden="true"></span></li>
<li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] 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 focus-visible:outline-[--ui-primary] text-[--ui-text-muted] font-medium hover:text-[--ui-text] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] 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-[--ui-text-muted] 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-[--ui-text-muted]" 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 focus-visible:outline-[--ui-primary] text-[--ui-text-muted] font-medium cursor-not-allowed opacity-75"><span class="iconify i-heroicons:cube-transparent shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</span></span></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-[--ui-text-muted]" aria-hidden="true"></span></li>
<li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[--ui-primary] text-[--ui-primary] font-semibold">Custom 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-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] 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-[var(--ui-text-muted)] 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-[var(--ui-text-muted)]" 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 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium cursor-not-allowed opacity-75"><span class="iconify i-heroicons:cube-transparent shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</span></span></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-[var(--ui-text-muted)]" aria-hidden="true"></span></li>
<li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] 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 focus-visible:outline-[--ui-primary] text-[--ui-text-muted] font-medium hover:text-[--ui-text] 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-[--ui-text-muted]" 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 focus-visible:outline-[--ui-primary] text-[--ui-text-muted] 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-[--ui-text-muted]" aria-hidden="true"></span></li>
<li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[--ui-primary] text-[--ui-primary] 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="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] 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-[var(--ui-text-muted)]" 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 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] 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-[var(--ui-text-muted)]" aria-hidden="true"></span></li>
<li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] 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 focus-visible:outline-[--ui-primary] text-[--ui-text-muted] font-medium hover:text-[--ui-text] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] 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-[--ui-text-muted] 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-[--ui-text-muted]" 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 focus-visible:outline-[--ui-primary] text-[--ui-text-muted] font-medium cursor-not-allowed opacity-75"><span class="iconify i-heroicons:cube-transparent 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-[--ui-text-muted]" aria-hidden="true"></span></li>
<li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[--ui-primary] text-[--ui-primary] 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="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] 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-[var(--ui-text-muted)] 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-[var(--ui-text-muted)]" 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 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium cursor-not-allowed opacity-75"><span class="iconify i-heroicons:cube-transparent 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-[var(--ui-text-muted)]" aria-hidden="true"></span></li>
<li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] 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 focus-visible:outline-[--ui-primary] text-[--ui-text-muted] font-medium hover:text-[--ui-text] 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-[--ui-text-muted]" 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 focus-visible:outline-[--ui-primary] text-[--ui-text-muted] font-medium cursor-not-allowed opacity-75">Item leading slot<span class="truncate">Components</span></span></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-[--ui-text-muted]" aria-hidden="true"></span></li>
<li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[--ui-primary] text-[--ui-primary] 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="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] 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-[var(--ui-text-muted)]" 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 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium cursor-not-allowed opacity-75">Item leading slot<span class="truncate">Components</span></span></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-[var(--ui-text-muted)]" aria-hidden="true"></span></li>
<li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] 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 focus-visible:outline-[--ui-primary] text-[--ui-text-muted] font-medium hover:text-[--ui-text] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] 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-[--ui-text-muted] 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-[--ui-text-muted]" 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 focus-visible:outline-[--ui-primary] text-[--ui-text-muted] font-medium cursor-not-allowed opacity-75"><span class="iconify i-heroicons:cube-transparent shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</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-[--ui-text-muted]" aria-hidden="true"></span></li>
<li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[--ui-primary] text-[--ui-primary] 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="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] 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-[var(--ui-text-muted)] 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-[var(--ui-text-muted)]" 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 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium cursor-not-allowed opacity-75"><span class="iconify i-heroicons:cube-transparent shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</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-[var(--ui-text-muted)]" aria-hidden="true"></span></li>
<li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] 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 focus-visible:outline-[--ui-primary] text-[--ui-text-muted] font-medium hover:text-[--ui-text] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] 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-[--ui-text-muted] 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-[--ui-text-muted]" 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 focus-visible:outline-[--ui-primary] text-[--ui-text-muted] font-medium cursor-not-allowed opacity-75"><span class="iconify i-heroicons:cube-transparent shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</span></span></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-[--ui-text-muted]" aria-hidden="true"></span></li>
<li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[--ui-primary] text-[--ui-primary] 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="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] 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-[var(--ui-text-muted)] 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-[var(--ui-text-muted)]" 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 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium cursor-not-allowed opacity-75"><span class="iconify i-heroicons:cube-transparent shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</span></span></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-[var(--ui-text-muted)]" aria-hidden="true"></span></li>
<li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] 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,13 +94,13 @@ exports[`Breadcrumb > renders with items correctly 1`] = `
exports[`Breadcrumb > renders with labelKey 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 focus-visible:outline-[--ui-primary] text-[--ui-text-muted] font-medium hover:text-[--ui-text] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] 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-[--ui-text-muted] truncate"></span></span>
<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-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] 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-[var(--ui-text-muted)] truncate"></span></span>
<!--v-if-->
</a></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-[--ui-text-muted]" 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 focus-visible:outline-[--ui-primary] text-[--ui-text-muted] font-medium cursor-not-allowed opacity-75"><span class="iconify i-heroicons:cube-transparent shrink-0 size-5" aria-hidden="true"></span><span class="truncate">i-heroicons-cube-transparent</span></span></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-[--ui-text-muted]" aria-hidden="true"></span></li>
<li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[--ui-primary] text-[--ui-primary] font-semibold"><span class="iconify i-heroicons:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">i-heroicons-link</span></a></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-[var(--ui-text-muted)]" 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 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium cursor-not-allowed opacity-75"><span class="iconify i-heroicons:cube-transparent shrink-0 size-5" aria-hidden="true"></span><span class="truncate">i-heroicons-cube-transparent</span></span></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-[var(--ui-text-muted)]" aria-hidden="true"></span></li>
<li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold"><span class="iconify i-heroicons:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">i-heroicons-link</span></a></li>
<!--v-if-->
</ol>
</div>"
@@ -109,11 +109,11 @@ exports[`Breadcrumb > renders with labelKey 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 focus-visible:outline-[--ui-primary] text-[--ui-text-muted] font-medium hover:text-[--ui-text] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] 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-[--ui-text-muted] 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-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] 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-[var(--ui-text-muted)] 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 focus-visible:outline-[--ui-primary] text-[--ui-text-muted] font-medium cursor-not-allowed opacity-75"><span class="iconify i-heroicons:cube-transparent shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</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-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium cursor-not-allowed opacity-75"><span class="iconify i-heroicons:cube-transparent shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</span></span></li>
<li role="presentation" class="flex">/</li>
<li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[--ui-primary] text-[--ui-primary] 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="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] 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>"
@@ -122,11 +122,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 focus-visible:outline-[--ui-primary] text-[--ui-text-muted] font-medium hover:text-[--ui-text] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] 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-[--ui-text-muted] 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-[--ui-text-muted]" 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 focus-visible:outline-[--ui-primary] text-[--ui-text-muted] font-medium cursor-not-allowed opacity-75"><span class="iconify i-heroicons:cube-transparent shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</span></span></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:minus shrink-0 size-5 text-[--ui-text-muted]" aria-hidden="true"></span></li>
<li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[--ui-primary] text-[--ui-primary] 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="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] 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-[var(--ui-text-muted)] 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-[var(--ui-text-muted)]" 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 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium cursor-not-allowed opacity-75"><span class="iconify i-heroicons:cube-transparent shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</span></span></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:minus shrink-0 size-5 text-[var(--ui-text-muted)]" aria-hidden="true"></span></li>
<li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] 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>"
@@ -135,11 +135,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 focus-visible:outline-[--ui-primary] text-[--ui-text-muted] hover:text-[--ui-text] transition-colors font-bold"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[--ui-bg-elevated] 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-[--ui-text-muted] 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-[--ui-text-muted]" 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 focus-visible:outline-[--ui-primary] text-[--ui-text-muted] cursor-not-allowed opacity-75 font-bold"><span class="iconify i-heroicons:cube-transparent shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</span></span></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-[--ui-text-muted]" aria-hidden="true"></span></li>
<li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[--ui-primary] text-[--ui-primary] 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="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] transition-colors font-bold"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] 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-[var(--ui-text-muted)] 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-[var(--ui-text-muted)]" 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 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] cursor-not-allowed opacity-75 font-bold"><span class="iconify i-heroicons:cube-transparent shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</span></span></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-[var(--ui-text-muted)]" aria-hidden="true"></span></li>
<li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] 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>"

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

@@ -1,229 +1,229 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Button > renders with block correctly 1`] = `
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-[--ui-bg] bg-[--ui-primary] hover:bg-[--ui-primary]/75 disabled:bg-[--ui-primary] aria-disabled:bg-[--ui-primary] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary]">
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
<!--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 aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[--ui-bg] bg-[--ui-primary] hover:bg-[--ui-primary]/75 disabled:bg-[--ui-primary] aria-disabled:bg-[--ui-primary] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] p-1.5 rounded-full font-bold"></button>"`;
exports[`Button > renders with class correctly 1`] = `"<button type="button" class="inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] p-1.5 rounded-full font-bold"></button>"`;
exports[`Button > renders with default slot correctly 1`] = `
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-bg] bg-[--ui-primary] hover:bg-[--ui-primary]/75 disabled:bg-[--ui-primary] aria-disabled:bg-[--ui-primary] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary]">
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
<!--v-if-->Default slot
<!--v-if-->
</button>"
`;
exports[`Button > renders with disabled and with link correctly 1`] = `
"<a aria-disabled="true" role="link" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-bg] bg-[--ui-primary] hover:bg-[--ui-primary]/75 disabled:bg-[--ui-primary] aria-disabled:bg-[--ui-primary] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary]">
"<a aria-disabled="true" role="link" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
<!--v-if--><span class="truncate">Button</span>
<!--v-if-->
</a>"
`;
exports[`Button > renders with disabled correctly 1`] = `
"<button type="button" disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-bg] bg-[--ui-primary] hover:bg-[--ui-primary]/75 disabled:bg-[--ui-primary] aria-disabled:bg-[--ui-primary] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary]">
"<button type="button" disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
<!--v-if--><span class="truncate">Button</span>
<!--v-if-->
</button>"
`;
exports[`Button > renders with icon correctly 1`] = `
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[--ui-bg] bg-[--ui-primary] hover:bg-[--ui-primary]/75 disabled:bg-[--ui-primary] aria-disabled:bg-[--ui-primary] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] p-1.5"><span class="iconify i-heroicons:rocket-launch shrink-0 size-5" aria-hidden="true"></span>
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] 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-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-bg] bg-[--ui-primary] hover:bg-[--ui-primary]/75 disabled:bg-[--ui-primary] aria-disabled:bg-[--ui-primary] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary]">
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
<!--v-if--><span class="truncate">Button</span>
<!--v-if-->
</button>"
`;
exports[`Button > renders with leading and icon correctly 1`] = `
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[--ui-bg] bg-[--ui-primary] hover:bg-[--ui-primary]/75 disabled:bg-[--ui-primary] aria-disabled:bg-[--ui-primary] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] p-1.5"><span class="iconify i-heroicons:arrow-left shrink-0 size-5" aria-hidden="true"></span>
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] 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-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[--ui-bg] bg-[--ui-primary] hover:bg-[--ui-primary]/75 disabled:bg-[--ui-primary] aria-disabled:bg-[--ui-primary] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] p-1.5">Leading slot
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] p-1.5">Leading slot
<!--v-if-->
<!--v-if-->
</button>"
`;
exports[`Button > renders with leadingIcon correctly 1`] = `
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[--ui-bg] bg-[--ui-primary] hover:bg-[--ui-primary]/75 disabled:bg-[--ui-primary] aria-disabled:bg-[--ui-primary] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] p-1.5"><span class="iconify i-heroicons:arrow-left shrink-0 size-5" aria-hidden="true"></span>
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] 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-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[--ui-bg] bg-[--ui-primary] hover:bg-[--ui-primary]/75 disabled:bg-[--ui-primary] aria-disabled:bg-[--ui-primary] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] 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-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] 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-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[--ui-bg] bg-[--ui-primary] hover:bg-[--ui-primary]/75 disabled:bg-[--ui-primary] aria-disabled:bg-[--ui-primary] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] 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-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] 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 neutral variant ghost correctly 1`] = `
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text] hover:bg-[--ui-bg-elevated] focus-visible:bg-[--ui-bg-elevated] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
<!--v-if--><span class="truncate">Button</span>
<!--v-if-->
</button>"
`;
exports[`Button > renders with neutral variant link correctly 1`] = `
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text-muted] hover:text-[--ui-text] disabled:text-[--ui-text-muted] aria-disabled:text-[--ui-text-muted] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[--ui-border-inverted]">
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)]">
<!--v-if--><span class="truncate">Button</span>
<!--v-if-->
</button>"
`;
exports[`Button > renders with neutral variant outline correctly 1`] = `
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-[--ui-border-accented] text-[--ui-text] bg-[--ui-bg] hover:bg-[--ui-bg-elevated] disabled:bg-[--ui-bg] aria-disabled:bg-[--ui-bg] focus-visible:ring-2 focus-visible:ring-[--ui-border-inverted]">
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] hover:bg-[var(--ui-bg-elevated)] disabled:bg-[var(--ui-bg)] aria-disabled:bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)]">
<!--v-if--><span class="truncate">Button</span>
<!--v-if-->
</button>"
`;
exports[`Button > renders with neutral variant soft correctly 1`] = `
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-text] bg-[--ui-bg-elevated] hover:bg-[--ui-bg-accented]/75 focus-visible:bg-[--ui-bg-accented]/75 disabled:bg-[--ui-bg-elevated] aria-disabled:bg-[--ui-bg-elevated]">
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text)] bg-[var(--ui-bg-elevated)] hover:bg-[var(--ui-bg-accented)]/75 focus-visible:bg-[var(--ui-bg-accented)]/75 disabled:bg-[var(--ui-bg-elevated)] aria-disabled:bg-[var(--ui-bg-elevated)]">
<!--v-if--><span class="truncate">Button</span>
<!--v-if-->
</button>"
`;
exports[`Button > renders with neutral variant solid correctly 1`] = `
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-bg] bg-[--ui-bg-inverted] hover:bg-[--ui-bg-inverted]/80 disabled:bg-[--ui-bg-inverted] aria-disabled:bg-[--ui-bg-inverted] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-border-inverted]">
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-bg-inverted)] hover:bg-[var(--ui-bg-inverted)]/80 disabled:bg-[var(--ui-bg-inverted)] aria-disabled:bg-[var(--ui-bg-inverted)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-border-inverted)]">
<!--v-if--><span class="truncate">Button</span>
<!--v-if-->
</button>"
`;
exports[`Button > renders with neutral variant subtle correctly 1`] = `
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-[--ui-border-accented] text-[--ui-text] bg-[--ui-bg-elevated] hover:bg-[--ui-bg-accented]/75 disabled:bg-[--ui-bg-elevated] aria-disabled:bg-[--ui-bg-elevated] focus-visible:ring-2 focus-visible:ring-[--ui-border-inverted]">
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg-elevated)] hover:bg-[var(--ui-bg-accented)]/75 disabled:bg-[var(--ui-bg-elevated)] aria-disabled:bg-[var(--ui-bg-elevated)] focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)]">
<!--v-if--><span class="truncate">Button</span>
<!--v-if-->
</button>"
`;
exports[`Button > renders with primary variant ghost correctly 1`] = `
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-primary] hover:bg-[--ui-primary]/10 focus-visible:bg-[--ui-primary]/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent">
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/10 focus-visible:bg-[var(--ui-primary)]/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent">
<!--v-if--><span class="truncate">Button</span>
<!--v-if-->
</button>"
`;
exports[`Button > renders with primary variant link correctly 1`] = `
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-primary] hover:text-[--ui-primary] disabled:text-[--ui-primary] aria-disabled:text-[--ui-primary] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]">
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-primary)] hover:text-[var(--ui-primary)] disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]">
<!--v-if--><span class="truncate">Button</span>
<!--v-if-->
</button>"
`;
exports[`Button > renders with primary variant outline correctly 1`] = `
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-[--ui-primary]/50 text-[--ui-primary] hover:bg-[--ui-primary]/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-[--ui-primary]">
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-[var(--ui-primary)]/50 text-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)]">
<!--v-if--><span class="truncate">Button</span>
<!--v-if-->
</button>"
`;
exports[`Button > renders with primary variant soft correctly 1`] = `
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-primary] bg-[--ui-primary]/10 hover:bg-[--ui-primary]/15 focus-visible:bg-[--ui-primary]/15 disabled:bg-[--ui-primary]/10 aria-disabled:bg-[--ui-primary]/10">
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-primary)] bg-[var(--ui-primary)]/10 hover:bg-[var(--ui-primary)]/15 focus-visible:bg-[var(--ui-primary)]/15 disabled:bg-[var(--ui-primary)]/10 aria-disabled:bg-[var(--ui-primary)]/10">
<!--v-if--><span class="truncate">Button</span>
<!--v-if-->
</button>"
`;
exports[`Button > renders with primary variant solid correctly 1`] = `
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-bg] bg-[--ui-primary] hover:bg-[--ui-primary]/75 disabled:bg-[--ui-primary] aria-disabled:bg-[--ui-primary] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary]">
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
<!--v-if--><span class="truncate">Button</span>
<!--v-if-->
</button>"
`;
exports[`Button > renders with primary variant subtle correctly 1`] = `
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-primary] ring ring-inset ring-[--ui-primary]/25 bg-[--ui-primary]/10 hover:bg-[--ui-primary]/15 disabled:bg-[--ui-primary]/10 aria-disabled:bg-[--ui-primary]/10 focus-visible:ring-2 focus-visible:ring-[--ui-primary]">
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25 bg-[var(--ui-primary)]/10 hover:bg-[var(--ui-primary)]/15 disabled:bg-[var(--ui-primary)]/10 aria-disabled:bg-[var(--ui-primary)]/10 focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)]">
<!--v-if--><span class="truncate">Button</span>
<!--v-if-->
</button>"
`;
exports[`Button > renders with size lg correctly 1`] = `
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-[--ui-bg] bg-[--ui-primary] hover:bg-[--ui-primary]/75 disabled:bg-[--ui-primary] aria-disabled:bg-[--ui-primary] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary]">
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
<!--v-if--><span class="truncate">Button</span>
<!--v-if-->
</button>"
`;
exports[`Button > renders with size md correctly 1`] = `
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[--ui-bg] bg-[--ui-primary] hover:bg-[--ui-primary]/75 disabled:bg-[--ui-primary] aria-disabled:bg-[--ui-primary] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary]">
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
<!--v-if--><span class="truncate">Button</span>
<!--v-if-->
</button>"
`;
exports[`Button > renders with size sm correctly 1`] = `
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-[--ui-bg] bg-[--ui-primary] hover:bg-[--ui-primary]/75 disabled:bg-[--ui-primary] aria-disabled:bg-[--ui-primary] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary]">
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
<!--v-if--><span class="truncate">Button</span>
<!--v-if-->
</button>"
`;
exports[`Button > renders with size xl correctly 1`] = `
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-[--ui-bg] bg-[--ui-primary] hover:bg-[--ui-primary]/75 disabled:bg-[--ui-primary] aria-disabled:bg-[--ui-primary] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary]">
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
<!--v-if--><span class="truncate">Button</span>
<!--v-if-->
</button>"
`;
exports[`Button > renders with size xs correctly 1`] = `
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-[--ui-bg] bg-[--ui-primary] hover:bg-[--ui-primary]/75 disabled:bg-[--ui-primary] aria-disabled:bg-[--ui-primary] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary]">
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
<!--v-if--><span class="truncate">Button</span>
<!--v-if-->
</button>"
`;
exports[`Button > renders with square correctly 1`] = `
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[--ui-bg] bg-[--ui-primary] hover:bg-[--ui-primary]/75 disabled:bg-[--ui-primary] aria-disabled:bg-[--ui-primary] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] p-1.5">
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] 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-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[--ui-bg] bg-[--ui-primary] hover:bg-[--ui-primary]/75 disabled:bg-[--ui-primary] aria-disabled:bg-[--ui-primary] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] p-1.5">
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] 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-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[--ui-bg] bg-[--ui-primary] hover:bg-[--ui-primary]/75 disabled:bg-[--ui-primary] aria-disabled:bg-[--ui-primary] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] p-1.5">
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] p-1.5">
<!--v-if-->
<!--v-if-->Trailing slot
</button>"
`;
exports[`Button > renders with trailingIcon correctly 1`] = `
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[--ui-bg] bg-[--ui-primary] hover:bg-[--ui-primary]/75 disabled:bg-[--ui-primary] aria-disabled:bg-[--ui-primary] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] p-1.5">
"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] 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-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[--ui-bg] bg-[--ui-primary] hover:bg-[--ui-primary]/75 disabled:bg-[--ui-primary] aria-disabled:bg-[--ui-primary] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary] p-1.5"></button>"`;
exports[`Button > renders with ui correctly 1`] = `"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] 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-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[--ui-text-dimmed] 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-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" autocomplete="off">
<div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[var(--ui-text-dimmed)] 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-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off">
<!--v-if-->
<!--v-if-->
</div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-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-[--ui-bg] bg-[--ui-primary] hover:bg-[--ui-primary]/75 disabled:bg-[--ui-primary] aria-disabled:bg-[--ui-primary] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary]">
</div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-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-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
<!--v-if--> Click me!
<!--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-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[--ui-text-dimmed] 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-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" autocomplete="off">
<div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[var(--ui-text-dimmed)] 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-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off">
<!--v-if-->
<!--v-if-->
</div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-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-[--ui-bg] bg-[--ui-primary] hover:bg-[--ui-primary]/75 disabled:bg-[--ui-primary] aria-disabled:bg-[--ui-primary] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary]">
</div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-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-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
<!--v-if--> Click me!
<!--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-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[--ui-text-dimmed] 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-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" autocomplete="off">
<div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[var(--ui-text-dimmed)] 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-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off">
<!--v-if-->
<!--v-if-->
</div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-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-[--ui-bg] bg-[--ui-primary] hover:bg-[--ui-primary]/75 disabled:bg-[--ui-primary] aria-disabled:bg-[--ui-primary] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary]">
</div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-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-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
<!--v-if--> Click me!
<!--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-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[--ui-text-dimmed] 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-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" autocomplete="off">
<div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[var(--ui-text-dimmed)] 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-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off">
<!--v-if-->
<!--v-if-->
</div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-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-[--ui-bg] bg-[--ui-primary] hover:bg-[--ui-primary]/75 disabled:bg-[--ui-primary] aria-disabled:bg-[--ui-primary] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary]">
</div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-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-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
<!--v-if--> Click me!
<!--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-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[--ui-text-dimmed] 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-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" autocomplete="off">
<div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[var(--ui-text-dimmed)] 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-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off">
<!--v-if-->
<!--v-if-->
</div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-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-[--ui-bg] bg-[--ui-primary] hover:bg-[--ui-primary]/75 disabled:bg-[--ui-primary] aria-disabled:bg-[--ui-primary] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary]">
</div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-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-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
<!--v-if--> Click me!
<!--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-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[--ui-text-dimmed] 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-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" autocomplete="off">
<div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[var(--ui-text-dimmed)] 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-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off">
<!--v-if-->
<!--v-if-->
</div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-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-[--ui-bg] bg-[--ui-primary] hover:bg-[--ui-primary]/75 disabled:bg-[--ui-primary] aria-disabled:bg-[--ui-primary] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary]">
</div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-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-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
<!--v-if--> Click me!
<!--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-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[--ui-text-dimmed] 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-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-primary]" autocomplete="off">
<div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder-[var(--ui-text-dimmed)] 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-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off">
<!--v-if-->
<!--v-if-->
</div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-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-[--ui-bg] bg-[--ui-primary] hover:bg-[--ui-primary]/75 disabled:bg-[--ui-primary] aria-disabled:bg-[--ui-primary] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--ui-primary]">
</div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-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-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
<!--v-if--> Click me!
<!--v-if-->
</button>

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