mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-27 10:20:42 +01:00
fix(module): stop using tailwind's shorthand arbitrary variable syntax (#2366)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Sandro Circi
GitHub
@@ -23,11 +23,11 @@ const route = useRoute()
|
|||||||
|
|
||||||
<UFooter>
|
<UFooter>
|
||||||
<template #left>
|
<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]">
|
<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-[--ui-text-highlighted]">Nuxt UI Pro</span>
|
Purchase <span class="text-[var(--ui-text-highlighted)]">Nuxt UI Pro</span>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
<NuxtLink v-else to="https://github.com/nuxt/ui" target="_blank" class="text-sm text-[--ui-text-muted]">
|
<NuxtLink v-else to="https://github.com/nuxt/ui" target="_blank" class="text-sm text-[var(--ui-text-muted)]">
|
||||||
Published under <span class="text-[--ui-text-highlighted]">MIT License</span>
|
Published under <span class="text-[var(--ui-text-highlighted)]">MIT License</span>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -22,10 +22,10 @@ defineShortcuts({
|
|||||||
<template>
|
<template>
|
||||||
<UHeader :ui="{ left: 'min-w-0' }">
|
<UHeader :ui="{ left: 'min-w-0' }">
|
||||||
<template #left>
|
<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" />
|
<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>
|
</NuxtLink>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -214,15 +214,15 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
|
|||||||
<template>
|
<template>
|
||||||
<div class="my-5">
|
<div class="my-5">
|
||||||
<div>
|
<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">
|
<template v-for="option in options" :key="option.name">
|
||||||
<UFormField
|
<UFormField
|
||||||
:label="option.label"
|
:label="option.label"
|
||||||
size="sm"
|
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="{
|
:ui="{
|
||||||
wrapper: 'bg-[--ui-bg-elevated]/50 rounded-l-[--ui-radius] flex border-r border-[--ui-border-accented]',
|
wrapper: 'bg-[var(--ui-bg-elevated)]/50 rounded-l-[var(--ui-radius)] flex border-r border-[var(--ui-border-accented)]',
|
||||||
label: 'text-[--ui-text-muted] px-2 py-1.5',
|
label: 'text-[var(--ui-text-muted)] px-2 py-1.5',
|
||||||
container: 'mt-0'
|
container: 'mt-0'
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
@@ -233,7 +233,7 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
|
|||||||
value-key="value"
|
value-key="value"
|
||||||
color="neutral"
|
color="neutral"
|
||||||
variant="soft"
|
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"
|
:search-input="false"
|
||||||
:class="[option.name.toLowerCase().endsWith('color') && 'pl-6']"
|
:class="[option.name.toLowerCase().endsWith('color') && 'pl-6']"
|
||||||
:ui="{ itemLeadingChip: 'size-2' }"
|
:ui="{ itemLeadingChip: 'size-2' }"
|
||||||
@@ -256,14 +256,14 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
|
|||||||
:model-value="getComponentProp(option.name)"
|
:model-value="getComponentProp(option.name)"
|
||||||
color="neutral"
|
color="neutral"
|
||||||
variant="soft"
|
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)"
|
@update:model-value="setComponentProp(option.name, $event)"
|
||||||
/>
|
/>
|
||||||
</UFormField>
|
</UFormField>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</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 }">
|
<component :is="name" v-bind="{ ...componentProps, ...componentEvents }">
|
||||||
<template v-for="slot in Object.keys(slots || {})" :key="slot" #[slot]>
|
<template v-for="slot in Object.keys(slots || {})" :key="slot" #[slot]>
|
||||||
<ContentSlot :name="slot" unwrap="p">
|
<ContentSlot :name="slot" unwrap="p">
|
||||||
|
|||||||
@@ -114,8 +114,8 @@ const optionsValues = ref(props.options?.reduce((acc, option) => {
|
|||||||
<template>
|
<template>
|
||||||
<div class="my-5">
|
<div class="my-5">
|
||||||
<div v-if="preview">
|
<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 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-[--ui-color-neutral-200] dark:border-[--ui-color-neutral-700]">
|
<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" />
|
<slot name="options" />
|
||||||
|
|
||||||
<UFormField
|
<UFormField
|
||||||
@@ -124,10 +124,10 @@ const optionsValues = ref(props.options?.reduce((acc, option) => {
|
|||||||
:label="option.label"
|
:label="option.label"
|
||||||
:name="option.name"
|
:name="option.name"
|
||||||
size="sm"
|
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="{
|
:ui="{
|
||||||
wrapper: 'bg-[--ui-bg-elevated]/50 rounded-l-[--ui-radius] flex border-r border-[--ui-border-accented]',
|
wrapper: 'bg-[var(--ui-bg-elevated)]/50 rounded-l-[var(--ui-radius)] flex border-r border-[var(--ui-border-accented)]',
|
||||||
label: 'text-[--ui-text-muted] px-2 py-1.5',
|
label: 'text-[var(--ui-text-muted)] px-2 py-1.5',
|
||||||
container: 'mt-0'
|
container: 'mt-0'
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
@@ -139,7 +139,7 @@ const optionsValues = ref(props.options?.reduce((acc, option) => {
|
|||||||
:value-key="option.name.toLowerCase().endsWith('color') ? 'value' : undefined"
|
:value-key="option.name.toLowerCase().endsWith('color') ? 'value' : undefined"
|
||||||
color="neutral"
|
color="neutral"
|
||||||
variant="soft"
|
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"
|
:multiple="option.multiple"
|
||||||
:class="[option.name.toLowerCase().endsWith('color') && 'pl-6']"
|
:class="[option.name.toLowerCase().endsWith('color') && 'pl-6']"
|
||||||
:ui="{ itemLeadingChip: 'size-2' }"
|
:ui="{ itemLeadingChip: 'size-2' }"
|
||||||
@@ -160,7 +160,7 @@ const optionsValues = ref(props.options?.reduce((acc, option) => {
|
|||||||
:model-value="get(optionsValues, option.name)"
|
:model-value="get(optionsValues, option.name)"
|
||||||
color="neutral"
|
color="neutral"
|
||||||
variant="soft"
|
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)"
|
@update:model-value="set(optionsValues, option.name, $event)"
|
||||||
/>
|
/>
|
||||||
</UFormField>
|
</UFormField>
|
||||||
|
|||||||
@@ -77,7 +77,7 @@ const metaProps: ComputedRef<ComponentMeta['props']> = computed(() => {
|
|||||||
<ProseTd>
|
<ProseTd>
|
||||||
<HighlightInlineType v-if="prop.type" :type="prop.type" />
|
<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" />
|
<ComponentPropsSchema v-if="prop.schema" :prop="prop" :ignore="ignore" />
|
||||||
</ProseTd>
|
</ProseTd>
|
||||||
|
|||||||
@@ -40,7 +40,7 @@ const schemaProps = computed(() => {
|
|||||||
<ProseLi v-for="schemaProp in schemaProps" :key="schemaProp.name">
|
<ProseLi v-for="schemaProp in schemaProps" :key="schemaProp.name">
|
||||||
<HighlightInlineType :type="`${schemaProp.name}${schemaProp.required === false ? '?' : ''}: ${schemaProp.type}`" />
|
<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>
|
</ProseLi>
|
||||||
</ProseUl>
|
</ProseUl>
|
||||||
</Collapsible>
|
</Collapsible>
|
||||||
|
|||||||
@@ -31,7 +31,7 @@ const meta = await fetchComponentMeta(name as any)
|
|||||||
<ProseTd>
|
<ProseTd>
|
||||||
<HighlightInlineType v-if="slot.type" :type="slot.type" />
|
<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>
|
</ProseTd>
|
||||||
</ProseTr>
|
</ProseTr>
|
||||||
</ProseTbody>
|
</ProseTbody>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<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">
|
<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-[--ui-border-inverted]/10" fill="none">
|
<svg class="absolute inset-0 h-full w-full stroke-[var(--ui-border-inverted)]/10" fill="none">
|
||||||
<defs>
|
<defs>
|
||||||
<pattern
|
<pattern
|
||||||
id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"
|
id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"
|
||||||
|
|||||||
@@ -18,7 +18,7 @@ const items = [
|
|||||||
<template>
|
<template>
|
||||||
<UAccordion :items="items">
|
<UAccordion :items="items">
|
||||||
<template #content="{ item }">
|
<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.
|
This is the {{ item.label }} panel.
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -22,7 +22,7 @@ const items = [
|
|||||||
<template>
|
<template>
|
||||||
<UAccordion :items="items">
|
<UAccordion :items="items">
|
||||||
<template #colors="{ item }">
|
<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 }}
|
{{ item.content }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
<ULink
|
<ULink
|
||||||
to="https://github.com/benjamincanac"
|
to="https://github.com/benjamincanac"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
class="hover:ring-[--ui-primary] transition"
|
class="hover:ring-[var(--ui-primary)] transition"
|
||||||
raw
|
raw
|
||||||
>
|
>
|
||||||
<UAvatar
|
<UAvatar
|
||||||
@@ -15,7 +15,7 @@
|
|||||||
<ULink
|
<ULink
|
||||||
to="https://github.com/romhml"
|
to="https://github.com/romhml"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
class="hover:ring-[--ui-primary] transition"
|
class="hover:ring-[var(--ui-primary)] transition"
|
||||||
raw
|
raw
|
||||||
>
|
>
|
||||||
<UAvatar
|
<UAvatar
|
||||||
@@ -27,7 +27,7 @@
|
|||||||
<ULink
|
<ULink
|
||||||
to="https://github.com/noook"
|
to="https://github.com/noook"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
class="hover:ring-[--ui-primary] transition"
|
class="hover:ring-[var(--ui-primary)] transition"
|
||||||
raw
|
raw
|
||||||
>
|
>
|
||||||
<UAvatar
|
<UAvatar
|
||||||
|
|||||||
@@ -14,7 +14,7 @@ const items = [{
|
|||||||
<template>
|
<template>
|
||||||
<UBreadcrumb :items="items">
|
<UBreadcrumb :items="items">
|
||||||
<template #separator>
|
<template #separator>
|
||||||
<span class="mx-2 text-[--ui-text-muted]">/</span>
|
<span class="mx-2 text-[var(--ui-text-muted)]">/</span>
|
||||||
</template>
|
</template>
|
||||||
</UBreadcrumb>
|
</UBreadcrumb>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -13,7 +13,7 @@ const items = [{
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<UContextMenu :items="items" class="w-48">
|
<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
|
Right click here
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -22,7 +22,7 @@ const items = [{
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #refresh-trailing>
|
<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>
|
</template>
|
||||||
</UContextMenu>
|
</UContextMenu>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -32,7 +32,7 @@ const groups = computed(() => [{
|
|||||||
:loading="status === 'pending'"
|
:loading="status === 'pending'"
|
||||||
:groups="groups"
|
:groups="groups"
|
||||||
placeholder="Search users..."
|
placeholder="Search users..."
|
||||||
class="h-96 border-t border-[--ui-border]"
|
class="h-96 border-t border-[var(--ui-border)]"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
</UDrawer>
|
</UDrawer>
|
||||||
|
|||||||
@@ -17,7 +17,7 @@ const items = [{
|
|||||||
<UButton label="Open" color="neutral" variant="outline" icon="i-heroicons-bars-3" />
|
<UButton label="Open" color="neutral" variant="outline" icon="i-heroicons-bars-3" />
|
||||||
|
|
||||||
<template #profile-trailing>
|
<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>
|
</template>
|
||||||
</UDropdownMenu>
|
</UDropdownMenu>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -33,7 +33,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
|
|||||||
<template #item-label="{ item }">
|
<template #item-label="{ item }">
|
||||||
{{ item.label }}
|
{{ item.label }}
|
||||||
|
|
||||||
<span class="text-[--ui-text-muted]">
|
<span class="text-[var(--ui-text-muted)]">
|
||||||
{{ item.email }}
|
{{ item.email }}
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -33,7 +33,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
|
|||||||
<template #item-label="{ item }">
|
<template #item-label="{ item }">
|
||||||
{{ item.label }}
|
{{ item.label }}
|
||||||
|
|
||||||
<span class="text-[--ui-text-muted]">
|
<span class="text-[var(--ui-text-muted)]">
|
||||||
{{ item.email }}
|
{{ item.email }}
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -26,7 +26,7 @@ const state = reactive({
|
|||||||
<template>
|
<template>
|
||||||
<UTabs :items="items" variant="link" class="gap-4 w-full" :ui="{ trigger: 'flex-1' }">
|
<UTabs :items="items" variant="link" class="gap-4 w-full" :ui="{ trigger: 'flex-1' }">
|
||||||
<template #account="{ item }">
|
<template #account="{ item }">
|
||||||
<p class="text-[--ui-text-muted] mb-4">
|
<p class="text-[var(--ui-text-muted)] mb-4">
|
||||||
{{ item.description }}
|
{{ item.description }}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
@@ -43,7 +43,7 @@ const state = reactive({
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #password="{ item }">
|
<template #password="{ item }">
|
||||||
<p class="text-[--ui-text-muted] mb-4">
|
<p class="text-[var(--ui-text-muted)] mb-4">
|
||||||
{{ item.description }}
|
{{ item.description }}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
|||||||
@@ -7,10 +7,10 @@ const appConfig = useAppConfig()
|
|||||||
<UFormField
|
<UFormField
|
||||||
label="toaster.duration"
|
label="toaster.duration"
|
||||||
size="sm"
|
size="sm"
|
||||||
class="inline-flex ring ring-[--ui-border-accented] rounded"
|
class="inline-flex ring ring-[var(--ui-border-accented)] rounded"
|
||||||
:ui="{
|
:ui="{
|
||||||
wrapper: 'bg-[--ui-bg-elevated]/50 rounded-l flex border-r border-[--ui-border-accented]',
|
wrapper: 'bg-[var(--ui-bg-elevated)]/50 rounded-l flex border-r border-[var(--ui-border-accented)]',
|
||||||
label: 'text-[--ui-text-muted] px-2 py-1.5',
|
label: 'text-[var(--ui-text-muted)] px-2 py-1.5',
|
||||||
container: 'mt-0'
|
container: 'mt-0'
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -7,10 +7,10 @@ const appConfig = useAppConfig()
|
|||||||
<UFormField
|
<UFormField
|
||||||
label="toaster.expand"
|
label="toaster.expand"
|
||||||
size="sm"
|
size="sm"
|
||||||
class="inline-flex ring ring-[--ui-border-accented] rounded"
|
class="inline-flex ring ring-[var(--ui-border-accented)] rounded"
|
||||||
:ui="{
|
:ui="{
|
||||||
wrapper: 'bg-[--ui-bg-elevated]/50 rounded-l flex border-r border-[--ui-border-accented]',
|
wrapper: 'bg-[var(--ui-bg-elevated)]/50 rounded-l flex border-r border-[var(--ui-border-accented)]',
|
||||||
label: 'text-[--ui-text-muted] px-2 py-1.5',
|
label: 'text-[var(--ui-text-muted)] px-2 py-1.5',
|
||||||
container: 'mt-0'
|
container: 'mt-0'
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -10,10 +10,10 @@ const appConfig = useAppConfig()
|
|||||||
<UFormField
|
<UFormField
|
||||||
label="toaster.position"
|
label="toaster.position"
|
||||||
size="sm"
|
size="sm"
|
||||||
class="inline-flex ring ring-[--ui-border-accented] rounded"
|
class="inline-flex ring ring-[var(--ui-border-accented)] rounded"
|
||||||
:ui="{
|
:ui="{
|
||||||
wrapper: 'bg-[--ui-bg-elevated]/50 rounded-l flex border-r border-[--ui-border-accented]',
|
wrapper: 'bg-[var(--ui-bg-elevated)]/50 rounded-l flex border-r border-[var(--ui-border-accented)]',
|
||||||
label: 'text-[--ui-text-muted] px-2 py-1.5',
|
label: 'text-[var(--ui-text-muted)] px-2 py-1.5',
|
||||||
container: 'mt-0'
|
container: 'mt-0'
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -7,7 +7,7 @@
|
|||||||
:variant="open ? 'soft' : 'ghost'"
|
:variant="open ? 'soft' : 'ghost'"
|
||||||
square
|
square
|
||||||
aria-label="Color picker"
|
aria-label="Color picker"
|
||||||
:ui="{ leadingIcon: 'text-[--ui-primary]' }"
|
:ui="{ leadingIcon: 'text-[var(--ui-primary)]' }"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -5,13 +5,13 @@
|
|||||||
:icon="icon"
|
:icon="icon"
|
||||||
:label="label"
|
:label="label"
|
||||||
:variant="selected ? 'soft' : 'outline'"
|
: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')"
|
@click.stop.prevent="$emit('select')"
|
||||||
>
|
>
|
||||||
<template v-if="chip" #leading>
|
<template v-if="chip" #leading>
|
||||||
<span
|
<span
|
||||||
class="inline-block w-2 h-2 rounded-full"
|
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="{
|
:style="{
|
||||||
'--color-light': `var(--color-${chip}-500)`,
|
'--color-light': `var(--color-${chip}-500)`,
|
||||||
'--color-dark': `var(--color-${chip}-400)`
|
'--color-dark': `var(--color-${chip}-400)`
|
||||||
|
|||||||
@@ -110,7 +110,7 @@ export default defineAppConfig({
|
|||||||
```
|
```
|
||||||
|
|
||||||
::note
|
::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:
|
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
|
::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
|
::tip
|
||||||
@@ -308,7 +308,7 @@ Nuxt UI automatically applies a text and background color on the `<body>` elemen
|
|||||||
|
|
||||||
```css
|
```css
|
||||||
body {
|
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
|
::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
|
::tip
|
||||||
@@ -376,7 +376,7 @@ Components in Nuxt UI can have multiple `slots`, each representing a distinct HT
|
|||||||
```ts [src/theme/card.ts]
|
```ts [src/theme/card.ts]
|
||||||
export default {
|
export default {
|
||||||
slots: {
|
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',
|
header: 'p-4 sm:px-6',
|
||||||
body: 'p-4 sm:p-6',
|
body: 'p-4 sm:p-6',
|
||||||
footer: 'p-4 sm:px-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]
|
```ts [src/theme/avatar.ts]
|
||||||
export default {
|
export default {
|
||||||
slots: {
|
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'
|
image: 'h-full w-full rounded-[inherit] object-cover'
|
||||||
},
|
},
|
||||||
variants: {
|
variants: {
|
||||||
|
|||||||
@@ -214,7 +214,7 @@ props:
|
|||||||
color: neutral
|
color: neutral
|
||||||
variant: outline
|
variant: outline
|
||||||
ui:
|
ui:
|
||||||
leadingIcon: 'text-[--ui-primary]'
|
leadingIcon: 'text-[var(--ui-primary)]'
|
||||||
slots:
|
slots:
|
||||||
default: |
|
default: |
|
||||||
|
|
||||||
|
|||||||
@@ -90,12 +90,12 @@ props:
|
|||||||
slots:
|
slots:
|
||||||
default: |
|
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
|
Right click here
|
||||||
</div>
|
</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
|
::note
|
||||||
@@ -131,12 +131,12 @@ props:
|
|||||||
slots:
|
slots:
|
||||||
default: |
|
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
|
Right click here
|
||||||
</div>
|
</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
|
### Disabled
|
||||||
@@ -164,12 +164,12 @@ props:
|
|||||||
slots:
|
slots:
|
||||||
default: |
|
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
|
Right click here
|
||||||
</div>
|
</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
|
## Examples
|
||||||
|
|||||||
@@ -224,7 +224,7 @@ Make sure to add the `vaul-drawer-wrapper` directive to a parent element of your
|
|||||||
```vue [app.vue]
|
```vue [app.vue]
|
||||||
<template>
|
<template>
|
||||||
<UApp>
|
<UApp>
|
||||||
<div class="bg-[--ui-bg]" vaul-drawer-wrapper>
|
<div class="bg-[var(--ui-bg)]" vaul-drawer-wrapper>
|
||||||
<NuxtLayout>
|
<NuxtLayout>
|
||||||
<NuxtPage />
|
<NuxtPage />
|
||||||
</NuxtLayout>
|
</NuxtLayout>
|
||||||
@@ -238,7 +238,7 @@ export default defineNuxtConfig({
|
|||||||
app: {
|
app: {
|
||||||
rootAttrs: {
|
rootAttrs: {
|
||||||
'vaul-drawer-wrapper': '',
|
'vaul-drawer-wrapper': '',
|
||||||
'class': 'bg-[--ui-bg]'
|
'class': 'bg-[var(--ui-bg)]'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -171,10 +171,10 @@ When accessing the component via a template ref, you can use the following:
|
|||||||
|
|
||||||
| Name | Type |
|
| 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> |
|
| `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-[--ui-text-toned] mt-1"><p>Triggers form validation. Will raise any errors unless `opts.silent` is set to true.</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-[--ui-text-toned] mt-1"><p>Clears form errors associated with a specific path. If no path is provided, clears all form errors.</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-[--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> |
|
| `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-[--ui-text-toned] mt-1"><p>Sets form errors for a given path. If no path is provided, overrides all errors.</p> |
|
| `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-[--ui-text-toned] mt-1"><p>A reference to the array containing validation errors. Use this to access or manipulate the error information.</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"} |
|
| `disabled`{lang="ts-type"} | `Ref<boolean>`{lang="ts-type"} |
|
||||||
|
|||||||
@@ -65,7 +65,7 @@ props:
|
|||||||
raw: true
|
raw: true
|
||||||
to: /components/link
|
to: /components/link
|
||||||
activeClass: 'font-bold'
|
activeClass: 'font-bold'
|
||||||
inactiveClass: 'text-[--ui-text-muted]'
|
inactiveClass: 'text-[var(--ui-text-muted)]'
|
||||||
slots:
|
slots:
|
||||||
default: Link
|
default: Link
|
||||||
---
|
---
|
||||||
|
|||||||
@@ -203,7 +203,7 @@ props:
|
|||||||
badge: 3.8k
|
badge: 3.8k
|
||||||
to: https://github.com/nuxt/ui
|
to: https://github.com/nuxt/ui
|
||||||
target: _blank
|
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)]'
|
||||||
---
|
---
|
||||||
::
|
::
|
||||||
|
|
||||||
|
|||||||
@@ -8,7 +8,7 @@ export default defineNuxtConfig({
|
|||||||
app: {
|
app: {
|
||||||
rootAttrs: {
|
rootAttrs: {
|
||||||
'vaul-drawer-wrapper': '',
|
'vaul-drawer-wrapper': '',
|
||||||
'class': 'bg-[--ui-bg]'
|
'class': 'bg-[var(--ui-bg)]'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
@@ -66,8 +66,8 @@ defineShortcuts({
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<UApp :toaster="appConfig.toaster">
|
<UApp :toaster="appConfig.toaster">
|
||||||
<div class="h-screen w-screen overflow-hidden flex min-h-0 bg-[--ui-bg]" vaul-drawer-wrapper>
|
<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-[--ui-border] overflow-y-auto w-48 p-4" />
|
<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">
|
<div class="flex-1 flex flex-col items-center justify-around overflow-y-auto w-full py-12 px-4">
|
||||||
<NuxtPage />
|
<NuxtPage />
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<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">
|
<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-[--ui-border-inverted]/10" fill="none">
|
<svg class="absolute inset-0 h-full w-full stroke-[var(--ui-border-inverted)]/10" fill="none">
|
||||||
<defs>
|
<defs>
|
||||||
<pattern
|
<pattern
|
||||||
id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"
|
id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"
|
||||||
|
|||||||
@@ -32,13 +32,13 @@ const items = [{
|
|||||||
<UCard :ui="{ body: 'p-0 sm:p-0' }">
|
<UCard :ui="{ body: 'p-0 sm:p-0' }">
|
||||||
<UAccordion :items="items" class="w-96" :ui="{ trigger: 'px-3.5', body: 'px-3.5' }">
|
<UAccordion :items="items" class="w-96" :ui="{ trigger: 'px-3.5', body: 'px-3.5' }">
|
||||||
<template #body="{ item }">
|
<template #body="{ item }">
|
||||||
<p class="text-[--ui-text-muted]">
|
<p class="text-[var(--ui-text-muted)]">
|
||||||
{{ item.content }}
|
{{ item.content }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #custom-body="{ item }">
|
<template #custom-body="{ item }">
|
||||||
<p class="text-[--ui-text-muted]">
|
<p class="text-[var(--ui-text-muted)]">
|
||||||
Custom: {{ item.content }}
|
Custom: {{ item.content }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -125,7 +125,7 @@ defineShortcuts({
|
|||||||
<UButton label="Open drawer" color="neutral" variant="outline" />
|
<UButton label="Open drawer" color="neutral" variant="outline" />
|
||||||
|
|
||||||
<template #content>
|
<template #content>
|
||||||
<ReuseTemplate class="border-t border-[--ui-border]" />
|
<ReuseTemplate class="border-t border-[var(--ui-border)]" />
|
||||||
</template>
|
</template>
|
||||||
</UDrawer>
|
</UDrawer>
|
||||||
|
|
||||||
|
|||||||
@@ -88,7 +88,7 @@ defineShortcuts(extractShortcuts(items))
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<UContextMenu :items="items" class="min-w-48" :size="size">
|
<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
|
Right click here
|
||||||
</div>
|
</div>
|
||||||
</UContextMenu>
|
</UContextMenu>
|
||||||
|
|||||||
@@ -130,7 +130,7 @@ defineShortcuts(extractShortcuts(items))
|
|||||||
<UButton label="Open" color="neutral" variant="outline" icon="i-heroicons-bars-3" />
|
<UButton label="Open" color="neutral" variant="outline" icon="i-heroicons-bars-3" />
|
||||||
|
|
||||||
<template #custom-trailing>
|
<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>
|
</template>
|
||||||
</UDropdownMenu>
|
</UDropdownMenu>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -8,7 +8,7 @@
|
|||||||
<ULink active>
|
<ULink active>
|
||||||
Button active
|
Button active
|
||||||
</ULink>
|
</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
|
Button active with class
|
||||||
</ULink>
|
</ULink>
|
||||||
<ULink active disabled>
|
<ULink active disabled>
|
||||||
@@ -18,7 +18,7 @@
|
|||||||
<ULink>
|
<ULink>
|
||||||
Button inactive
|
Button inactive
|
||||||
</ULink>
|
</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
|
Button inactive with class
|
||||||
</ULink>
|
</ULink>
|
||||||
<ULink disabled>
|
<ULink disabled>
|
||||||
@@ -34,7 +34,7 @@
|
|||||||
<ULink to="/components/link">
|
<ULink to="/components/link">
|
||||||
Link active
|
Link active
|
||||||
</ULink>
|
</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
|
Link active with class
|
||||||
</ULink>
|
</ULink>
|
||||||
<ULink to="/components/link" disabled>
|
<ULink to="/components/link" disabled>
|
||||||
@@ -44,7 +44,7 @@
|
|||||||
<ULink to="/components/button">
|
<ULink to="/components/button">
|
||||||
Link inactive
|
Link inactive
|
||||||
</ULink>
|
</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
|
Link inactive with class
|
||||||
</ULink>
|
</ULink>
|
||||||
<ULink to="/components/button" disabled>
|
<ULink to="/components/button" disabled>
|
||||||
|
|||||||
@@ -99,7 +99,7 @@ const items = [
|
|||||||
:orientation="orientation"
|
:orientation="orientation"
|
||||||
:highlight="highlight"
|
:highlight="highlight"
|
||||||
:highlight-color="highlightColor"
|
: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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col gap-4">
|
<div class="flex flex-col gap-4">
|
||||||
<div>
|
<div>
|
||||||
<p class="font-semibold text-[--ui-text-highlighted]">
|
<p class="font-semibold text-[var(--ui-text-highlighted)]">
|
||||||
Nuxt UI
|
Nuxt UI
|
||||||
</p>
|
</p>
|
||||||
<p>An open-source UI component library.</p>
|
<p>An open-source UI component library.</p>
|
||||||
|
|||||||
@@ -57,7 +57,7 @@ const items = [{
|
|||||||
class="w-96"
|
class="w-96"
|
||||||
>
|
>
|
||||||
<template #custom="{ item }">
|
<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>
|
</template>
|
||||||
</UTabs>
|
</UTabs>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
|
|
||||||
@layer base {
|
@layer base {
|
||||||
body {
|
body {
|
||||||
@apply antialiased text-[--ui-text] bg-[--ui-bg];
|
@apply antialiased text-[var(--ui-text)] bg-[var(--ui-bg)];
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
export default {
|
export default {
|
||||||
slots: {
|
slots: {
|
||||||
root: 'w-full',
|
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',
|
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',
|
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',
|
body: 'text-sm pb-3.5',
|
||||||
leadingIcon: 'shrink-0 size-5',
|
leadingIcon: 'shrink-0 size-5',
|
||||||
|
|||||||
@@ -38,49 +38,49 @@ export default (options: Required<ModuleOptions>) => ({
|
|||||||
color,
|
color,
|
||||||
variant: 'solid',
|
variant: 'solid',
|
||||||
class: {
|
class: {
|
||||||
root: `bg-[--ui-${color}] text-[--ui-bg]`
|
root: `bg-[var(--ui-${color})] text-[var(--ui-bg)]`
|
||||||
}
|
}
|
||||||
})), ...(options.theme.colors || []).map((color: string) => ({
|
})), ...(options.theme.colors || []).map((color: string) => ({
|
||||||
color,
|
color,
|
||||||
variant: 'outline',
|
variant: 'outline',
|
||||||
class: {
|
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) => ({
|
})), ...(options.theme.colors || []).map((color: string) => ({
|
||||||
color,
|
color,
|
||||||
variant: 'soft',
|
variant: 'soft',
|
||||||
class: {
|
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) => ({
|
})), ...(options.theme.colors || []).map((color: string) => ({
|
||||||
color,
|
color,
|
||||||
variant: 'subtle',
|
variant: 'subtle',
|
||||||
class: {
|
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',
|
color: 'neutral',
|
||||||
variant: 'solid',
|
variant: 'solid',
|
||||||
class: {
|
class: {
|
||||||
root: 'text-[--ui-bg] bg-[--ui-bg-inverted]'
|
root: 'text-[var(--ui-bg)] bg-[var(--ui-bg-inverted)]'
|
||||||
}
|
}
|
||||||
}, {
|
}, {
|
||||||
color: 'neutral',
|
color: 'neutral',
|
||||||
variant: 'outline',
|
variant: 'outline',
|
||||||
class: {
|
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',
|
color: 'neutral',
|
||||||
variant: 'soft',
|
variant: 'soft',
|
||||||
class: {
|
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',
|
color: 'neutral',
|
||||||
variant: 'subtle',
|
variant: 'subtle',
|
||||||
class: {
|
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: {
|
defaultVariants: {
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
export default {
|
export default {
|
||||||
slots: {
|
slots: {
|
||||||
root: 'inline-flex flex-row-reverse justify-end',
|
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: {
|
variants: {
|
||||||
size: {
|
size: {
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
export default {
|
export default {
|
||||||
slots: {
|
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',
|
image: 'h-full w-full rounded-[inherit] object-cover',
|
||||||
fallback: 'font-medium leading-none text-[--ui-text-muted] truncate',
|
fallback: 'font-medium leading-none text-[var(--ui-text-muted)] truncate',
|
||||||
icon: 'text-[--ui-text-muted] shrink-0'
|
icon: 'text-[var(--ui-text-muted)] shrink-0'
|
||||||
},
|
},
|
||||||
variants: {
|
variants: {
|
||||||
size: {
|
size: {
|
||||||
|
|||||||
@@ -22,35 +22,35 @@ export default (options: Required<ModuleOptions>) => ({
|
|||||||
compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
|
compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
|
||||||
color,
|
color,
|
||||||
variant: 'solid',
|
variant: 'solid',
|
||||||
class: `bg-[--ui-${color}] text-[--ui-bg]`
|
class: `bg-[var(--ui-${color})] text-[var(--ui-bg)]`
|
||||||
})), ...(options.theme.colors || []).map((color: string) => ({
|
})), ...(options.theme.colors || []).map((color: string) => ({
|
||||||
color,
|
color,
|
||||||
variant: 'outline',
|
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) => ({
|
})), ...(options.theme.colors || []).map((color: string) => ({
|
||||||
color,
|
color,
|
||||||
variant: 'soft',
|
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) => ({
|
})), ...(options.theme.colors || []).map((color: string) => ({
|
||||||
color,
|
color,
|
||||||
variant: 'subtle',
|
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',
|
color: 'neutral',
|
||||||
variant: 'solid',
|
variant: 'solid',
|
||||||
class: 'text-[--ui-bg] bg-[--ui-bg-inverted]'
|
class: 'text-[var(--ui-bg)] bg-[var(--ui-bg-inverted)]'
|
||||||
}, {
|
}, {
|
||||||
color: 'neutral',
|
color: 'neutral',
|
||||||
variant: 'outline',
|
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',
|
color: 'neutral',
|
||||||
variant: 'soft',
|
variant: 'soft',
|
||||||
class: 'text-[--ui-text] bg-[--ui-bg-elevated]'
|
class: 'text-[var(--ui-text)] bg-[var(--ui-bg-elevated)]'
|
||||||
}, {
|
}, {
|
||||||
color: 'neutral',
|
color: 'neutral',
|
||||||
variant: 'subtle',
|
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: {
|
defaultVariants: {
|
||||||
color: 'primary',
|
color: 'primary',
|
||||||
|
|||||||
@@ -5,21 +5,21 @@ export default (options: Required<ModuleOptions>) => ({
|
|||||||
root: 'relative min-w-0',
|
root: 'relative min-w-0',
|
||||||
list: 'flex items-center gap-1.5',
|
list: 'flex items-center gap-1.5',
|
||||||
item: 'flex min-w-0',
|
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',
|
linkLeadingIcon: 'shrink-0 size-5',
|
||||||
linkLeadingAvatar: 'shrink-0',
|
linkLeadingAvatar: 'shrink-0',
|
||||||
linkLeadingAvatarSize: '2xs',
|
linkLeadingAvatarSize: '2xs',
|
||||||
linkLabel: 'truncate',
|
linkLabel: 'truncate',
|
||||||
separator: 'flex',
|
separator: 'flex',
|
||||||
separatorIcon: 'shrink-0 size-5 text-[--ui-text-muted]'
|
separatorIcon: 'shrink-0 size-5 text-[var(--ui-text-muted)]'
|
||||||
},
|
},
|
||||||
variants: {
|
variants: {
|
||||||
active: {
|
active: {
|
||||||
true: {
|
true: {
|
||||||
link: 'text-[--ui-primary] font-semibold'
|
link: 'text-[var(--ui-primary)] font-semibold'
|
||||||
},
|
},
|
||||||
false: {
|
false: {
|
||||||
link: 'text-[--ui-text-muted] font-medium'
|
link: 'text-[var(--ui-text-muted)] font-medium'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
disabled: {
|
disabled: {
|
||||||
@@ -36,7 +36,7 @@ export default (options: Required<ModuleOptions>) => ({
|
|||||||
active: false,
|
active: false,
|
||||||
to: true,
|
to: true,
|
||||||
class: {
|
class: {
|
||||||
link: ['hover:text-[--ui-text]', options.theme.transitions && 'transition-colors']
|
link: ['hover:text-[var(--ui-text)]', options.theme.transitions && 'transition-colors']
|
||||||
}
|
}
|
||||||
}]
|
}]
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -72,51 +72,51 @@ export default (options: Required<ModuleOptions>) => ({
|
|||||||
compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
|
compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
|
||||||
color,
|
color,
|
||||||
variant: 'solid',
|
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) => ({
|
})), ...(options.theme.colors || []).map((color: string) => ({
|
||||||
color,
|
color,
|
||||||
variant: 'outline',
|
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) => ({
|
})), ...(options.theme.colors || []).map((color: string) => ({
|
||||||
color,
|
color,
|
||||||
variant: 'soft',
|
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) => ({
|
})), ...(options.theme.colors || []).map((color: string) => ({
|
||||||
color,
|
color,
|
||||||
variant: 'subtle',
|
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) => ({
|
})), ...(options.theme.colors || []).map((color: string) => ({
|
||||||
color,
|
color,
|
||||||
variant: 'ghost',
|
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) => ({
|
})), ...(options.theme.colors || []).map((color: string) => ({
|
||||||
color,
|
color,
|
||||||
variant: 'link',
|
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',
|
color: 'neutral',
|
||||||
variant: 'solid',
|
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',
|
color: 'neutral',
|
||||||
variant: 'outline',
|
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',
|
color: 'neutral',
|
||||||
variant: 'soft',
|
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',
|
color: 'neutral',
|
||||||
variant: 'subtle',
|
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',
|
color: 'neutral',
|
||||||
variant: 'ghost',
|
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',
|
color: 'neutral',
|
||||||
variant: 'link',
|
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',
|
size: 'xs',
|
||||||
square: true,
|
square: true,
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
export default {
|
export default {
|
||||||
slots: {
|
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',
|
header: 'p-4 sm:px-6',
|
||||||
body: 'p-4 sm:p-6',
|
body: 'p-4 sm:p-6',
|
||||||
footer: 'p-4 sm:px-6'
|
footer: 'p-4 sm:px-6'
|
||||||
|
|||||||
@@ -11,7 +11,7 @@ export default (options: Required<ModuleOptions>) => ({
|
|||||||
prev: 'absolute rounded-full',
|
prev: 'absolute rounded-full',
|
||||||
next: 'absolute rounded-full',
|
next: 'absolute rounded-full',
|
||||||
dots: 'absolute inset-x-0 -bottom-7 flex flex-wrap items-center justify-center gap-3',
|
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: {
|
variants: {
|
||||||
orientation: {
|
orientation: {
|
||||||
@@ -30,7 +30,7 @@ export default (options: Required<ModuleOptions>) => ({
|
|||||||
},
|
},
|
||||||
active: {
|
active: {
|
||||||
true: {
|
true: {
|
||||||
dot: 'bg-[--ui-border-inverted]'
|
dot: 'bg-[var(--ui-border-inverted)]'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -3,17 +3,17 @@ import type { ModuleOptions } from '../module'
|
|||||||
export default (options: Required<ModuleOptions>) => ({
|
export default (options: Required<ModuleOptions>) => ({
|
||||||
slots: {
|
slots: {
|
||||||
root: 'relative flex items-start',
|
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',
|
container: 'flex items-center',
|
||||||
wrapper: 'ms-2',
|
wrapper: 'ms-2',
|
||||||
icon: 'shrink-0 size-full',
|
icon: 'shrink-0 size-full',
|
||||||
label: 'block font-medium text-[--ui-text]',
|
label: 'block font-medium text-[var(--ui-text)]',
|
||||||
description: 'text-[--ui-text-muted]'
|
description: 'text-[var(--ui-text-muted)]'
|
||||||
},
|
},
|
||||||
variants: {
|
variants: {
|
||||||
color: {
|
color: {
|
||||||
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, `focus-visible:outline-[--ui-${color}]`])),
|
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, `focus-visible:outline-[var(--ui-${color})]`])),
|
||||||
neutral: 'focus-visible:outline-[--ui-border-inverted]'
|
neutral: 'focus-visible:outline-[var(--ui-border-inverted)]'
|
||||||
},
|
},
|
||||||
size: {
|
size: {
|
||||||
xs: {
|
xs: {
|
||||||
@@ -44,7 +44,7 @@ export default (options: Required<ModuleOptions>) => ({
|
|||||||
},
|
},
|
||||||
required: {
|
required: {
|
||||||
true: {
|
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: {
|
disabled: {
|
||||||
@@ -61,11 +61,11 @@ export default (options: Required<ModuleOptions>) => ({
|
|||||||
compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
|
compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
|
||||||
color,
|
color,
|
||||||
checked: true,
|
checked: true,
|
||||||
class: `ring-2 ring-[--ui-${color}] bg-[--ui-${color}]`
|
class: `ring-2 ring-[var(--ui-${color})] bg-[var(--ui-${color})]`
|
||||||
})), {
|
})), {
|
||||||
color: 'neutral',
|
color: 'neutral',
|
||||||
checked: true,
|
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: {
|
defaultVariants: {
|
||||||
size: 'md',
|
size: 'md',
|
||||||
|
|||||||
@@ -3,12 +3,12 @@ import type { ModuleOptions } from '../module'
|
|||||||
export default (options: Required<ModuleOptions>) => ({
|
export default (options: Required<ModuleOptions>) => ({
|
||||||
slots: {
|
slots: {
|
||||||
root: 'relative inline-flex items-center justify-center shrink-0',
|
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: {
|
variants: {
|
||||||
color: {
|
color: {
|
||||||
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, `bg-[--ui-${color}]`])),
|
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, `bg-[var(--ui-${color})]`])),
|
||||||
neutral: 'bg-[--ui-text-muted]'
|
neutral: 'bg-[var(--ui-text-muted)]'
|
||||||
},
|
},
|
||||||
size: {
|
size: {
|
||||||
'3xs': 'h-[4px] min-w-[4px] text-[4px]',
|
'3xs': 'h-[4px] min-w-[4px] text-[4px]',
|
||||||
|
|||||||
@@ -2,28 +2,28 @@ import type { ModuleOptions } from '../module'
|
|||||||
|
|
||||||
export default (options: Required<ModuleOptions>) => ({
|
export default (options: Required<ModuleOptions>) => ({
|
||||||
slots: {
|
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',
|
input: '[&>input]:h-12',
|
||||||
close: '',
|
close: '',
|
||||||
content: 'relative overflow-hidden',
|
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',
|
group: 'p-1 isolate',
|
||||||
empty: 'py-6 text-center text-sm',
|
empty: 'py-6 text-center text-sm',
|
||||||
label: 'px-2 py-1.5 text-xs font-semibold text-[--ui-text-highlighted]',
|
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-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50', options.theme.transitions && 'transition-colors before:transition-colors'],
|
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-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text]', options.theme.transitions && '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',
|
itemLeadingAvatar: 'shrink-0',
|
||||||
itemLeadingAvatarSize: '2xs',
|
itemLeadingAvatarSize: '2xs',
|
||||||
itemLeadingChip: 'shrink-0 size-5',
|
itemLeadingChip: 'shrink-0 size-5',
|
||||||
itemLeadingChipSize: 'md',
|
itemLeadingChipSize: 'md',
|
||||||
itemTrailing: 'ms-auto inline-flex gap-1.5 items-center',
|
itemTrailing: 'ms-auto inline-flex gap-1.5 items-center',
|
||||||
itemTrailingIcon: 'shrink-0 size-5',
|
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',
|
itemTrailingKbds: 'hidden lg:inline-flex items-center shrink-0 gap-0.5',
|
||||||
itemTrailingKbdsSize: 'md',
|
itemTrailingKbdsSize: 'md',
|
||||||
itemLabel: 'truncate space-x-1',
|
itemLabel: 'truncate space-x-1',
|
||||||
itemLabelBase: 'text-[--ui-text-highlighted] [&>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-[--ui-text]',
|
itemLabelPrefix: 'text-[var(--ui-text)]',
|
||||||
itemLabelSuffix: 'text-[--ui-text-dimmed] [&>mark]:text-[--ui-bg] [&>mark]:bg-[--ui-primary]'
|
itemLabelSuffix: 'text-[var(--ui-text-dimmed)] [&>mark]:text-[var(--ui-bg)] [&>mark]:bg-[var(--ui-primary)]'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -2,10 +2,10 @@ import type { ModuleOptions } from '../module'
|
|||||||
|
|
||||||
export default (options: Required<ModuleOptions>) => ({
|
export default (options: Required<ModuleOptions>) => ({
|
||||||
slots: {
|
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',
|
group: 'p-1 isolate',
|
||||||
label: 'w-full flex items-center font-semibold text-[--ui-text-highlighted]',
|
label: 'w-full flex items-center font-semibold text-[var(--ui-text-highlighted)]',
|
||||||
separator: '-mx-1 my-1 h-px bg-[--ui-border]',
|
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',
|
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',
|
itemLeadingIcon: 'shrink-0',
|
||||||
itemLeadingAvatar: 'shrink-0',
|
itemLeadingAvatar: 'shrink-0',
|
||||||
@@ -15,17 +15,17 @@ export default (options: Required<ModuleOptions>) => ({
|
|||||||
itemTrailingKbds: 'hidden lg:inline-flex items-center shrink-0',
|
itemTrailingKbds: 'hidden lg:inline-flex items-center shrink-0',
|
||||||
itemTrailingKbdsSize: '',
|
itemTrailingKbdsSize: '',
|
||||||
itemLabel: 'truncate',
|
itemLabel: 'truncate',
|
||||||
itemLabelExternalIcon: 'size-3 align-top text-[--ui-text-dimmed]'
|
itemLabelExternalIcon: 'size-3 align-top text-[var(--ui-text-dimmed)]'
|
||||||
},
|
},
|
||||||
variants: {
|
variants: {
|
||||||
active: {
|
active: {
|
||||||
true: {
|
true: {
|
||||||
item: 'text-[--ui-text-highlighted] before:bg-[--ui-bg-elevated]',
|
item: 'text-[var(--ui-text-highlighted)] before:bg-[var(--ui-bg-elevated)]',
|
||||||
itemLeadingIcon: 'text-[--ui-text]'
|
itemLeadingIcon: 'text-[var(--ui-text)]'
|
||||||
},
|
},
|
||||||
false: {
|
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'],
|
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-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] group-data-[state=open]:text-[--ui-text]', options.theme.transitions && '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: {
|
size: {
|
||||||
|
|||||||
@@ -1,12 +1,12 @@
|
|||||||
export default {
|
export default {
|
||||||
slots: {
|
slots: {
|
||||||
overlay: 'fixed inset-0 bg-[--ui-bg-elevated]/75',
|
overlay: 'fixed inset-0 bg-[var(--ui-bg-elevated)]/75',
|
||||||
content: 'fixed bg-[--ui-bg] ring ring-[--ui-border] flex focus:outline-none',
|
content: 'fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none',
|
||||||
handle: 'shrink-0 rounded-full bg-[--ui-bg-accented]',
|
handle: 'shrink-0 rounded-full bg-[var(--ui-bg-accented)]',
|
||||||
container: 'w-full flex flex-col gap-4 p-4 overflow-y-auto',
|
container: 'w-full flex flex-col gap-4 p-4 overflow-y-auto',
|
||||||
header: '',
|
header: '',
|
||||||
title: 'text-[--ui-text-highlighted] font-semibold',
|
title: 'text-[var(--ui-text-highlighted)] font-semibold',
|
||||||
description: 'mt-1 text-[--ui-text-muted] text-sm',
|
description: 'mt-1 text-[var(--ui-text-muted)] text-sm',
|
||||||
body: 'flex-1',
|
body: 'flex-1',
|
||||||
footer: 'flex flex-col gap-1.5'
|
footer: 'flex flex-col gap-1.5'
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -2,11 +2,11 @@ import type { ModuleOptions } from '../module'
|
|||||||
|
|
||||||
export default (options: Required<ModuleOptions>) => ({
|
export default (options: Required<ModuleOptions>) => ({
|
||||||
slots: {
|
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]',
|
||||||
arrow: 'fill-[--ui-border]',
|
arrow: 'fill-[var(--ui-border)]',
|
||||||
group: 'p-1 isolate',
|
group: 'p-1 isolate',
|
||||||
label: 'w-full flex items-center font-semibold text-[--ui-text-highlighted]',
|
label: 'w-full flex items-center font-semibold text-[var(--ui-text-highlighted)]',
|
||||||
separator: '-mx-1 my-1 h-px bg-[--ui-border]',
|
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',
|
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',
|
itemLeadingIcon: 'shrink-0',
|
||||||
itemLeadingAvatar: 'shrink-0',
|
itemLeadingAvatar: 'shrink-0',
|
||||||
@@ -16,17 +16,17 @@ export default (options: Required<ModuleOptions>) => ({
|
|||||||
itemTrailingKbds: 'hidden lg:inline-flex items-center shrink-0',
|
itemTrailingKbds: 'hidden lg:inline-flex items-center shrink-0',
|
||||||
itemTrailingKbdsSize: '',
|
itemTrailingKbdsSize: '',
|
||||||
itemLabel: 'truncate',
|
itemLabel: 'truncate',
|
||||||
itemLabelExternalIcon: 'size-3 align-top text-[--ui-text-dimmed]'
|
itemLabelExternalIcon: 'size-3 align-top text-[var(--ui-text-dimmed)]'
|
||||||
},
|
},
|
||||||
variants: {
|
variants: {
|
||||||
active: {
|
active: {
|
||||||
true: {
|
true: {
|
||||||
item: 'text-[--ui-text-highlighted] before:bg-[--ui-bg-elevated]',
|
item: 'text-[var(--ui-text-highlighted)] before:bg-[var(--ui-bg-elevated)]',
|
||||||
itemLeadingIcon: 'text-[--ui-text]'
|
itemLeadingIcon: 'text-[var(--ui-text)]'
|
||||||
},
|
},
|
||||||
false: {
|
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'],
|
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-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text] group-data-[state=open]:text-[--ui-text]', options.theme.transitions && '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: {
|
size: {
|
||||||
|
|||||||
@@ -3,12 +3,12 @@ export default {
|
|||||||
root: '',
|
root: '',
|
||||||
wrapper: '',
|
wrapper: '',
|
||||||
labelWrapper: 'flex content-center items-center justify-between',
|
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',
|
container: 'mt-1 relative',
|
||||||
description: 'text-[--ui-text-muted]',
|
description: 'text-[var(--ui-text-muted)]',
|
||||||
error: 'mt-2 text-[--ui-error]',
|
error: 'mt-2 text-[var(--ui-error)]',
|
||||||
hint: 'text-[--ui-text-muted]',
|
hint: 'text-[var(--ui-text-muted)]',
|
||||||
help: 'mt-2 text-[--ui-text-muted]'
|
help: 'mt-2 text-[var(--ui-text-muted)]'
|
||||||
},
|
},
|
||||||
variants: {
|
variants: {
|
||||||
size: {
|
size: {
|
||||||
@@ -20,7 +20,7 @@ export default {
|
|||||||
},
|
},
|
||||||
required: {
|
required: {
|
||||||
true: {
|
true: {
|
||||||
label: `after:content-['*'] after:ms-0.5 after:text-[--ui-error]`
|
label: `after:content-['*'] after:ms-0.5 after:text-[var(--ui-error)]`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -7,15 +7,15 @@ export default (options: Required<ModuleOptions>) => {
|
|||||||
slots: {
|
slots: {
|
||||||
base: () => ['rounded-[calc(var(--ui-radius)*1.5)]', options.theme.transitions && 'transition-colors'],
|
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',
|
trailing: 'group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75',
|
||||||
arrow: 'fill-[--ui-border]',
|
arrow: 'fill-[var(--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]',
|
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-[--ui-border] scroll-py-1',
|
viewport: 'divide-y divide-[var(--ui-border)] scroll-py-1',
|
||||||
group: 'p-1 isolate',
|
group: 'p-1 isolate',
|
||||||
empty: 'py-2 text-center text-sm text-[--ui-text-muted]',
|
empty: 'py-2 text-center text-sm text-[var(--ui-text-muted)]',
|
||||||
label: 'font-semibold text-[--ui-text-highlighted]',
|
label: 'font-semibold text-[var(--ui-text-highlighted)]',
|
||||||
separator: '-mx-1 my-1 h-px bg-[--ui-border]',
|
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-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50', options.theme.transitions && 'transition-colors before:transition-colors'],
|
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-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text]', options.theme.transitions && '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',
|
itemLeadingAvatar: 'shrink-0',
|
||||||
itemLeadingAvatarSize: '',
|
itemLeadingAvatarSize: '',
|
||||||
itemLeadingChip: 'shrink-0',
|
itemLeadingChip: 'shrink-0',
|
||||||
@@ -23,11 +23,11 @@ export default (options: Required<ModuleOptions>) => {
|
|||||||
itemTrailing: 'ms-auto inline-flex gap-1.5 items-center',
|
itemTrailing: 'ms-auto inline-flex gap-1.5 items-center',
|
||||||
itemTrailingIcon: 'shrink-0',
|
itemTrailingIcon: 'shrink-0',
|
||||||
itemLabel: 'truncate',
|
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',
|
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: '',
|
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: {
|
variants: {
|
||||||
multiple: {
|
multiple: {
|
||||||
@@ -101,12 +101,12 @@ export default (options: Required<ModuleOptions>) => {
|
|||||||
color,
|
color,
|
||||||
multiple: true,
|
multiple: true,
|
||||||
variant: ['outline', 'subtle'],
|
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',
|
color: 'neutral',
|
||||||
multiple: true,
|
multiple: true,
|
||||||
variant: ['outline', 'subtle'],
|
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))
|
}, input(options))
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,12 +4,12 @@ import { buttonGroupVariantWithRoot } from './button-group'
|
|||||||
export default (options: Required<ModuleOptions>) => ({
|
export default (options: Required<ModuleOptions>) => ({
|
||||||
slots: {
|
slots: {
|
||||||
root: 'relative inline-flex items-center',
|
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',
|
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',
|
leadingAvatar: 'shrink-0',
|
||||||
trailing: 'absolute inset-y-0 end-0 flex items-center',
|
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: {
|
variants: {
|
||||||
...buttonGroupVariantWithRoot,
|
...buttonGroupVariantWithRoot,
|
||||||
@@ -51,11 +51,11 @@ export default (options: Required<ModuleOptions>) => ({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
variant: {
|
variant: {
|
||||||
outline: 'text-[--ui-text-highlighted] bg-[--ui-bg] ring ring-inset ring-[--ui-border-accented]',
|
outline: 'text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--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',
|
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-[--ui-text-highlighted] bg-[--ui-bg-elevated] ring ring-inset ring-[--ui-border-accented]',
|
subtle: 'text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] ring ring-inset ring-[var(--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',
|
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-[--ui-text-highlighted]'
|
none: 'text-[var(--ui-text-highlighted)]'
|
||||||
},
|
},
|
||||||
color: {
|
color: {
|
||||||
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, ''])),
|
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, ''])),
|
||||||
@@ -74,25 +74,25 @@ export default (options: Required<ModuleOptions>) => ({
|
|||||||
true: ''
|
true: ''
|
||||||
},
|
},
|
||||||
type: {
|
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) => ({
|
compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
|
||||||
color,
|
color,
|
||||||
variant: ['outline', 'subtle'],
|
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) => ({
|
})), ...(options.theme.colors || []).map((color: string) => ({
|
||||||
color,
|
color,
|
||||||
highlight: true,
|
highlight: true,
|
||||||
class: `ring ring-inset ring-[--ui-${color}]`
|
class: `ring ring-inset ring-[var(--ui-${color})]`
|
||||||
})), {
|
})), {
|
||||||
color: 'neutral',
|
color: 'neutral',
|
||||||
variant: ['outline', 'subtle'],
|
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',
|
color: 'neutral',
|
||||||
highlight: true,
|
highlight: true,
|
||||||
class: 'ring ring-inset ring-[--ui-border-inverted]'
|
class: 'ring ring-inset ring-[var(--ui-border-inverted)]'
|
||||||
}, {
|
}, {
|
||||||
leading: true,
|
leading: true,
|
||||||
size: 'xs',
|
size: 'xs',
|
||||||
|
|||||||
@@ -1,10 +1,10 @@
|
|||||||
export default {
|
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: {
|
variants: {
|
||||||
variant: {
|
variant: {
|
||||||
solid: 'bg-[--ui-bg-inverted] text-[--ui-bg]',
|
solid: 'bg-[var(--ui-bg-inverted)] text-[var(--ui-bg)]',
|
||||||
outline: 'bg-[--ui-bg] text-[--ui-text-highlighted] ring ring-inset ring-[--ui-border-accented]',
|
outline: 'bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)]',
|
||||||
subtle: 'bg-[--ui-bg-elevated] text-[--ui-text] ring ring-inset ring-[--ui-border-accented]'
|
subtle: 'bg-[var(--ui-bg-elevated)] text-[var(--ui-text)] ring ring-inset ring-[var(--ui-border-accented)]'
|
||||||
},
|
},
|
||||||
size: {
|
size: {
|
||||||
sm: 'h-4 min-w-[16px] text-[10px]',
|
sm: 'h-4 min-w-[16px] text-[10px]',
|
||||||
|
|||||||
@@ -1,11 +1,11 @@
|
|||||||
import type { ModuleOptions } from '../module'
|
import type { ModuleOptions } from '../module'
|
||||||
|
|
||||||
export default (options: Required<ModuleOptions>) => ({
|
export default (options: Required<ModuleOptions>) => ({
|
||||||
base: 'focus-visible:outline-[--ui-primary]',
|
base: 'focus-visible:outline-[var(--ui-primary)]',
|
||||||
variants: {
|
variants: {
|
||||||
active: {
|
active: {
|
||||||
true: 'text-[--ui-primary]',
|
true: 'text-[var(--ui-primary)]',
|
||||||
false: ['text-[--ui-text-muted] hover:text-[--ui-text]', options.theme.transitions && 'transition-colors']
|
false: ['text-[var(--ui-text-muted)] hover:text-[var(--ui-text)]', options.theme.transitions && 'transition-colors']
|
||||||
},
|
},
|
||||||
disabled: {
|
disabled: {
|
||||||
true: 'cursor-not-allowed opacity-75'
|
true: 'cursor-not-allowed opacity-75'
|
||||||
|
|||||||
@@ -1,12 +1,12 @@
|
|||||||
export default {
|
export default {
|
||||||
slots: {
|
slots: {
|
||||||
overlay: 'fixed inset-0 bg-[--ui-bg-elevated]/75',
|
overlay: 'fixed inset-0 bg-[var(--ui-bg-elevated)]/75',
|
||||||
content: 'fixed w-full h-dvh bg-[--ui-bg] divide-y divide-[--ui-border] flex flex-col focus:outline-none',
|
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',
|
header: 'px-4 py-5 sm:px-6',
|
||||||
body: 'flex-1 p-4 sm:p-6',
|
body: 'flex-1 p-4 sm:p-6',
|
||||||
footer: 'flex items-center gap-1.5 p-4 sm:px-6',
|
footer: 'flex items-center gap-1.5 p-4 sm:px-6',
|
||||||
title: 'text-[--ui-text-highlighted] font-semibold',
|
title: 'text-[var(--ui-text-highlighted)] font-semibold',
|
||||||
description: 'mt-1 text-[--ui-text-muted] text-sm',
|
description: 'mt-1 text-[var(--ui-text-muted)] text-sm',
|
||||||
close: 'absolute top-4 right-4'
|
close: 'absolute top-4 right-4'
|
||||||
},
|
},
|
||||||
variants: {
|
variants: {
|
||||||
@@ -21,7 +21,7 @@ export default {
|
|||||||
content: 'inset-0'
|
content: 'inset-0'
|
||||||
},
|
},
|
||||||
false: {
|
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)]'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -14,32 +14,32 @@ export default (options: Required<ModuleOptions>) => ({
|
|||||||
linkTrailingBadgeSize: 'sm',
|
linkTrailingBadgeSize: 'sm',
|
||||||
linkTrailingIcon: 'size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200',
|
linkTrailingIcon: 'size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200',
|
||||||
linkLabel: 'truncate',
|
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',
|
childList: 'grid grid-cols-2 gap-2 p-2',
|
||||||
childItem: '',
|
childItem: '',
|
||||||
childLink: 'group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-left',
|
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',
|
childLinkWrapper: 'flex flex-col items-start',
|
||||||
childLinkIcon: 'size-5 shrink-0',
|
childLinkIcon: 'size-5 shrink-0',
|
||||||
childLinkLabel: 'font-semibold text-sm relative inline-flex',
|
childLinkLabel: 'font-semibold text-sm relative inline-flex',
|
||||||
childLinkLabelExternalIcon: 'size-3 align-top text-[--ui-text-dimmed]',
|
childLinkLabelExternalIcon: 'size-3 align-top text-[var(--ui-text-dimmed)]',
|
||||||
childLinkDescription: 'text-sm text-[--ui-text-muted]',
|
childLinkDescription: 'text-sm text-[var(--ui-text-muted)]',
|
||||||
separator: 'px-2 h-px bg-[--ui-border]',
|
separator: 'px-2 h-px bg-[var(--ui-border)]',
|
||||||
viewportWrapper: 'absolute top-full inset-x-0 flex w-full',
|
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
|
// 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]',
|
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',
|
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: {
|
variants: {
|
||||||
color: {
|
color: {
|
||||||
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
|
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
|
||||||
link: `focus-visible:before:ring-[--ui-${color}]`,
|
link: `focus-visible:before:ring-[var(--ui-${color})]`,
|
||||||
childLink: `focus-visible:outline-[--ui-${color}]`
|
childLink: `focus-visible:outline-[var(--ui-${color})]`
|
||||||
}])),
|
}])),
|
||||||
neutral: {
|
neutral: {
|
||||||
link: 'focus-visible:before:ring-[--ui-border-inverted]',
|
link: 'focus-visible:before:ring-[var(--ui-border-inverted)]',
|
||||||
childLink: 'focus-visible:outline-[--ui-border-inverted]'
|
childLink: 'focus-visible:outline-[var(--ui-border-inverted)]'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
highlightColor: {
|
highlightColor: {
|
||||||
@@ -64,14 +64,14 @@ export default (options: Required<ModuleOptions>) => ({
|
|||||||
},
|
},
|
||||||
active: {
|
active: {
|
||||||
true: {
|
true: {
|
||||||
childLink: 'bg-[--ui-bg-elevated] text-[--ui-text-highlighted]',
|
childLink: 'bg-[var(--ui-bg-elevated)] text-[var(--ui-text-highlighted)]',
|
||||||
childLinkIcon: 'text-[--ui-text]'
|
childLinkIcon: 'text-[var(--ui-text)]'
|
||||||
},
|
},
|
||||||
false: {
|
false: {
|
||||||
link: 'text-[--ui-text-muted]',
|
link: 'text-[var(--ui-text-muted)]',
|
||||||
linkLeadingIcon: 'text-[--ui-text-dimmed]',
|
linkLeadingIcon: 'text-[var(--ui-text-dimmed)]',
|
||||||
childLink: ['hover:bg-[--ui-bg-elevated]/50 text-[--ui-text] hover:text-[--ui-text-highlighted]', options.theme.transitions && 'transition-colors'],
|
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-[--ui-text-dimmed] group-hover:text-[--ui-text]', options.theme.transitions && 'transition-colors']
|
childLinkIcon: ['text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)]', options.theme.transitions && 'transition-colors']
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
disabled: {
|
disabled: {
|
||||||
@@ -102,76 +102,76 @@ export default (options: Required<ModuleOptions>) => ({
|
|||||||
active: false,
|
active: false,
|
||||||
variant: 'pill',
|
variant: 'pill',
|
||||||
class: {
|
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'],
|
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-[--ui-text] group-data-[state=open]:text-[--ui-text]', 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) => ({
|
}, ...(options.theme.colors || []).map((color: string) => ({
|
||||||
color,
|
color,
|
||||||
variant: 'pill',
|
variant: 'pill',
|
||||||
active: true,
|
active: true,
|
||||||
class: {
|
class: {
|
||||||
link: `text-[--ui-${color}]`,
|
link: `text-[var(--ui-${color})]`,
|
||||||
linkLeadingIcon: `text-[--ui-${color}]`
|
linkLeadingIcon: `text-[var(--ui-${color})]`
|
||||||
}
|
}
|
||||||
})), {
|
})), {
|
||||||
color: 'neutral',
|
color: 'neutral',
|
||||||
variant: 'pill',
|
variant: 'pill',
|
||||||
active: true,
|
active: true,
|
||||||
class: {
|
class: {
|
||||||
link: 'text-[--ui-text-highlighted]',
|
link: 'text-[var(--ui-text-highlighted)]',
|
||||||
linkLeadingIcon: 'text-[--ui-text-highlighted]'
|
linkLeadingIcon: 'text-[var(--ui-text-highlighted)]'
|
||||||
}
|
}
|
||||||
}, {
|
}, {
|
||||||
variant: 'pill',
|
variant: 'pill',
|
||||||
active: true,
|
active: true,
|
||||||
highlight: false,
|
highlight: false,
|
||||||
class: {
|
class: {
|
||||||
link: 'before:bg-[--ui-bg-elevated]'
|
link: 'before:bg-[var(--ui-bg-elevated)]'
|
||||||
}
|
}
|
||||||
}, {
|
}, {
|
||||||
variant: 'pill',
|
variant: 'pill',
|
||||||
active: true,
|
active: true,
|
||||||
highlight: true,
|
highlight: true,
|
||||||
class: {
|
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,
|
disabled: false,
|
||||||
active: false,
|
active: false,
|
||||||
variant: 'link',
|
variant: 'link',
|
||||||
class: {
|
class: {
|
||||||
link: ['hover:text-[--ui-text-highlighted] data-[state=open]:text-[--ui-text-highlighted]', 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-[--ui-text] group-data-[state=open]:text-[--ui-text]', 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) => ({
|
}, ...(options.theme.colors || []).map((color: string) => ({
|
||||||
color,
|
color,
|
||||||
variant: 'link',
|
variant: 'link',
|
||||||
active: true,
|
active: true,
|
||||||
class: {
|
class: {
|
||||||
link: `text-[--ui-${color}]`,
|
link: `text-[var(--ui-${color})]`,
|
||||||
linkLeadingIcon: `text-[--ui-${color}]`
|
linkLeadingIcon: `text-[var(--ui-${color})]`
|
||||||
}
|
}
|
||||||
})), {
|
})), {
|
||||||
color: 'neutral',
|
color: 'neutral',
|
||||||
variant: 'link',
|
variant: 'link',
|
||||||
active: true,
|
active: true,
|
||||||
class: {
|
class: {
|
||||||
link: 'text-[--ui-text-highlighted]',
|
link: 'text-[var(--ui-text-highlighted)]',
|
||||||
linkLeadingIcon: 'text-[--ui-text-highlighted]'
|
linkLeadingIcon: 'text-[var(--ui-text-highlighted)]'
|
||||||
}
|
}
|
||||||
}, ...(options.theme.colors || []).map((highlightColor: string) => ({
|
}, ...(options.theme.colors || []).map((highlightColor: string) => ({
|
||||||
highlightColor,
|
highlightColor,
|
||||||
highlight: true,
|
highlight: true,
|
||||||
active: true,
|
active: true,
|
||||||
class: {
|
class: {
|
||||||
link: `after:bg-[--ui-${highlightColor}]`
|
link: `after:bg-[var(--ui-${highlightColor})]`
|
||||||
}
|
}
|
||||||
})), {
|
})), {
|
||||||
highlightColor: 'neutral',
|
highlightColor: 'neutral',
|
||||||
highlight: true,
|
highlight: true,
|
||||||
active: true,
|
active: true,
|
||||||
class: {
|
class: {
|
||||||
link: 'after:bg-[--ui-bg-inverted]'
|
link: 'after:bg-[var(--ui-bg-inverted)]'
|
||||||
}
|
}
|
||||||
}],
|
}],
|
||||||
defaultVariants: {
|
defaultVariants: {
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
export default {
|
export default {
|
||||||
slots: {
|
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',
|
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-[--ui-border]'
|
arrow: 'fill-[var(--ui-border)]'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,9 +3,9 @@ import type { ModuleOptions } from '../module'
|
|||||||
export default (options: Required<ModuleOptions>) => ({
|
export default (options: Required<ModuleOptions>) => ({
|
||||||
slots: {
|
slots: {
|
||||||
root: 'gap-2',
|
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',
|
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',
|
steps: 'grid items-end',
|
||||||
step: 'truncate text-end row-start-1 col-start-1 transition-opacity'
|
step: 'truncate text-end row-start-1 col-start-1 transition-opacity'
|
||||||
},
|
},
|
||||||
@@ -18,12 +18,12 @@ export default (options: Required<ModuleOptions>) => ({
|
|||||||
},
|
},
|
||||||
color: {
|
color: {
|
||||||
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
|
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
|
||||||
indicator: `bg-[--ui-${color}]`,
|
indicator: `bg-[var(--ui-${color})]`,
|
||||||
steps: `text-[--ui-${color}]`
|
steps: `text-[var(--ui-${color})]`
|
||||||
}])),
|
}])),
|
||||||
neutral: {
|
neutral: {
|
||||||
indicator: 'bg-[--ui-bg-inverted]',
|
indicator: 'bg-[var(--ui-bg-inverted)]',
|
||||||
steps: 'text-[--ui-bg]'
|
steps: 'text-[var(--ui-bg)]'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
size: {
|
size: {
|
||||||
@@ -61,7 +61,7 @@ export default (options: Required<ModuleOptions>) => ({
|
|||||||
step: 'opacity-100'
|
step: 'opacity-100'
|
||||||
},
|
},
|
||||||
first: {
|
first: {
|
||||||
step: 'opacity-100 text-[--ui-text-muted]'
|
step: 'opacity-100 text-[var(--ui-text-muted)]'
|
||||||
},
|
},
|
||||||
other: {
|
other: {
|
||||||
step: 'opacity-0'
|
step: 'opacity-0'
|
||||||
|
|||||||
@@ -4,24 +4,24 @@ export default (options: Required<ModuleOptions>) => ({
|
|||||||
slots: {
|
slots: {
|
||||||
root: 'relative',
|
root: 'relative',
|
||||||
fieldset: 'flex',
|
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',
|
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]',
|
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-[--ui-bg] after:rounded-full',
|
indicator: 'flex items-center justify-center size-full rounded-full after:bg-[var(--ui-bg)] after:rounded-full',
|
||||||
container: 'flex items-center',
|
container: 'flex items-center',
|
||||||
wrapper: 'ms-2',
|
wrapper: 'ms-2',
|
||||||
label: 'block font-medium text-[--ui-text]',
|
label: 'block font-medium text-[var(--ui-text)]',
|
||||||
description: 'text-[--ui-text-muted]'
|
description: 'text-[var(--ui-text-muted)]'
|
||||||
},
|
},
|
||||||
variants: {
|
variants: {
|
||||||
color: {
|
color: {
|
||||||
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
|
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
|
||||||
base: `focus-visible:outline-[--ui-${color}]`,
|
base: `focus-visible:outline-[var(--ui-${color})]`,
|
||||||
indicator: `bg-[--ui-${color}]`
|
indicator: `bg-[var(--ui-${color})]`
|
||||||
}])),
|
}])),
|
||||||
neutral: {
|
neutral: {
|
||||||
base: 'focus-visible:outline-[--ui-border-inverted]',
|
base: 'focus-visible:outline-[var(--ui-border-inverted)]',
|
||||||
indicator: 'bg-[--ui-bg-inverted]'
|
indicator: 'bg-[var(--ui-bg-inverted)]'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
orientation: {
|
orientation: {
|
||||||
@@ -83,7 +83,7 @@ export default (options: Required<ModuleOptions>) => ({
|
|||||||
},
|
},
|
||||||
required: {
|
required: {
|
||||||
true: {
|
true: {
|
||||||
legend: 'after:content-[\'*\'] after:ms-0.5 after:text-[--ui-error]'
|
legend: 'after:content-[\'*\'] after:ms-0.5 after:text-[var(--ui-error)]'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ export default (options: Required<ModuleOptions>) => {
|
|||||||
slots: {
|
slots: {
|
||||||
value: 'truncate',
|
value: 'truncate',
|
||||||
placeholder: 'truncate text-current/50',
|
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: {
|
variants: {
|
||||||
size: {
|
size: {
|
||||||
|
|||||||
@@ -9,15 +9,15 @@ export default (options: Required<ModuleOptions>) => {
|
|||||||
root: () => undefined,
|
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'],
|
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',
|
value: 'truncate group-data-placeholder:text-current/50',
|
||||||
arrow: 'fill-[--ui-border]',
|
arrow: 'fill-[var(--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]',
|
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-[--ui-border] scroll-py-1',
|
viewport: 'divide-y divide-[var(--ui-border)] scroll-py-1',
|
||||||
group: 'p-1 isolate',
|
group: 'p-1 isolate',
|
||||||
empty: 'py-2 text-center text-sm text-[--ui-text-muted]',
|
empty: 'py-2 text-center text-sm text-[var(--ui-text-muted)]',
|
||||||
label: 'font-semibold text-[--ui-text-highlighted]',
|
label: 'font-semibold text-[var(--ui-text-highlighted)]',
|
||||||
separator: '-mx-1 my-1 h-px bg-[--ui-border]',
|
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-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50', options.theme.transitions && 'transition-colors before:transition-colors'],
|
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-[--ui-text-dimmed] group-data-highlighted:text-[--ui-text]', options.theme.transitions && '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',
|
itemLeadingAvatar: 'shrink-0',
|
||||||
itemLeadingAvatarSize: '',
|
itemLeadingAvatarSize: '',
|
||||||
itemLeadingChip: 'shrink-0',
|
itemLeadingChip: 'shrink-0',
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ export default (options: Required<ModuleOptions>) => ({
|
|||||||
slots: {
|
slots: {
|
||||||
root: 'flex items-center align-center text-center',
|
root: 'flex items-center align-center text-center',
|
||||||
border: '',
|
border: '',
|
||||||
container: 'font-medium text-[--ui-text] flex',
|
container: 'font-medium text-[var(--ui-text)] flex',
|
||||||
icon: 'shrink-0 size-5',
|
icon: 'shrink-0 size-5',
|
||||||
avatar: 'shrink-0',
|
avatar: 'shrink-0',
|
||||||
avatarSize: '2xs',
|
avatarSize: '2xs',
|
||||||
@@ -12,8 +12,8 @@ export default (options: Required<ModuleOptions>) => ({
|
|||||||
},
|
},
|
||||||
variants: {
|
variants: {
|
||||||
color: {
|
color: {
|
||||||
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, { border: `border-[--ui-${color}]` }])),
|
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, { border: `border-[var(--ui-${color})]` }])),
|
||||||
neutral: { border: 'border-[--ui-border]' }
|
neutral: { border: 'border-[var(--ui-border)]' }
|
||||||
},
|
},
|
||||||
orientation: {
|
orientation: {
|
||||||
horizontal: {
|
horizontal: {
|
||||||
|
|||||||
@@ -1,3 +1,3 @@
|
|||||||
export default {
|
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)]'
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,12 +1,12 @@
|
|||||||
export default {
|
export default {
|
||||||
slots: {
|
slots: {
|
||||||
overlay: 'fixed inset-0 bg-[--ui-bg-elevated]/75',
|
overlay: 'fixed inset-0 bg-[var(--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',
|
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',
|
header: 'px-4 py-5 sm:px-6',
|
||||||
body: 'flex-1 overflow-y-auto p-4 sm:p-6',
|
body: 'flex-1 overflow-y-auto p-4 sm:p-6',
|
||||||
footer: 'flex items-center gap-1.5 p-4 sm:px-6',
|
footer: 'flex items-center gap-1.5 p-4 sm:px-6',
|
||||||
title: 'text-[--ui-text-highlighted] font-semibold',
|
title: 'text-[var(--ui-text-highlighted)] font-semibold',
|
||||||
description: 'mt-1 text-[--ui-text-muted] text-sm',
|
description: 'mt-1 text-[var(--ui-text-muted)] text-sm',
|
||||||
close: 'absolute top-4 right-4'
|
close: 'absolute top-4 right-4'
|
||||||
},
|
},
|
||||||
variants: {
|
variants: {
|
||||||
|
|||||||
@@ -3,19 +3,19 @@ import type { ModuleOptions } from '../module'
|
|||||||
export default (options: Required<ModuleOptions>) => ({
|
export default (options: Required<ModuleOptions>) => ({
|
||||||
slots: {
|
slots: {
|
||||||
root: 'relative flex items-center select-none touch-none',
|
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',
|
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: {
|
variants: {
|
||||||
color: {
|
color: {
|
||||||
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
|
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
|
||||||
range: `bg-[--ui-${color}]`,
|
range: `bg-[var(--ui-${color})]`,
|
||||||
thumb: `ring-[--ui-${color}] focus-visible:outline-[--ui-${color}]`
|
thumb: `ring-[var(--ui-${color})] focus-visible:outline-[var(--ui-${color})]`
|
||||||
}])),
|
}])),
|
||||||
neutral: {
|
neutral: {
|
||||||
range: 'bg-[--ui-bg-inverted]',
|
range: 'bg-[var(--ui-bg-inverted)]',
|
||||||
thumb: 'ring-[--ui-border-inverted] focus-visible:outline-[--ui-border-inverted]/50'
|
thumb: 'ring-[var(--ui-border-inverted)] focus-visible:outline-[var(--ui-border-inverted)]/50'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
size: {
|
size: {
|
||||||
|
|||||||
@@ -3,23 +3,23 @@ import type { ModuleOptions } from '../module'
|
|||||||
export default (options: Required<ModuleOptions>) => ({
|
export default (options: Required<ModuleOptions>) => ({
|
||||||
slots: {
|
slots: {
|
||||||
root: 'relative flex items-start',
|
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',
|
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',
|
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-[--ui-text-dimmed] opacity-0 size-10/12', options.theme.transitions && 'transition-[color,opacity] duration-200'],
|
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',
|
wrapper: 'ms-2',
|
||||||
label: 'block font-medium text-[--ui-text]',
|
label: 'block font-medium text-[var(--ui-text)]',
|
||||||
description: 'text-[--ui-text-muted]'
|
description: 'text-[var(--ui-text-muted)]'
|
||||||
},
|
},
|
||||||
variants: {
|
variants: {
|
||||||
color: {
|
color: {
|
||||||
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
|
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
|
||||||
base: `data-[state=checked]:bg-[--ui-${color}] focus-visible:ring-[--ui-${color}]`,
|
base: `data-[state=checked]:bg-[var(--ui-${color})] focus-visible:ring-[var(--ui-${color})]`,
|
||||||
icon: `group-data-[state=checked]:text-[--ui-${color}]`
|
icon: `group-data-[state=checked]:text-[var(--ui-${color})]`
|
||||||
}])),
|
}])),
|
||||||
neutral: {
|
neutral: {
|
||||||
base: 'data-[state=checked]:bg-[--ui-bg-inverted] focus-visible:ring-[--ui-border-inverted]',
|
base: 'data-[state=checked]:bg-[var(--ui-bg-inverted)] focus-visible:ring-[var(--ui-border-inverted)]',
|
||||||
icon: 'group-data-[state=checked]:text-[--ui-text-highlighted]'
|
icon: 'group-data-[state=checked]:text-[var(--ui-text-highlighted)]'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
size: {
|
size: {
|
||||||
@@ -71,7 +71,7 @@ export default (options: Required<ModuleOptions>) => ({
|
|||||||
},
|
},
|
||||||
required: {
|
required: {
|
||||||
true: {
|
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: {
|
disabled: {
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ export default (options: Required<ModuleOptions>) => ({
|
|||||||
root: 'flex items-center gap-2',
|
root: 'flex items-center gap-2',
|
||||||
list: 'relative flex p-1 group',
|
list: 'relative flex p-1 group',
|
||||||
indicator: 'absolute transition-[translate,width] duration-200',
|
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',
|
content: 'focus:outline-none w-full',
|
||||||
leadingIcon: 'shrink-0',
|
leadingIcon: 'shrink-0',
|
||||||
leadingAvatar: 'shrink-0',
|
leadingAvatar: 'shrink-0',
|
||||||
@@ -19,12 +19,12 @@ export default (options: Required<ModuleOptions>) => ({
|
|||||||
},
|
},
|
||||||
variant: {
|
variant: {
|
||||||
pill: {
|
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',
|
trigger: 'flex-1',
|
||||||
indicator: 'rounded-[calc(var(--ui-radius)*1.5)] shadow-sm'
|
indicator: 'rounded-[calc(var(--ui-radius)*1.5)] shadow-sm'
|
||||||
},
|
},
|
||||||
link: {
|
link: {
|
||||||
list: 'border-[--ui-border]',
|
list: 'border-[var(--ui-border)]',
|
||||||
indicator: 'rounded-full'
|
indicator: 'rounded-full'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -32,12 +32,12 @@ export default (options: Required<ModuleOptions>) => ({
|
|||||||
horizontal: {
|
horizontal: {
|
||||||
root: 'flex-col',
|
root: 'flex-col',
|
||||||
list: 'w-full',
|
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'
|
trigger: 'justify-center'
|
||||||
},
|
},
|
||||||
vertical: {
|
vertical: {
|
||||||
list: 'flex-col',
|
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: {
|
size: {
|
||||||
@@ -99,29 +99,29 @@ export default (options: Required<ModuleOptions>) => ({
|
|||||||
color,
|
color,
|
||||||
variant: 'pill',
|
variant: 'pill',
|
||||||
class: {
|
class: {
|
||||||
indicator: `bg-[--ui-${color}]`,
|
indicator: `bg-[var(--ui-${color})]`,
|
||||||
trigger: `data-[state=active]:text-[--ui-bg] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--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',
|
color: 'neutral',
|
||||||
variant: 'pill',
|
variant: 'pill',
|
||||||
class: {
|
class: {
|
||||||
indicator: 'bg-[--ui-bg-inverted]',
|
indicator: 'bg-[var(--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]'
|
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) => ({
|
}, ...(options.theme.colors || []).map((color: string) => ({
|
||||||
color,
|
color,
|
||||||
variant: 'link',
|
variant: 'link',
|
||||||
class: {
|
class: {
|
||||||
indicator: `bg-[--ui-${color}]`,
|
indicator: `bg-[var(--ui-${color})]`,
|
||||||
trigger: `data-[state=active]:text-[--ui-${color}] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--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',
|
color: 'neutral',
|
||||||
variant: 'link',
|
variant: 'link',
|
||||||
class: {
|
class: {
|
||||||
indicator: 'bg-[--ui-bg-inverted]',
|
indicator: 'bg-[var(--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]'
|
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: {
|
defaultVariants: {
|
||||||
|
|||||||
@@ -2,10 +2,10 @@ import type { ModuleOptions } from '../module'
|
|||||||
|
|
||||||
export default (options: Required<ModuleOptions>) => ({
|
export default (options: Required<ModuleOptions>) => ({
|
||||||
slots: {
|
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',
|
wrapper: 'w-0 flex-1 flex flex-col gap-1',
|
||||||
title: 'text-sm font-medium text-[--ui-text-highlighted]',
|
title: 'text-sm font-medium text-[var(--ui-text-highlighted)]',
|
||||||
description: 'text-sm text-[--ui-text-muted]',
|
description: 'text-sm text-[var(--ui-text-muted)]',
|
||||||
icon: 'shrink-0 size-5',
|
icon: 'shrink-0 size-5',
|
||||||
avatar: 'shrink-0',
|
avatar: 'shrink-0',
|
||||||
avatarSize: '2xl',
|
avatarSize: '2xl',
|
||||||
@@ -16,14 +16,14 @@ export default (options: Required<ModuleOptions>) => ({
|
|||||||
variants: {
|
variants: {
|
||||||
color: {
|
color: {
|
||||||
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
|
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
|
||||||
root: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-${color}]`,
|
root: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-${color})]`,
|
||||||
icon: `text-[--ui-${color}]`,
|
icon: `text-[var(--ui-${color})]`,
|
||||||
progress: `bg-[--ui-${color}]`
|
progress: `bg-[var(--ui-${color})]`
|
||||||
}])),
|
}])),
|
||||||
neutral: {
|
neutral: {
|
||||||
root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ui-border-inverted]',
|
root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)]',
|
||||||
icon: 'text-[--ui-text-highlighted]',
|
icon: 'text-[var(--ui-text-highlighted)]',
|
||||||
progress: 'bg-[--ui-bg-inverted]'
|
progress: 'bg-[var(--ui-bg-inverted)]'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
multiline: {
|
multiline: {
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
export default {
|
export default {
|
||||||
slots: {
|
slots: {
|
||||||
viewport: 'fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[--height] focus:outline-none',
|
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-[--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'
|
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: {
|
variants: {
|
||||||
position: {
|
position: {
|
||||||
@@ -45,10 +45,10 @@ export default {
|
|||||||
}
|
}
|
||||||
}, {
|
}, {
|
||||||
swipeDirection: ['left', 'right'],
|
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'],
|
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: {
|
defaultVariants: {
|
||||||
position: 'bottom-right'
|
position: 'bottom-right'
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
export default {
|
export default {
|
||||||
slots: {
|
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]',
|
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-[--ui-border]',
|
arrow: 'fill-[var(--ui-border)]',
|
||||||
text: 'truncate',
|
text: 'truncate',
|
||||||
kbds: `hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-['·'] before:mr-0.5`,
|
kbds: `hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-['·'] before:mr-0.5`,
|
||||||
kbdsSize: 'sm'
|
kbdsSize: 'sm'
|
||||||
|
|||||||
@@ -46,7 +46,7 @@ describe('Accordion', () => {
|
|||||||
['with collapsible', { props: { ...props, collapsible: false } }],
|
['with collapsible', { props: { ...props, collapsible: false } }],
|
||||||
['with trailingIcon', { props: { ...props, trailingIcon: 'i-heroicons-plus' } }],
|
['with trailingIcon', { props: { ...props, trailingIcon: 'i-heroicons-plus' } }],
|
||||||
['with class', { props: { ...props, class: 'w-96' } }],
|
['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
|
// Slots
|
||||||
['with leading slot', { props: { ...props, modelValue: '1' }, slots: { leading: () => 'Leading slot' } }],
|
['with leading slot', { props: { ...props, modelValue: '1' }, slots: { leading: () => 'Leading slot' } }],
|
||||||
['with default slot', { props: { ...props, modelValue: '1' }, slots: { default: () => 'Default slot' } }],
|
['with default slot', { props: { ...props, modelValue: '1' }, slots: { default: () => 'Default slot' } }],
|
||||||
|
|||||||
@@ -13,7 +13,7 @@ describe('Avatar', () => {
|
|||||||
['with text', { props: { text: '+1' } }],
|
['with text', { props: { text: '+1' } }],
|
||||||
['with icon', { props: { icon: 'i-heroicons-photo' } }],
|
['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 } }]),
|
...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' } } }]
|
['with ui', { props: { ui: { fallback: 'font-bold' } } }]
|
||||||
])('renders %s correctly', async (nameOrHtml: string, options: { props?: AvatarProps }) => {
|
])('renders %s correctly', async (nameOrHtml: string, options: { props?: AvatarProps }) => {
|
||||||
const html = await ComponentRender(nameOrHtml, options, Avatar)
|
const html = await ComponentRender(nameOrHtml, options, Avatar)
|
||||||
|
|||||||
@@ -17,7 +17,7 @@ describe('Chip', () => {
|
|||||||
['with color neutral', { props: { color: 'neutral' } }],
|
['with color neutral', { props: { color: 'neutral' } }],
|
||||||
['without show', { props: { show: false } }],
|
['without show', { props: { show: false } }],
|
||||||
['with class', { props: { class: 'mx-auto' } }],
|
['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
|
// Slots
|
||||||
['with default slot', { slots: { default: () => 'Default slot' } }],
|
['with default slot', { slots: { default: () => 'Default slot' } }],
|
||||||
['with content slot', { slots: { content: () => 'Content slot' } }]
|
['with content slot', { slots: { content: () => 'Content slot' } }]
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ describe('Collapsible', () => {
|
|||||||
// Props
|
// Props
|
||||||
['with open', { props }],
|
['with open', { props }],
|
||||||
['with class', { props: { ...props, class: 'gap-4' } }],
|
['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
|
// Slots
|
||||||
['with default slot', { props, slots: { default: () => 'Default slot' } }],
|
['with default slot', { props, slots: { default: () => 'Default slot' } }],
|
||||||
['with content slot', { props, slots: { content: () => 'Content slot' } }]
|
['with content slot', { props, slots: { content: () => 'Content slot' } }]
|
||||||
|
|||||||
@@ -74,7 +74,7 @@ describe('CommandPalette', () => {
|
|||||||
['with close', { props: { ...props, close: true } }],
|
['with close', { props: { ...props, close: true } }],
|
||||||
['with closeIcon', { props: { ...props, close: true, closeIcon: 'i-heroicons-trash' } }],
|
['with closeIcon', { props: { ...props, close: true, closeIcon: 'i-heroicons-trash' } }],
|
||||||
['with as', { props: { ...props, as: 'section' } }],
|
['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' } } }],
|
['with ui', { props: { ...props, ui: { input: '[&>input]:h-10' } } }],
|
||||||
// Slots
|
// Slots
|
||||||
['with empty slot', { props, slots: { empty: () => 'Empty slot' } }],
|
['with empty slot', { props, slots: { empty: () => 'Empty slot' } }],
|
||||||
|
|||||||
@@ -14,7 +14,7 @@ describe('Drawer', () => {
|
|||||||
['with right direction', { props: { ...props, direction: 'right' as const, title: 'Title', description: 'Description' } }],
|
['with right direction', { props: { ...props, direction: 'right' as const, title: 'Title', description: 'Description' } }],
|
||||||
['without handle', { props: { ...props, handle: false, title: 'Title', description: 'Description' } }],
|
['without handle', { props: { ...props, handle: false, title: 'Title', description: 'Description' } }],
|
||||||
['without overlay', { props: { ...props, overlay: 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' } } }],
|
['with ui', { props: { ...props, ui: { handle: 'w-20' } } }],
|
||||||
// Slots
|
// Slots
|
||||||
['with default slot', { props, slots: { default: () => 'Default slot' } }],
|
['with default slot', { props, slots: { default: () => 'Default slot' } }],
|
||||||
|
|||||||
@@ -29,7 +29,7 @@ describe('FormField', () => {
|
|||||||
['with hint', { props: { hint: 'Use letters, numbers, and special characters' } }],
|
['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 } }]),
|
...sizes.map((size: string) => [`with size ${size}`, { props: { label: 'Username', description: 'Enter your username', size } }]),
|
||||||
['with class', { props: { class: 'relative' } }],
|
['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
|
// Slots
|
||||||
['with default slot', { slots: { default: () => 'Default slot' } }],
|
['with default slot', { slots: { default: () => 'Default slot' } }],
|
||||||
['with label slot', { slots: { label: () => 'Label slot' } }],
|
['with label slot', { slots: { label: () => 'Label slot' } }],
|
||||||
|
|||||||
@@ -11,8 +11,8 @@ describe('Link', () => {
|
|||||||
['with disabled', { props: { disabled: true } }],
|
['with disabled', { props: { disabled: true } }],
|
||||||
['with raw', { props: { raw: true } }],
|
['with raw', { props: { raw: true } }],
|
||||||
['with class', { props: { class: 'font-medium' } }],
|
['with class', { props: { class: 'font-medium' } }],
|
||||||
['with activeClass', { props: { active: true, activeClass: 'text-[--ui-text-highlighted]' } }],
|
['with activeClass', { props: { active: true, activeClass: 'text-[var(--ui-text-highlighted)]' } }],
|
||||||
['with inactiveClass', { props: { active: false, inactiveClass: 'hover:text-[--ui-primary]' } }],
|
['with inactiveClass', { props: { active: false, inactiveClass: 'hover:text-[var(--ui-primary)]' } }],
|
||||||
// Slots
|
// Slots
|
||||||
['with default slot', { slots: { default: () => 'Default slot' } }]
|
['with default slot', { slots: { default: () => 'Default slot' } }]
|
||||||
])('renders %s correctly', async (nameOrHtml: string, options: { props?: LinkProps, slots?: Partial<LinkSlots> }) => {
|
])('renders %s correctly', async (nameOrHtml: string, options: { props?: LinkProps, slots?: Partial<LinkSlots> }) => {
|
||||||
|
|||||||
@@ -15,7 +15,7 @@ describe('Modal', () => {
|
|||||||
['without transition', { props: { ...props, transition: false, title: 'Title', description: 'Description' } }],
|
['without transition', { props: { ...props, transition: false, title: 'Title', description: 'Description' } }],
|
||||||
['without close', { props: { ...props, close: false, title: 'Title', description: 'Description' } }],
|
['without close', { props: { ...props, close: false, title: 'Title', description: 'Description' } }],
|
||||||
['with closeIcon', { props: { ...props, closeIcon: 'i-heroicons-trash' } }],
|
['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' } } }],
|
['with ui', { props: { ...props, ui: { close: 'right-2' } } }],
|
||||||
// Slots
|
// Slots
|
||||||
['with default slot', { props, slots: { default: () => 'Default slot' } }],
|
['with default slot', { props, slots: { default: () => 'Default slot' } }],
|
||||||
|
|||||||
@@ -22,7 +22,7 @@ describe('Progress', () => {
|
|||||||
...animations.map((animation: string) => [`with animation ${animation}`, { props: { animation } }]),
|
...animations.map((animation: string) => [`with animation ${animation}`, { props: { animation } }]),
|
||||||
['with color neutral', { props: { color: 'neutral', modelValue: 50 } }],
|
['with color neutral', { props: { color: 'neutral', modelValue: 50 } }],
|
||||||
['with class', { props: { class: 'w-48' } }],
|
['with class', { props: { class: 'w-48' } }],
|
||||||
['with ui', { props: { ui: { base: 'bg-[--ui-bg]' } } }],
|
['with ui', { props: { ui: { base: 'bg-[var(--ui-bg)]' } } }],
|
||||||
// Slots
|
// Slots
|
||||||
['with status slot', { slots: { status: () => 'Status slot' } }]
|
['with status slot', { slots: { status: () => 'Status slot' } }]
|
||||||
])('renders %s correctly', async (nameOrHtml: string, options: { props?: ProgressProps, slots?: Partial<ProgressSlots> }) => {
|
])('renders %s correctly', async (nameOrHtml: string, options: { props?: ProgressProps, slots?: Partial<ProgressSlots> }) => {
|
||||||
|
|||||||
@@ -17,7 +17,7 @@ describe('Slideover', () => {
|
|||||||
['without transition', { props: { ...props, transition: false, title: 'Title', description: 'Description' } }],
|
['without transition', { props: { ...props, transition: false, title: 'Title', description: 'Description' } }],
|
||||||
['without close', { props: { ...props, close: false, title: 'Title', description: 'Description' } }],
|
['without close', { props: { ...props, close: false, title: 'Title', description: 'Description' } }],
|
||||||
['with closeIcon', { props: { ...props, closeIcon: 'i-heroicons-trash' } }],
|
['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' } } }],
|
['with ui', { props: { ...props, ui: { close: 'right-2' } } }],
|
||||||
// Slots
|
// Slots
|
||||||
['with default slot', { props, slots: { default: () => 'Default slot' } }],
|
['with default slot', { props, slots: { default: () => 'Default slot' } }],
|
||||||
|
|||||||
@@ -22,7 +22,7 @@ describe('Slider', () => {
|
|||||||
...sizes.map((size: string) => [`with size ${size}`, { props: { size } }]),
|
...sizes.map((size: string) => [`with size ${size}`, { props: { size } }]),
|
||||||
['with color neutral', { props: { color: 'neutral', defaultValue: 10 } }],
|
['with color neutral', { props: { color: 'neutral', defaultValue: 10 } }],
|
||||||
['with class', { props: { class: 'w-48' } }],
|
['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 }) => {
|
])('renders %s correctly', async (nameOrHtml: string, options: { props?: SliderProps }) => {
|
||||||
const html = await ComponentRender(nameOrHtml, options, Slider)
|
const html = await ComponentRender(nameOrHtml, options, Slider)
|
||||||
expect(html).toMatchSnapshot()
|
expect(html).toMatchSnapshot()
|
||||||
|
|||||||
@@ -38,7 +38,7 @@ describe('Tabs', () => {
|
|||||||
...variants.map((variant: string) => [`with neutral variant ${variant}`, { props: { ...props, variant, color: 'neutral' } }]),
|
...variants.map((variant: string) => [`with neutral variant ${variant}`, { props: { ...props, variant, color: 'neutral' } }]),
|
||||||
['without content', { props: { ...props, content: false } }],
|
['without content', { props: { ...props, content: false } }],
|
||||||
['with class', { props: { ...props, class: 'w-96' } }],
|
['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
|
// Slots
|
||||||
['with leading slot', { props, slots: { leading: () => 'Leading slot' } }],
|
['with leading slot', { props, slots: { leading: () => 'Leading slot' } }],
|
||||||
['with default slot', { props, slots: { default: () => 'Default slot' } }],
|
['with default slot', { props, slots: { default: () => 'Default slot' } }],
|
||||||
|
|||||||
@@ -38,7 +38,7 @@ describe('Toast', () => {
|
|||||||
['with closeIcon', { props: { ...props, closeIcon: 'i-heroicons-trash' } }],
|
['with closeIcon', { props: { ...props, closeIcon: 'i-heroicons-trash' } }],
|
||||||
['with type', { props: { ...props, type: 'background' as const } }],
|
['with type', { props: { ...props, type: 'background' as const } }],
|
||||||
['with color neutral', { props: { ...props, color: 'neutral' 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' } } }],
|
['with ui', { props: { ...props, ui: { title: 'font-bold' } } }],
|
||||||
// Slots
|
// Slots
|
||||||
['with leading slot', { props, slots: { leading: () => 'Leading slot' } }],
|
['with leading slot', { props, slots: { leading: () => 'Leading slot' } }],
|
||||||
|
|||||||
@@ -2,38 +2,38 @@
|
|||||||
|
|
||||||
exports[`Accordion > renders with as correctly 1`] = `
|
exports[`Accordion > renders with as correctly 1`] = `
|
||||||
"<section class="w-full">
|
"<section class="w-full">
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
@@ -43,38 +43,38 @@ exports[`Accordion > renders with as correctly 1`] = `
|
|||||||
|
|
||||||
exports[`Accordion > renders with body slot correctly 1`] = `
|
exports[`Accordion > renders with body slot correctly 1`] = `
|
||||||
"<div class="w-full">
|
"<div class="w-full">
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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 class="text-sm pb-3.5">Body slot</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
@@ -84,38 +84,38 @@ exports[`Accordion > renders with body slot correctly 1`] = `
|
|||||||
|
|
||||||
exports[`Accordion > renders with class correctly 1`] = `
|
exports[`Accordion > renders with class correctly 1`] = `
|
||||||
"<div class="w-96">
|
"<div class="w-96">
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
@@ -125,38 +125,38 @@ exports[`Accordion > renders with class correctly 1`] = `
|
|||||||
|
|
||||||
exports[`Accordion > renders with collapsible correctly 1`] = `
|
exports[`Accordion > renders with collapsible correctly 1`] = `
|
||||||
"<div class="w-full">
|
"<div class="w-full">
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
@@ -166,36 +166,36 @@ exports[`Accordion > renders with collapsible correctly 1`] = `
|
|||||||
|
|
||||||
exports[`Accordion > renders with content slot correctly 1`] = `
|
exports[`Accordion > renders with content slot correctly 1`] = `
|
||||||
"<div class="w-full">
|
"<div class="w-full">
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
@@ -205,38 +205,38 @@ exports[`Accordion > renders with content slot correctly 1`] = `
|
|||||||
|
|
||||||
exports[`Accordion > renders with custom body slot correctly 1`] = `
|
exports[`Accordion > renders with custom body slot correctly 1`] = `
|
||||||
"<div class="w-full">
|
"<div class="w-full">
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="open" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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 class="text-sm pb-3.5">Custom body slot</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -246,38 +246,38 @@ exports[`Accordion > renders with custom body slot correctly 1`] = `
|
|||||||
|
|
||||||
exports[`Accordion > renders with custom slot correctly 1`] = `
|
exports[`Accordion > renders with custom slot correctly 1`] = `
|
||||||
"<div class="w-full">
|
"<div class="w-full">
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="open" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
||||||
</div>"
|
</div>"
|
||||||
@@ -285,38 +285,38 @@ exports[`Accordion > renders with custom slot correctly 1`] = `
|
|||||||
|
|
||||||
exports[`Accordion > renders with default slot correctly 1`] = `
|
exports[`Accordion > renders with default slot correctly 1`] = `
|
||||||
"<div class="w-full">
|
"<div class="w-full">
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
@@ -326,38 +326,38 @@ exports[`Accordion > renders with default slot correctly 1`] = `
|
|||||||
|
|
||||||
exports[`Accordion > renders with defaultValue correctly 1`] = `
|
exports[`Accordion > renders with defaultValue correctly 1`] = `
|
||||||
"<div class="w-full">
|
"<div class="w-full">
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
@@ -367,38 +367,38 @@ exports[`Accordion > renders with defaultValue correctly 1`] = `
|
|||||||
|
|
||||||
exports[`Accordion > renders with disabled correctly 1`] = `
|
exports[`Accordion > renders with disabled correctly 1`] = `
|
||||||
"<div class="w-full">
|
"<div class="w-full">
|
||||||
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
@@ -408,38 +408,38 @@ exports[`Accordion > renders with disabled correctly 1`] = `
|
|||||||
|
|
||||||
exports[`Accordion > renders with items correctly 1`] = `
|
exports[`Accordion > renders with items correctly 1`] = `
|
||||||
"<div class="w-full">
|
"<div class="w-full">
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
@@ -449,38 +449,38 @@ exports[`Accordion > renders with items correctly 1`] = `
|
|||||||
|
|
||||||
exports[`Accordion > renders with labelKey correctly 1`] = `
|
exports[`Accordion > renders with labelKey correctly 1`] = `
|
||||||
"<div class="w-full">
|
"<div class="w-full">
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
@@ -490,38 +490,38 @@ exports[`Accordion > renders with labelKey correctly 1`] = `
|
|||||||
|
|
||||||
exports[`Accordion > renders with leading slot correctly 1`] = `
|
exports[`Accordion > renders with leading slot correctly 1`] = `
|
||||||
"<div class="w-full">
|
"<div class="w-full">
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
@@ -531,38 +531,38 @@ exports[`Accordion > renders with leading slot correctly 1`] = `
|
|||||||
|
|
||||||
exports[`Accordion > renders with modelValue correctly 1`] = `
|
exports[`Accordion > renders with modelValue correctly 1`] = `
|
||||||
"<div class="w-full">
|
"<div class="w-full">
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
@@ -572,38 +572,38 @@ exports[`Accordion > renders with modelValue correctly 1`] = `
|
|||||||
|
|
||||||
exports[`Accordion > renders with trailing slot correctly 1`] = `
|
exports[`Accordion > renders with trailing slot correctly 1`] = `
|
||||||
"<div class="w-full">
|
"<div class="w-full">
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
@@ -613,38 +613,38 @@ exports[`Accordion > renders with trailing slot correctly 1`] = `
|
|||||||
|
|
||||||
exports[`Accordion > renders with trailingIcon correctly 1`] = `
|
exports[`Accordion > renders with trailingIcon correctly 1`] = `
|
||||||
"<div class="w-full">
|
"<div class="w-full">
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
@@ -654,38 +654,38 @@ exports[`Accordion > renders with trailingIcon correctly 1`] = `
|
|||||||
|
|
||||||
exports[`Accordion > renders with type correctly 1`] = `
|
exports[`Accordion > renders with type correctly 1`] = `
|
||||||
"<div class="w-full">
|
"<div class="w-full">
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[--ui-border] last:border-b-0">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
@@ -695,38 +695,38 @@ exports[`Accordion > renders with type correctly 1`] = `
|
|||||||
|
|
||||||
exports[`Accordion > renders with ui correctly 1`] = `
|
exports[`Accordion > renders with ui correctly 1`] = `
|
||||||
"<div class="w-full">
|
"<div class="w-full">
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b last:border-b-0 border-[--ui-border-accented]">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b last:border-b-0 border-[--ui-border-accented]">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b last:border-b-0 border-[--ui-border-accented]">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b last:border-b-0 border-[--ui-border-accented]">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b last:border-b-0 border-[--ui-border-accented]">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
<div data-state="closed" data-orientation="vertical" class="border-b last:border-b-0 border-[--ui-border-accented]">
|
<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-[--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>
|
<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 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>
|
</div>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||||
|
|
||||||
exports[`Alert > renders with as correctly 1`] = `
|
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-->
|
<!--v-if-->
|
||||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||||
<div class="text-sm font-medium">Alert</div>
|
<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`] = `
|
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="min-w-0 flex-1 flex flex-col gap-1">
|
||||||
<div class="text-sm font-medium">Alert</div>
|
<div class="text-sm font-medium">Alert</div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
@@ -24,7 +24,7 @@ exports[`Alert > renders with avatar correctly 1`] = `
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Alert > renders with class 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-->
|
<!--v-if-->
|
||||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||||
<div class="text-sm font-medium">Alert</div>
|
<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`] = `
|
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-->
|
<!--v-if-->
|
||||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||||
<div class="text-sm font-medium">Alert</div>
|
<div class="text-sm font-medium">Alert</div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</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-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button></div>
|
</button></div>
|
||||||
@@ -51,7 +51,7 @@ exports[`Alert > renders with close correctly 1`] = `
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Alert > renders with close slot 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-->
|
<!--v-if-->
|
||||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||||
<div class="text-sm font-medium">Alert</div>
|
<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`] = `
|
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-->
|
<!--v-if-->
|
||||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||||
<div class="text-sm font-medium">Alert</div>
|
<div class="text-sm font-medium">Alert</div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</div>
|
</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-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button></div>
|
</button></div>
|
||||||
@@ -78,7 +78,7 @@ exports[`Alert > renders with closeIcon correctly 1`] = `
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Alert > renders with description 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-->
|
<!--v-if-->
|
||||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||||
<div class="text-sm font-medium">Alert</div>
|
<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`] = `
|
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-->
|
<!--v-if-->
|
||||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||||
<div class="text-sm font-medium">Alert</div>
|
<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`] = `
|
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="min-w-0 flex-1 flex flex-col gap-1">
|
||||||
<div class="text-sm font-medium">Alert</div>
|
<div class="text-sm font-medium">Alert</div>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
@@ -113,7 +113,7 @@ exports[`Alert > renders with icon correctly 1`] = `
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Alert > renders with leading slot 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-->
|
<!--v-if-->
|
||||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||||
<div class="text-sm font-medium">Leading slot</div>
|
<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`] = `
|
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-->
|
<!--v-if-->
|
||||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||||
<div class="text-sm font-medium">Alert</div>
|
<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`] = `
|
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-->
|
<!--v-if-->
|
||||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||||
<div class="text-sm font-medium">Alert</div>
|
<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`] = `
|
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-->
|
<!--v-if-->
|
||||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||||
<div class="text-sm font-medium">Alert</div>
|
<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`] = `
|
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-->
|
<!--v-if-->
|
||||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||||
<div class="text-sm font-medium">Alert</div>
|
<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`] = `
|
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-->
|
<!--v-if-->
|
||||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||||
<div class="text-sm font-medium">Alert</div>
|
<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`] = `
|
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-->
|
<!--v-if-->
|
||||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||||
<div class="text-sm font-medium">Alert</div>
|
<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`] = `
|
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-->
|
<!--v-if-->
|
||||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||||
<div class="text-sm font-medium">Alert</div>
|
<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`] = `
|
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-->
|
<!--v-if-->
|
||||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||||
<div class="text-sm font-medium">Alert</div>
|
<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`] = `
|
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-->
|
<!--v-if-->
|
||||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||||
<div class="text-sm font-medium">Alert</div>
|
<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`] = `
|
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-->
|
<!--v-if-->
|
||||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||||
<div class="text-sm font-medium">Title slot</div>
|
<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`] = `
|
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-->
|
<!--v-if-->
|
||||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||||
<div class="text-sm font-bold">Alert</div>
|
<div class="text-sm font-bold">Alert</div>
|
||||||
|
|||||||
@@ -1,31 +1,31 @@
|
|||||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
// 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>"`;
|
||||||
|
|||||||
@@ -1,77 +1,77 @@
|
|||||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
// 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`] = `
|
exports[`AvatarGroup > renders with class correctly 1`] = `
|
||||||
"<div class="inline-flex flex-row-reverse justify-start">
|
"<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>"
|
</div>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`AvatarGroup > renders with default slot correctly 1`] = `
|
exports[`AvatarGroup > renders with default slot correctly 1`] = `
|
||||||
"<div class="inline-flex flex-row-reverse justify-end">
|
"<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>"
|
</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`] = `
|
exports[`AvatarGroup > renders with size 2xl correctly 1`] = `
|
||||||
"<div class="inline-flex flex-row-reverse justify-end">
|
"<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>"
|
</div>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`AvatarGroup > renders with size 2xs correctly 1`] = `
|
exports[`AvatarGroup > renders with size 2xs correctly 1`] = `
|
||||||
"<div class="inline-flex flex-row-reverse justify-end">
|
"<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>"
|
</div>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`AvatarGroup > renders with size 3xl correctly 1`] = `
|
exports[`AvatarGroup > renders with size 3xl correctly 1`] = `
|
||||||
"<div class="inline-flex flex-row-reverse justify-end">
|
"<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>"
|
</div>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`AvatarGroup > renders with size 3xs correctly 1`] = `
|
exports[`AvatarGroup > renders with size 3xs correctly 1`] = `
|
||||||
"<div class="inline-flex flex-row-reverse justify-end">
|
"<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>"
|
</div>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`AvatarGroup > renders with size lg correctly 1`] = `
|
exports[`AvatarGroup > renders with size lg correctly 1`] = `
|
||||||
"<div class="inline-flex flex-row-reverse justify-end">
|
"<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>"
|
</div>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`AvatarGroup > renders with size md correctly 1`] = `
|
exports[`AvatarGroup > renders with size md correctly 1`] = `
|
||||||
"<div class="inline-flex flex-row-reverse justify-end">
|
"<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>"
|
</div>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`AvatarGroup > renders with size sm correctly 1`] = `
|
exports[`AvatarGroup > renders with size sm correctly 1`] = `
|
||||||
"<div class="inline-flex flex-row-reverse justify-end">
|
"<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>"
|
</div>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`AvatarGroup > renders with size xl correctly 1`] = `
|
exports[`AvatarGroup > renders with size xl correctly 1`] = `
|
||||||
"<div class="inline-flex flex-row-reverse justify-end">
|
"<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>"
|
</div>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`AvatarGroup > renders with size xs correctly 1`] = `
|
exports[`AvatarGroup > renders with size xs correctly 1`] = `
|
||||||
"<div class="inline-flex flex-row-reverse justify-end">
|
"<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>"
|
</div>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`AvatarGroup > renders with ui correctly 1`] = `
|
exports[`AvatarGroup > renders with ui correctly 1`] = `
|
||||||
"<div class="inline-flex flex-row-reverse justify-end">
|
"<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>"
|
</div>"
|
||||||
`;
|
`;
|
||||||
|
|||||||
@@ -1,31 +1,31 @@
|
|||||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
// 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>"`;
|
||||||
|
|||||||
@@ -3,11 +3,11 @@
|
|||||||
exports[`Breadcrumb > renders with class correctly 1`] = `
|
exports[`Breadcrumb > renders with class correctly 1`] = `
|
||||||
"<div aria-label="breadcrumb" class="relative min-w-0 w-48">
|
"<div aria-label="breadcrumb" class="relative min-w-0 w-48">
|
||||||
<ol class="flex items-center gap-1.5">
|
<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"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-[--ui-text-muted]" aria-hidden="true"></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"><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"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-[--ui-text-muted]" aria-hidden="true"></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-[--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-->
|
<!--v-if-->
|
||||||
</ol>
|
</ol>
|
||||||
</div>"
|
</div>"
|
||||||
@@ -16,11 +16,11 @@ exports[`Breadcrumb > renders with class correctly 1`] = `
|
|||||||
exports[`Breadcrumb > renders with custom slot correctly 1`] = `
|
exports[`Breadcrumb > renders with custom slot correctly 1`] = `
|
||||||
"<div aria-label="breadcrumb" class="relative min-w-0">
|
"<div aria-label="breadcrumb" class="relative min-w-0">
|
||||||
<ol class="flex items-center gap-1.5">
|
<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"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-[--ui-text-muted]" aria-hidden="true"></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"><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"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-[--ui-text-muted]" aria-hidden="true"></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-[--ui-primary] text-[--ui-primary] font-semibold">Custom slot</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">Custom slot</a></li>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</ol>
|
</ol>
|
||||||
</div>"
|
</div>"
|
||||||
@@ -29,11 +29,11 @@ exports[`Breadcrumb > renders with custom slot correctly 1`] = `
|
|||||||
exports[`Breadcrumb > renders with item slot correctly 1`] = `
|
exports[`Breadcrumb > renders with item slot correctly 1`] = `
|
||||||
"<div aria-label="breadcrumb" class="relative min-w-0">
|
"<div aria-label="breadcrumb" class="relative min-w-0">
|
||||||
<ol class="flex items-center gap-1.5">
|
<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 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-[--ui-text-muted]" aria-hidden="true"></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"><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 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-[--ui-text-muted]" aria-hidden="true"></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-[--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-->
|
<!--v-if-->
|
||||||
</ol>
|
</ol>
|
||||||
</div>"
|
</div>"
|
||||||
@@ -42,11 +42,11 @@ exports[`Breadcrumb > renders with item slot correctly 1`] = `
|
|||||||
exports[`Breadcrumb > renders with item-label slot correctly 1`] = `
|
exports[`Breadcrumb > renders with item-label slot correctly 1`] = `
|
||||||
"<div aria-label="breadcrumb" class="relative min-w-0">
|
"<div aria-label="breadcrumb" class="relative min-w-0">
|
||||||
<ol class="flex items-center gap-1.5">
|
<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 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-[--ui-text-muted]" aria-hidden="true"></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"><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 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-[--ui-text-muted]" aria-hidden="true"></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-[--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-->
|
<!--v-if-->
|
||||||
</ol>
|
</ol>
|
||||||
</div>"
|
</div>"
|
||||||
@@ -55,11 +55,11 @@ exports[`Breadcrumb > renders with item-label slot correctly 1`] = `
|
|||||||
exports[`Breadcrumb > renders with item-leading slot correctly 1`] = `
|
exports[`Breadcrumb > renders with item-leading slot correctly 1`] = `
|
||||||
"<div aria-label="breadcrumb" class="relative min-w-0">
|
"<div aria-label="breadcrumb" class="relative min-w-0">
|
||||||
<ol class="flex items-center gap-1.5">
|
<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 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-[--ui-text-muted]" aria-hidden="true"></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"><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 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-[--ui-text-muted]" aria-hidden="true"></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-[--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-->
|
<!--v-if-->
|
||||||
</ol>
|
</ol>
|
||||||
</div>"
|
</div>"
|
||||||
@@ -68,11 +68,11 @@ exports[`Breadcrumb > renders with item-leading slot correctly 1`] = `
|
|||||||
exports[`Breadcrumb > renders with item-trailing slot correctly 1`] = `
|
exports[`Breadcrumb > renders with item-trailing slot correctly 1`] = `
|
||||||
"<div aria-label="breadcrumb" class="relative min-w-0">
|
"<div aria-label="breadcrumb" class="relative min-w-0">
|
||||||
<ol class="flex items-center gap-1.5">
|
<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 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-[--ui-text-muted]" aria-hidden="true"></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"><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 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-[--ui-text-muted]" aria-hidden="true"></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-[--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-->
|
<!--v-if-->
|
||||||
</ol>
|
</ol>
|
||||||
</div>"
|
</div>"
|
||||||
@@ -81,11 +81,11 @@ exports[`Breadcrumb > renders with item-trailing slot correctly 1`] = `
|
|||||||
exports[`Breadcrumb > renders with items correctly 1`] = `
|
exports[`Breadcrumb > renders with items correctly 1`] = `
|
||||||
"<div aria-label="breadcrumb" class="relative min-w-0">
|
"<div aria-label="breadcrumb" class="relative min-w-0">
|
||||||
<ol class="flex items-center gap-1.5">
|
<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"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-[--ui-text-muted]" aria-hidden="true"></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"><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"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-[--ui-text-muted]" aria-hidden="true"></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-[--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-->
|
<!--v-if-->
|
||||||
</ol>
|
</ol>
|
||||||
</div>"
|
</div>"
|
||||||
@@ -94,13 +94,13 @@ exports[`Breadcrumb > renders with items correctly 1`] = `
|
|||||||
exports[`Breadcrumb > renders with labelKey correctly 1`] = `
|
exports[`Breadcrumb > renders with labelKey correctly 1`] = `
|
||||||
"<div aria-label="breadcrumb" class="relative min-w-0">
|
"<div aria-label="breadcrumb" class="relative min-w-0">
|
||||||
<ol class="flex items-center gap-1.5">
|
<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-->
|
<!--v-if-->
|
||||||
</a></li>
|
</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 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-[--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 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-[--ui-text-muted]" aria-hidden="true"></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-[--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 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-->
|
<!--v-if-->
|
||||||
</ol>
|
</ol>
|
||||||
</div>"
|
</div>"
|
||||||
@@ -109,11 +109,11 @@ exports[`Breadcrumb > renders with labelKey correctly 1`] = `
|
|||||||
exports[`Breadcrumb > renders with separator slot correctly 1`] = `
|
exports[`Breadcrumb > renders with separator slot correctly 1`] = `
|
||||||
"<div aria-label="breadcrumb" class="relative min-w-0">
|
"<div aria-label="breadcrumb" class="relative min-w-0">
|
||||||
<ol class="flex items-center gap-1.5">
|
<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 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 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-->
|
<!--v-if-->
|
||||||
</ol>
|
</ol>
|
||||||
</div>"
|
</div>"
|
||||||
@@ -122,11 +122,11 @@ exports[`Breadcrumb > renders with separator slot correctly 1`] = `
|
|||||||
exports[`Breadcrumb > renders with separatorIcon correctly 1`] = `
|
exports[`Breadcrumb > renders with separatorIcon correctly 1`] = `
|
||||||
"<div aria-label="breadcrumb" class="relative min-w-0">
|
"<div aria-label="breadcrumb" class="relative min-w-0">
|
||||||
<ol class="flex items-center gap-1.5">
|
<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"><span class="iconify i-heroicons:minus shrink-0 size-5 text-[--ui-text-muted]" aria-hidden="true"></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"><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"><span class="iconify i-heroicons:minus shrink-0 size-5 text-[--ui-text-muted]" aria-hidden="true"></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-[--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-->
|
<!--v-if-->
|
||||||
</ol>
|
</ol>
|
||||||
</div>"
|
</div>"
|
||||||
@@ -135,11 +135,11 @@ exports[`Breadcrumb > renders with separatorIcon correctly 1`] = `
|
|||||||
exports[`Breadcrumb > renders with ui correctly 1`] = `
|
exports[`Breadcrumb > renders with ui correctly 1`] = `
|
||||||
"<div aria-label="breadcrumb" class="relative min-w-0">
|
"<div aria-label="breadcrumb" class="relative min-w-0">
|
||||||
<ol class="flex items-center gap-1.5">
|
<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 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-[--ui-text-muted]" aria-hidden="true"></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"><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 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-[--ui-text-muted]" aria-hidden="true"></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-[--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="/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-->
|
<!--v-if-->
|
||||||
</ol>
|
</ol>
|
||||||
</div>"
|
</div>"
|
||||||
|
|||||||
@@ -1,229 +1,229 @@
|
|||||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||||
|
|
||||||
exports[`Button > renders with block correctly 1`] = `
|
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--><span class="truncate">Button</span>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>"
|
</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`] = `
|
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-->Default slot
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>"
|
</button>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Button > renders with disabled and with link correctly 1`] = `
|
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--><span class="truncate">Button</span>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</a>"
|
</a>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Button > renders with disabled correctly 1`] = `
|
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--><span class="truncate">Button</span>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>"
|
</button>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Button > renders with icon correctly 1`] = `
|
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-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>"
|
</button>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Button > renders with label correctly 1`] = `
|
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--><span class="truncate">Button</span>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>"
|
</button>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Button > renders with leading and icon correctly 1`] = `
|
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-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>"
|
</button>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Button > renders with leading slot correctly 1`] = `
|
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-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>"
|
</button>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Button > renders with leadingIcon correctly 1`] = `
|
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-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>"
|
</button>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Button > renders with loading correctly 1`] = `
|
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-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>"
|
</button>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Button > renders with loadingIcon correctly 1`] = `
|
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-->
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>"
|
</button>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Button > renders with neutral variant ghost correctly 1`] = `
|
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--><span class="truncate">Button</span>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>"
|
</button>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Button > renders with neutral variant link correctly 1`] = `
|
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--><span class="truncate">Button</span>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>"
|
</button>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Button > renders with neutral variant outline correctly 1`] = `
|
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--><span class="truncate">Button</span>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>"
|
</button>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Button > renders with neutral variant soft correctly 1`] = `
|
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--><span class="truncate">Button</span>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>"
|
</button>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Button > renders with neutral variant solid correctly 1`] = `
|
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--><span class="truncate">Button</span>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>"
|
</button>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Button > renders with neutral variant subtle correctly 1`] = `
|
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--><span class="truncate">Button</span>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>"
|
</button>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Button > renders with primary variant ghost correctly 1`] = `
|
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--><span class="truncate">Button</span>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>"
|
</button>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Button > renders with primary variant link correctly 1`] = `
|
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--><span class="truncate">Button</span>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>"
|
</button>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Button > renders with primary variant outline correctly 1`] = `
|
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--><span class="truncate">Button</span>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>"
|
</button>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Button > renders with primary variant soft correctly 1`] = `
|
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--><span class="truncate">Button</span>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>"
|
</button>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Button > renders with primary variant solid correctly 1`] = `
|
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--><span class="truncate">Button</span>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>"
|
</button>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Button > renders with primary variant subtle correctly 1`] = `
|
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--><span class="truncate">Button</span>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>"
|
</button>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Button > renders with size lg correctly 1`] = `
|
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--><span class="truncate">Button</span>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>"
|
</button>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Button > renders with size md correctly 1`] = `
|
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--><span class="truncate">Button</span>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>"
|
</button>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Button > renders with size sm correctly 1`] = `
|
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--><span class="truncate">Button</span>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>"
|
</button>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Button > renders with size xl correctly 1`] = `
|
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--><span class="truncate">Button</span>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>"
|
</button>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Button > renders with size xs correctly 1`] = `
|
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--><span class="truncate">Button</span>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>"
|
</button>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Button > renders with square correctly 1`] = `
|
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--><span class="truncate">Button</span>
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>"
|
</button>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Button > renders with trailing and icon correctly 1`] = `
|
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-->
|
||||||
<!--v-if--><span class="iconify i-heroicons:arrow-right shrink-0 size-5" aria-hidden="true"></span>
|
<!--v-if--><span class="iconify i-heroicons:arrow-right shrink-0 size-5" aria-hidden="true"></span>
|
||||||
</button>"
|
</button>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Button > renders with trailing slot correctly 1`] = `
|
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-->
|
||||||
<!--v-if-->Trailing slot
|
<!--v-if-->Trailing slot
|
||||||
</button>"
|
</button>"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Button > renders with trailingIcon correctly 1`] = `
|
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-->
|
||||||
<!--v-if--><span class="iconify i-heroicons:arrow-right shrink-0 size-5" aria-hidden="true"></span>
|
<!--v-if--><span class="iconify i-heroicons:arrow-right shrink-0 size-5" aria-hidden="true"></span>
|
||||||
</button>"
|
</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>"`;
|
||||||
|
|||||||
@@ -2,10 +2,10 @@
|
|||||||
|
|
||||||
exports[`ButtonGroup > renders orientation vertical with default slot correctly 1`] = `
|
exports[`ButtonGroup > renders orientation vertical with default slot correctly 1`] = `
|
||||||
"<div class="relative flex flex-col -space-y-px">
|
"<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-->
|
||||||
<!--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--> Click me!
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>
|
</button>
|
||||||
@@ -18,10 +18,10 @@ exports[`ButtonGroup > renders with class correctly 1`] = `"<div class="relative
|
|||||||
|
|
||||||
exports[`ButtonGroup > renders with default slot correctly 1`] = `
|
exports[`ButtonGroup > renders with default slot correctly 1`] = `
|
||||||
"<div class="relative inline-flex -space-x-px">
|
"<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-->
|
||||||
<!--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--> Click me!
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>
|
</button>
|
||||||
@@ -30,10 +30,10 @@ exports[`ButtonGroup > renders with default slot correctly 1`] = `
|
|||||||
|
|
||||||
exports[`ButtonGroup > renders with size lg correctly 1`] = `
|
exports[`ButtonGroup > renders with size lg correctly 1`] = `
|
||||||
"<div class="relative inline-flex -space-x-px">
|
"<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-->
|
||||||
<!--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--> Click me!
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>
|
</button>
|
||||||
@@ -42,10 +42,10 @@ exports[`ButtonGroup > renders with size lg correctly 1`] = `
|
|||||||
|
|
||||||
exports[`ButtonGroup > renders with size md correctly 1`] = `
|
exports[`ButtonGroup > renders with size md correctly 1`] = `
|
||||||
"<div class="relative inline-flex -space-x-px">
|
"<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-->
|
||||||
<!--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--> Click me!
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>
|
</button>
|
||||||
@@ -54,10 +54,10 @@ exports[`ButtonGroup > renders with size md correctly 1`] = `
|
|||||||
|
|
||||||
exports[`ButtonGroup > renders with size sm correctly 1`] = `
|
exports[`ButtonGroup > renders with size sm correctly 1`] = `
|
||||||
"<div class="relative inline-flex -space-x-px">
|
"<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-->
|
||||||
<!--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--> Click me!
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>
|
</button>
|
||||||
@@ -66,10 +66,10 @@ exports[`ButtonGroup > renders with size sm correctly 1`] = `
|
|||||||
|
|
||||||
exports[`ButtonGroup > renders with size xl correctly 1`] = `
|
exports[`ButtonGroup > renders with size xl correctly 1`] = `
|
||||||
"<div class="relative inline-flex -space-x-px">
|
"<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-->
|
||||||
<!--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--> Click me!
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>
|
</button>
|
||||||
@@ -78,10 +78,10 @@ exports[`ButtonGroup > renders with size xl correctly 1`] = `
|
|||||||
|
|
||||||
exports[`ButtonGroup > renders with size xs correctly 1`] = `
|
exports[`ButtonGroup > renders with size xs correctly 1`] = `
|
||||||
"<div class="relative inline-flex -space-x-px">
|
"<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-->
|
||||||
<!--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--> Click me!
|
||||||
<!--v-if-->
|
<!--v-if-->
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user