mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
feat(components): improve RTL support (#2433)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Malik-Jouda
GitHub
@@ -16,7 +16,7 @@ describe('Modal', () => {
|
||||
['without close', { props: { ...props, close: false, title: 'Title', description: 'Description' } }],
|
||||
['with closeIcon', { props: { ...props, closeIcon: 'i-heroicons-trash' } }],
|
||||
['with class', { props: { ...props, class: 'bg-[var(--ui-bg-elevated)]' } }],
|
||||
['with ui', { props: { ...props, ui: { close: 'right-2' } } }],
|
||||
['with ui', { props: { ...props, ui: { close: 'end-2' } } }],
|
||||
// Slots
|
||||
['with default slot', { props, slots: { default: () => 'Default slot' } }],
|
||||
['with content slot', { props, slots: { content: () => 'Content slot' } }],
|
||||
|
||||
@@ -18,7 +18,7 @@ describe('Slideover', () => {
|
||||
['without close', { props: { ...props, close: false, title: 'Title', description: 'Description' } }],
|
||||
['with closeIcon', { props: { ...props, closeIcon: 'i-heroicons-trash' } }],
|
||||
['with class', { props: { ...props, class: 'bg-[var(--ui-bg-elevated)]' } }],
|
||||
['with ui', { props: { ...props, ui: { close: 'right-2' } } }],
|
||||
['with ui', { props: { ...props, ui: { close: 'end-2' } } }],
|
||||
// Slots
|
||||
['with default slot', { props, slots: { default: () => 'Default slot' } }],
|
||||
['with content slot', { props, slots: { content: () => 'Content slot' } }],
|
||||
|
||||
@@ -3,37 +3,37 @@
|
||||
exports[`Accordion > renders with as correctly 1`] = `
|
||||
"<section class="w-full">
|
||||
<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" data-radix-vue-collection-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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" data-radix-vue-collection-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-1">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-3">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-5">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-7">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-9">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-11">
|
||||
<!---->
|
||||
</div>
|
||||
@@ -44,37 +44,37 @@ exports[`Accordion > renders with as correctly 1`] = `
|
||||
exports[`Accordion > renders with body slot correctly 1`] = `
|
||||
"<div class="w-full">
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[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" data-radix-vue-collection-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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" data-radix-vue-collection-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-1">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" aria-labelledby="radix-vue-accordion-trigger-v-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;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-3">
|
||||
<div class="text-sm pb-3.5">Body slot</div>
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-5">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-7">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-9">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-11">
|
||||
<!---->
|
||||
</div>
|
||||
@@ -85,37 +85,37 @@ exports[`Accordion > renders with body slot correctly 1`] = `
|
||||
exports[`Accordion > renders with class correctly 1`] = `
|
||||
"<div class="w-96">
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[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" data-radix-vue-collection-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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" data-radix-vue-collection-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-1">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-3">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-5">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-7">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-9">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-11">
|
||||
<!---->
|
||||
</div>
|
||||
@@ -126,37 +126,37 @@ exports[`Accordion > renders with class correctly 1`] = `
|
||||
exports[`Accordion > renders with collapsible correctly 1`] = `
|
||||
"<div class="w-full">
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[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" data-radix-vue-collection-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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" data-radix-vue-collection-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-1">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-3">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-5">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-7">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-9">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-11">
|
||||
<!---->
|
||||
</div>
|
||||
@@ -167,35 +167,35 @@ exports[`Accordion > renders with collapsible correctly 1`] = `
|
||||
exports[`Accordion > renders with content slot correctly 1`] = `
|
||||
"<div class="w-full">
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[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" data-radix-vue-collection-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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" data-radix-vue-collection-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-1">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" aria-labelledby="radix-vue-accordion-trigger-v-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;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-3">Content slot</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-5">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-7">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-9">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-11">
|
||||
<!---->
|
||||
</div>
|
||||
@@ -206,37 +206,37 @@ exports[`Accordion > renders with content slot correctly 1`] = `
|
||||
exports[`Accordion > renders with custom body slot correctly 1`] = `
|
||||
"<div class="w-full">
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[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" data-radix-vue-collection-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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" data-radix-vue-collection-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-1">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-3">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-5">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-7">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-9">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" aria-labelledby="radix-vue-accordion-trigger-v-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;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-11">
|
||||
<div class="text-sm pb-3.5">Custom body slot</div>
|
||||
</div>
|
||||
@@ -247,37 +247,37 @@ exports[`Accordion > renders with custom body slot correctly 1`] = `
|
||||
exports[`Accordion > renders with custom slot correctly 1`] = `
|
||||
"<div class="w-full">
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[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" data-radix-vue-collection-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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" data-radix-vue-collection-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-1">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-3">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-5">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-7">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-9">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" aria-labelledby="radix-vue-accordion-trigger-v-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;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-11">Custom slot</div>
|
||||
</div>
|
||||
</div>"
|
||||
@@ -286,37 +286,37 @@ exports[`Accordion > renders with custom slot correctly 1`] = `
|
||||
exports[`Accordion > renders with default slot correctly 1`] = `
|
||||
"<div class="w-full">
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[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" data-radix-vue-collection-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Default slot</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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" data-radix-vue-collection-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Default slot</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-1">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Default slot</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Default slot</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" aria-labelledby="radix-vue-accordion-trigger-v-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;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-3">
|
||||
<div class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Default slot</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Default slot</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-5">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Default slot</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Default slot</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-7">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Default slot</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Default slot</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-9">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Default slot</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Default slot</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-11">
|
||||
<!---->
|
||||
</div>
|
||||
@@ -327,37 +327,37 @@ exports[`Accordion > renders with default slot correctly 1`] = `
|
||||
exports[`Accordion > renders with defaultValue correctly 1`] = `
|
||||
"<div class="w-full">
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[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" data-radix-vue-collection-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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" data-radix-vue-collection-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-1">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" aria-labelledby="radix-vue-accordion-trigger-v-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;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-3">
|
||||
<div class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-5">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-7">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-9">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-11">
|
||||
<!---->
|
||||
</div>
|
||||
@@ -368,37 +368,37 @@ exports[`Accordion > renders with defaultValue correctly 1`] = `
|
||||
exports[`Accordion > renders with disabled correctly 1`] = `
|
||||
"<div class="w-full">
|
||||
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[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" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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" 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-1">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-3">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-5">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-7">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-9">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-11">
|
||||
<!---->
|
||||
</div>
|
||||
@@ -409,37 +409,37 @@ exports[`Accordion > renders with disabled correctly 1`] = `
|
||||
exports[`Accordion > renders with items correctly 1`] = `
|
||||
"<div class="w-full">
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[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" data-radix-vue-collection-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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" data-radix-vue-collection-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-1">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-3">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-5">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-7">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-9">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-11">
|
||||
<!---->
|
||||
</div>
|
||||
@@ -450,37 +450,37 @@ exports[`Accordion > renders with items correctly 1`] = `
|
||||
exports[`Accordion > renders with labelKey correctly 1`] = `
|
||||
"<div class="w-full">
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[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" data-radix-vue-collection-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">i-heroicons-information-circle</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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" data-radix-vue-collection-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">i-heroicons-information-circle</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-1">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">i-heroicons-arrow-down-tray</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">i-heroicons-arrow-down-tray</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-3">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">i-heroicons-eye-dropper</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">i-heroicons-eye-dropper</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-5">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">i-heroicons-rectangle-group</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">i-heroicons-rectangle-group</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-7">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">i-heroicons-square-3-stack-3d</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">i-heroicons-square-3-stack-3d</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-9">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">i-heroicons-wrench-screwdriver</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">i-heroicons-wrench-screwdriver</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-11">
|
||||
<!---->
|
||||
</div>
|
||||
@@ -491,37 +491,37 @@ exports[`Accordion > renders with labelKey correctly 1`] = `
|
||||
exports[`Accordion > renders with leading slot correctly 1`] = `
|
||||
"<div class="w-full">
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[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" data-radix-vue-collection-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><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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" data-radix-vue-collection-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-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-1">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" aria-labelledby="radix-vue-accordion-trigger-v-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;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-3">
|
||||
<div class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[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-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><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-5">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-7">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-9">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-11">
|
||||
<!---->
|
||||
</div>
|
||||
@@ -532,37 +532,37 @@ exports[`Accordion > renders with leading slot correctly 1`] = `
|
||||
exports[`Accordion > renders with modelValue correctly 1`] = `
|
||||
"<div class="w-full">
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[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" data-radix-vue-collection-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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" data-radix-vue-collection-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-1">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" aria-labelledby="radix-vue-accordion-trigger-v-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;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-3">
|
||||
<div class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-5">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-7">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-9">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-11">
|
||||
<!---->
|
||||
</div>
|
||||
@@ -573,37 +573,37 @@ exports[`Accordion > renders with modelValue correctly 1`] = `
|
||||
exports[`Accordion > renders with trailing slot correctly 1`] = `
|
||||
"<div class="w-full">
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[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" data-radix-vue-collection-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><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" data-radix-vue-collection-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Getting Started</span>Trailing slot</button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-1">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Installation</span>Trailing slot</button></h3>
|
||||
<div role="region" aria-labelledby="radix-vue-accordion-trigger-v-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;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-3">
|
||||
<div class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Theming</span>Trailing slot</button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-5">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Layouts</span>Trailing slot</button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-7">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Components</span>Trailing slot</button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-9">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Utilities</span>Trailing slot</button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-11">
|
||||
<!---->
|
||||
</div>
|
||||
@@ -614,37 +614,37 @@ exports[`Accordion > renders with trailing slot correctly 1`] = `
|
||||
exports[`Accordion > renders with trailingIcon correctly 1`] = `
|
||||
"<div class="w-full">
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[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" data-radix-vue-collection-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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" data-radix-vue-collection-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-1">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-3">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-5">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-7">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-9">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-11">
|
||||
<!---->
|
||||
</div>
|
||||
@@ -655,37 +655,37 @@ exports[`Accordion > renders with trailingIcon correctly 1`] = `
|
||||
exports[`Accordion > renders with type correctly 1`] = `
|
||||
"<div class="w-full">
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[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" data-radix-vue-collection-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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" data-radix-vue-collection-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-1">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-3">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-5">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-7">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-9">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-11">
|
||||
<!---->
|
||||
</div>
|
||||
@@ -696,37 +696,37 @@ exports[`Accordion > renders with type correctly 1`] = `
|
||||
exports[`Accordion > renders with ui correctly 1`] = `
|
||||
"<div class="w-full">
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b last:border-b-0 border-[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" data-radix-vue-collection-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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" data-radix-vue-collection-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Getting Started</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-1">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-3">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-5">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Layouts</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-7">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Components</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-9">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-left break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></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-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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-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-11">
|
||||
<!---->
|
||||
</div>
|
||||
|
||||
@@ -3,37 +3,37 @@
|
||||
exports[`Accordion > renders with as correctly 1`] = `
|
||||
"<section class="w-full">
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-1">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<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-start break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-3">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-5">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-7">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-9">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start 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>
|
||||
@@ -44,37 +44,37 @@ exports[`Accordion > renders with as correctly 1`] = `
|
||||
exports[`Accordion > renders with body slot correctly 1`] = `
|
||||
"<div class="w-full">
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-1">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<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-start break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" aria-labelledby="radix-vue-accordion-trigger-v-0-0-2" data-state="open" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-3">
|
||||
<div class="text-sm pb-3.5">Body slot</div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-5">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-7">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-9">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start 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>
|
||||
@@ -85,37 +85,37 @@ exports[`Accordion > renders with body slot correctly 1`] = `
|
||||
exports[`Accordion > renders with class correctly 1`] = `
|
||||
"<div class="w-96">
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-1">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<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-start break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-3">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-5">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-7">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-9">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start 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>
|
||||
@@ -126,37 +126,37 @@ exports[`Accordion > renders with class correctly 1`] = `
|
||||
exports[`Accordion > renders with collapsible correctly 1`] = `
|
||||
"<div class="w-full">
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-1">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<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-start break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-3">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-5">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-7">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-9">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start 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>
|
||||
@@ -167,35 +167,35 @@ exports[`Accordion > renders with collapsible correctly 1`] = `
|
||||
exports[`Accordion > renders with content slot correctly 1`] = `
|
||||
"<div class="w-full">
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-1">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<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-start break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" aria-labelledby="radix-vue-accordion-trigger-v-0-0-2" data-state="open" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-3">Content slot</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-5">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-7">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-9">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start 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>
|
||||
@@ -206,37 +206,37 @@ exports[`Accordion > renders with content slot correctly 1`] = `
|
||||
exports[`Accordion > renders with custom body slot correctly 1`] = `
|
||||
"<div class="w-full">
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-1">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<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-start break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-3">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-5">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-7">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-9">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="open" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="open" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<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-start break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" aria-labelledby="radix-vue-accordion-trigger-v-0-0-10" data-state="open" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-11">
|
||||
<div class="text-sm pb-3.5">Custom body slot</div>
|
||||
</div>
|
||||
@@ -247,37 +247,37 @@ exports[`Accordion > renders with custom body slot correctly 1`] = `
|
||||
exports[`Accordion > renders with custom slot correctly 1`] = `
|
||||
"<div class="w-full">
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-1">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<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-start break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-3">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-5">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-7">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-9">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="open" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="open" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<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-start break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" aria-labelledby="radix-vue-accordion-trigger-v-0-0-10" data-state="open" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-11">Custom slot</div>
|
||||
</div>
|
||||
</div>"
|
||||
@@ -286,37 +286,37 @@ exports[`Accordion > renders with custom slot correctly 1`] = `
|
||||
exports[`Accordion > renders with default slot correctly 1`] = `
|
||||
"<div class="w-full">
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Default slot</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Default slot</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-1">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Default slot</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<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-start break-words">Default slot</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" aria-labelledby="radix-vue-accordion-trigger-v-0-0-2" data-state="open" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-3">
|
||||
<div class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Default slot</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Default slot</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-5">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Default slot</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Default slot</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-7">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Default slot</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Default slot</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-9">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Default slot</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start 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>
|
||||
@@ -327,37 +327,37 @@ exports[`Accordion > renders with default slot correctly 1`] = `
|
||||
exports[`Accordion > renders with defaultValue correctly 1`] = `
|
||||
"<div class="w-full">
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-1">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<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-start break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" aria-labelledby="radix-vue-accordion-trigger-v-0-0-2" data-state="open" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-3">
|
||||
<div class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-5">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-7">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-9">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start 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>
|
||||
@@ -368,37 +368,37 @@ exports[`Accordion > renders with defaultValue correctly 1`] = `
|
||||
exports[`Accordion > renders with disabled correctly 1`] = `
|
||||
"<div class="w-full">
|
||||
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<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-start break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-0" data-state="closed" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-1">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<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-start break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-3">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<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-start break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-4" data-state="closed" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-5">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<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-start break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-6" data-state="closed" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-7">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<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-start break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-8" data-state="closed" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-9">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<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-start 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>
|
||||
@@ -409,37 +409,37 @@ exports[`Accordion > renders with disabled correctly 1`] = `
|
||||
exports[`Accordion > renders with items correctly 1`] = `
|
||||
"<div class="w-full">
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-1">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<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-start break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-3">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-5">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-7">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-9">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start 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>
|
||||
@@ -450,37 +450,37 @@ exports[`Accordion > renders with items correctly 1`] = `
|
||||
exports[`Accordion > renders with labelKey correctly 1`] = `
|
||||
"<div class="w-full">
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">i-heroicons-information-circle</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">i-heroicons-information-circle</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-1">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">i-heroicons-arrow-down-tray</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<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-start break-words">i-heroicons-arrow-down-tray</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-3">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">i-heroicons-eye-dropper</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">i-heroicons-eye-dropper</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-5">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">i-heroicons-rectangle-group</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">i-heroicons-rectangle-group</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-7">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">i-heroicons-square-3-stack-3d</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">i-heroicons-square-3-stack-3d</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-9">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">i-heroicons-wrench-screwdriver</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start 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>
|
||||
@@ -491,37 +491,37 @@ exports[`Accordion > renders with labelKey correctly 1`] = `
|
||||
exports[`Accordion > renders with leading slot correctly 1`] = `
|
||||
"<div class="w-full">
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0">Leading slot<span class="text-left break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-1">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75">Leading slot<span class="text-left break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<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-start break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" aria-labelledby="radix-vue-accordion-trigger-v-0-0-2" data-state="open" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-3">
|
||||
<div class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0">Leading slot<span class="text-left break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-5">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0">Leading slot<span class="text-left break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-7">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0">Leading slot<span class="text-left break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-9">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0">Leading slot<span class="text-left break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start 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>
|
||||
@@ -532,37 +532,37 @@ exports[`Accordion > renders with leading slot correctly 1`] = `
|
||||
exports[`Accordion > renders with modelValue correctly 1`] = `
|
||||
"<div class="w-full">
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-1">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<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-start break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" aria-labelledby="radix-vue-accordion-trigger-v-0-0-2" data-state="open" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-3">
|
||||
<div class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-5">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-7">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-9">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start 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>
|
||||
@@ -573,37 +573,37 @@ exports[`Accordion > renders with modelValue correctly 1`] = `
|
||||
exports[`Accordion > renders with trailing slot correctly 1`] = `
|
||||
"<div class="w-full">
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Getting Started</span>Trailing slot</button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Getting Started</span>Trailing slot</button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-1">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Installation</span>Trailing slot</button></h3>
|
||||
<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-start break-words">Installation</span>Trailing slot</button></h3>
|
||||
<div role="region" aria-labelledby="radix-vue-accordion-trigger-v-0-0-2" data-state="open" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-3">
|
||||
<div class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Theming</span>Trailing slot</button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Theming</span>Trailing slot</button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-5">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Layouts</span>Trailing slot</button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Layouts</span>Trailing slot</button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-7">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Components</span>Trailing slot</button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Components</span>Trailing slot</button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-9">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Utilities</span>Trailing slot</button></h3>
|
||||
<h3 data-orientation="vertical" 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-start 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>
|
||||
@@ -614,37 +614,37 @@ exports[`Accordion > renders with trailing slot correctly 1`] = `
|
||||
exports[`Accordion > renders with trailingIcon correctly 1`] = `
|
||||
"<div class="w-full">
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Getting Started</span><span class="iconify i-heroicons:plus shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Getting Started</span><span class="iconify i-heroicons:plus shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-1">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Installation</span><span class="iconify i-heroicons:plus shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<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-start break-words">Installation</span><span class="iconify i-heroicons:plus shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-3">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Theming</span><span class="iconify i-heroicons:plus shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Theming</span><span class="iconify i-heroicons:plus shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-5">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Layouts</span><span class="iconify i-heroicons:plus shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Layouts</span><span class="iconify i-heroicons:plus shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-7">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Components</span><span class="iconify i-heroicons:plus shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Components</span><span class="iconify i-heroicons:plus shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-9">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start 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>
|
||||
@@ -655,37 +655,37 @@ exports[`Accordion > renders with trailingIcon correctly 1`] = `
|
||||
exports[`Accordion > renders with type correctly 1`] = `
|
||||
"<div class="w-full">
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-1">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<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-start break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-3">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-5">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-7">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-9">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start 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>
|
||||
@@ -696,37 +696,37 @@ exports[`Accordion > renders with type correctly 1`] = `
|
||||
exports[`Accordion > renders with ui correctly 1`] = `
|
||||
"<div class="w-full">
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b last:border-b-0 border-[var(--ui-border-accented)]">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-0" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:information-circle shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Getting Started</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-1">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b last:border-b-0 border-[var(--ui-border-accented)]">
|
||||
<h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-v-0-0-2" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:arrow-down-tray shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<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-start break-words">Installation</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-3">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b last:border-b-0 border-[var(--ui-border-accented)]">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-4" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:eye-dropper shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Theming</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-5">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b last:border-b-0 border-[var(--ui-border-accented)]">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-6" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:rectangle-group shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Layouts</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-7">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b last:border-b-0 border-[var(--ui-border-accented)]">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-8" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start break-words">Components</span><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<div role="region" hidden="" aria-labelledby="radix-vue-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-v-0-0-9">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div data-state="closed" data-orientation="vertical" class="border-b last:border-b-0 border-[var(--ui-border-accented)]">
|
||||
<h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-v-0-0-10" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-heroicons:wrench-screwdriver shrink-0 size-5" aria-hidden="true"></span><span class="text-left break-words">Utilities</span><span class="iconify i-heroicons:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
|
||||
<h3 data-orientation="vertical" 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-start 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>
|
||||
|
||||
@@ -3,20 +3,20 @@
|
||||
exports[`Carousel > renders with arrows correctly 1`] = `
|
||||
"<div role="region" aria-roledescription="carousel" tabindex="0" class="relative focus:outline-none">
|
||||
<div class="overflow-hidden">
|
||||
<div class="flex items-start flex-row -ml-4" style="transform: translate3d(NaNpx,0px,0px);">
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=2" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=3" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=4" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=5" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=6" width="300" height="300" class="rounded-lg"></div>
|
||||
<div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" width="300" height="300" class="rounded-lg"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<div class=""><button type="button" disabled="" aria-label="Prev" class="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 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)] p-1.5 absolute rounded-full -left-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<div class=""><button type="button" disabled="" aria-label="Prev" class="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 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)] p-1.5 absolute rounded-full -start-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button><button type="button" disabled="" aria-label="Next" class="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 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)] p-1.5 absolute rounded-full -right-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
</button><button type="button" disabled="" aria-label="Next" class="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 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)] p-1.5 absolute rounded-full -end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
@@ -28,13 +28,13 @@ exports[`Carousel > renders with arrows correctly 1`] = `
|
||||
exports[`Carousel > renders with as correctly 1`] = `
|
||||
"<div role="region" aria-roledescription="carousel" tabindex="0" class="relative focus:outline-none" as="nav">
|
||||
<div class="overflow-hidden">
|
||||
<div class="flex items-start flex-row -ml-4" style="transform: translate3d(NaNpx,0px,0px);">
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=2" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=3" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=4" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=5" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=6" width="300" height="300" class="rounded-lg"></div>
|
||||
<div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" width="300" height="300" class="rounded-lg"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
@@ -44,13 +44,13 @@ exports[`Carousel > renders with as correctly 1`] = `
|
||||
exports[`Carousel > renders with class correctly 1`] = `
|
||||
"<div role="region" aria-roledescription="carousel" tabindex="0" class="relative focus:outline-none w-full max-w-xs">
|
||||
<div class="overflow-hidden">
|
||||
<div class="flex items-start flex-row -ml-4" style="transform: translate3d(NaNpx,0px,0px);">
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=2" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=3" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=4" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=5" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=6" width="300" height="300" class="rounded-lg"></div>
|
||||
<div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" width="300" height="300" class="rounded-lg"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
@@ -60,13 +60,13 @@ exports[`Carousel > renders with class correctly 1`] = `
|
||||
exports[`Carousel > renders with dots correctly 1`] = `
|
||||
"<div role="region" aria-roledescription="carousel" tabindex="0" class="relative focus:outline-none">
|
||||
<div class="overflow-hidden">
|
||||
<div class="flex items-start flex-row -ml-4" style="transform: translate3d(NaNpx,0px,0px);">
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=2" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=3" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=4" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=5" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=6" width="300" height="300" class="rounded-lg"></div>
|
||||
<div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" width="300" height="300" class="rounded-lg"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
@@ -79,13 +79,13 @@ exports[`Carousel > renders with dots correctly 1`] = `
|
||||
exports[`Carousel > renders with items correctly 1`] = `
|
||||
"<div role="region" aria-roledescription="carousel" tabindex="0" class="relative focus:outline-none">
|
||||
<div class="overflow-hidden">
|
||||
<div class="flex items-start flex-row -ml-4" style="transform: translate3d(NaNpx,0px,0px);">
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=2" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=3" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=4" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=5" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=6" width="300" height="300" class="rounded-lg"></div>
|
||||
<div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" width="300" height="300" class="rounded-lg"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
@@ -95,20 +95,20 @@ exports[`Carousel > renders with items correctly 1`] = `
|
||||
exports[`Carousel > renders with next correctly 1`] = `
|
||||
"<div role="region" aria-roledescription="carousel" tabindex="0" class="relative focus:outline-none">
|
||||
<div class="overflow-hidden">
|
||||
<div class="flex items-start flex-row -ml-4" style="transform: translate3d(NaNpx,0px,0px);">
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=2" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=3" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=4" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=5" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=6" width="300" height="300" class="rounded-lg"></div>
|
||||
<div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" width="300" height="300" class="rounded-lg"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<div class=""><button type="button" disabled="" aria-label="Prev" class="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 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)] p-1.5 absolute rounded-full -left-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<div class=""><button type="button" disabled="" aria-label="Prev" class="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 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)] p-1.5 absolute rounded-full -start-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button><button type="button" disabled="" aria-label="Next" class="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 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)] p-1.5 absolute rounded-full -right-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
</button><button type="button" disabled="" aria-label="Next" class="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 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)] p-1.5 absolute rounded-full -end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
@@ -120,20 +120,20 @@ exports[`Carousel > renders with next correctly 1`] = `
|
||||
exports[`Carousel > renders with nextIcon correctly 1`] = `
|
||||
"<div role="region" aria-roledescription="carousel" tabindex="0" class="relative focus:outline-none">
|
||||
<div class="overflow-hidden">
|
||||
<div class="flex items-start flex-row -ml-4" style="transform: translate3d(NaNpx,0px,0px);">
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=2" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=3" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=4" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=5" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=6" width="300" height="300" class="rounded-lg"></div>
|
||||
<div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" width="300" height="300" class="rounded-lg"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<div class=""><button type="button" disabled="" aria-label="Prev" class="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 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)] p-1.5 absolute rounded-full -left-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<div class=""><button type="button" disabled="" aria-label="Prev" class="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 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)] p-1.5 absolute rounded-full -start-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button><button type="button" disabled="" aria-label="Next" class="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 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)] p-1.5 absolute rounded-full -right-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
</button><button type="button" disabled="" aria-label="Next" class="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 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)] p-1.5 absolute rounded-full -end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
@@ -161,20 +161,20 @@ exports[`Carousel > renders with orientation vertical correctly 1`] = `
|
||||
exports[`Carousel > renders with prev correctly 1`] = `
|
||||
"<div role="region" aria-roledescription="carousel" tabindex="0" class="relative focus:outline-none">
|
||||
<div class="overflow-hidden">
|
||||
<div class="flex items-start flex-row -ml-4" style="transform: translate3d(NaNpx,0px,0px);">
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=2" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=3" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=4" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=5" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=6" width="300" height="300" class="rounded-lg"></div>
|
||||
<div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" width="300" height="300" class="rounded-lg"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<div class=""><button type="button" disabled="" aria-label="Prev" class="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 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)] p-1.5 absolute rounded-full -left-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<div class=""><button type="button" disabled="" aria-label="Prev" class="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 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)] p-1.5 absolute rounded-full -start-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button><button type="button" disabled="" aria-label="Next" class="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 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)] p-1.5 absolute rounded-full -right-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
</button><button type="button" disabled="" aria-label="Next" class="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 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)] p-1.5 absolute rounded-full -end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
@@ -186,20 +186,20 @@ exports[`Carousel > renders with prev correctly 1`] = `
|
||||
exports[`Carousel > renders with prevIcon correctly 1`] = `
|
||||
"<div role="region" aria-roledescription="carousel" tabindex="0" class="relative focus:outline-none">
|
||||
<div class="overflow-hidden">
|
||||
<div class="flex items-start flex-row -ml-4" style="transform: translate3d(NaNpx,0px,0px);">
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=2" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=3" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=4" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=5" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=6" width="300" height="300" class="rounded-lg"></div>
|
||||
<div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" width="300" height="300" class="rounded-lg"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<div class=""><button type="button" disabled="" aria-label="Prev" class="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 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)] p-1.5 absolute rounded-full -left-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<div class=""><button type="button" disabled="" aria-label="Prev" class="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 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)] p-1.5 absolute rounded-full -start-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button><button type="button" disabled="" aria-label="Next" class="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 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)] p-1.5 absolute rounded-full -right-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
</button><button type="button" disabled="" aria-label="Next" class="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 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)] p-1.5 absolute rounded-full -end-12 top-1/2 -translate-y-1/2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
@@ -211,13 +211,13 @@ exports[`Carousel > renders with prevIcon correctly 1`] = `
|
||||
exports[`Carousel > renders with ui correctly 1`] = `
|
||||
"<div role="region" aria-roledescription="carousel" tabindex="0" class="relative focus:outline-none">
|
||||
<div class="overflow-hidden h-[320px]">
|
||||
<div class="flex items-start flex-row -ml-4" style="transform: translate3d(NaNpx,0px,0px);">
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=2" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=3" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=4" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=5" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=6" width="300" height="300" class="rounded-lg"></div>
|
||||
<div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" width="300" height="300" class="rounded-lg"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
|
||||
@@ -3,20 +3,20 @@
|
||||
exports[`Carousel > renders with arrows correctly 1`] = `
|
||||
"<div role="region" aria-roledescription="carousel" tabindex="0" class="relative focus:outline-none">
|
||||
<div class="overflow-hidden">
|
||||
<div class="flex items-start flex-row -ml-4" style="transform: translate3d(NaNpx,0px,0px);">
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=2" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=3" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=4" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=5" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=6" width="300" height="300" class="rounded-lg"></div>
|
||||
<div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" width="300" height="300" class="rounded-lg"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<div class=""><button type="button" disabled="" aria-label="Prev" class="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 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)] p-1.5 absolute rounded-full -left-12 top-1/2 -translate-y-1/2"><span class="iconify i-heroicons:arrow-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<div class=""><button type="button" disabled="" aria-label="Prev" class="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 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)] p-1.5 absolute rounded-full -start-12 top-1/2 -translate-y-1/2"><span class="iconify i-heroicons:arrow-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button><button type="button" disabled="" aria-label="Next" class="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 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)] p-1.5 absolute rounded-full -right-12 top-1/2 -translate-y-1/2"><span class="iconify i-heroicons:arrow-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
</button><button type="button" disabled="" aria-label="Next" class="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 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)] p-1.5 absolute rounded-full -end-12 top-1/2 -translate-y-1/2"><span class="iconify i-heroicons:arrow-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
@@ -28,13 +28,13 @@ exports[`Carousel > renders with arrows correctly 1`] = `
|
||||
exports[`Carousel > renders with as correctly 1`] = `
|
||||
"<div role="region" aria-roledescription="carousel" tabindex="0" class="relative focus:outline-none" as="nav">
|
||||
<div class="overflow-hidden">
|
||||
<div class="flex items-start flex-row -ml-4" style="transform: translate3d(NaNpx,0px,0px);">
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=2" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=3" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=4" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=5" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=6" width="300" height="300" class="rounded-lg"></div>
|
||||
<div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" width="300" height="300" class="rounded-lg"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
@@ -44,13 +44,13 @@ exports[`Carousel > renders with as correctly 1`] = `
|
||||
exports[`Carousel > renders with class correctly 1`] = `
|
||||
"<div role="region" aria-roledescription="carousel" tabindex="0" class="relative focus:outline-none w-full max-w-xs">
|
||||
<div class="overflow-hidden">
|
||||
<div class="flex items-start flex-row -ml-4" style="transform: translate3d(NaNpx,0px,0px);">
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=2" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=3" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=4" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=5" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=6" width="300" height="300" class="rounded-lg"></div>
|
||||
<div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" width="300" height="300" class="rounded-lg"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
@@ -60,13 +60,13 @@ exports[`Carousel > renders with class correctly 1`] = `
|
||||
exports[`Carousel > renders with dots correctly 1`] = `
|
||||
"<div role="region" aria-roledescription="carousel" tabindex="0" class="relative focus:outline-none">
|
||||
<div class="overflow-hidden">
|
||||
<div class="flex items-start flex-row -ml-4" style="transform: translate3d(NaNpx,0px,0px);">
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=2" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=3" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=4" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=5" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=6" width="300" height="300" class="rounded-lg"></div>
|
||||
<div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" width="300" height="300" class="rounded-lg"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
@@ -79,13 +79,13 @@ exports[`Carousel > renders with dots correctly 1`] = `
|
||||
exports[`Carousel > renders with items correctly 1`] = `
|
||||
"<div role="region" aria-roledescription="carousel" tabindex="0" class="relative focus:outline-none">
|
||||
<div class="overflow-hidden">
|
||||
<div class="flex items-start flex-row -ml-4" style="transform: translate3d(NaNpx,0px,0px);">
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=2" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=3" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=4" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=5" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=6" width="300" height="300" class="rounded-lg"></div>
|
||||
<div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" width="300" height="300" class="rounded-lg"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
@@ -95,20 +95,20 @@ exports[`Carousel > renders with items correctly 1`] = `
|
||||
exports[`Carousel > renders with next correctly 1`] = `
|
||||
"<div role="region" aria-roledescription="carousel" tabindex="0" class="relative focus:outline-none">
|
||||
<div class="overflow-hidden">
|
||||
<div class="flex items-start flex-row -ml-4" style="transform: translate3d(NaNpx,0px,0px);">
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=2" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=3" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=4" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=5" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=6" width="300" height="300" class="rounded-lg"></div>
|
||||
<div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" width="300" height="300" class="rounded-lg"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<div class=""><button type="button" disabled="" aria-label="Prev" class="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 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)] p-1.5 absolute rounded-full -left-12 top-1/2 -translate-y-1/2"><span class="iconify i-heroicons:arrow-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<div class=""><button type="button" disabled="" aria-label="Prev" class="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 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)] p-1.5 absolute rounded-full -start-12 top-1/2 -translate-y-1/2"><span class="iconify i-heroicons:arrow-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button><button type="button" disabled="" aria-label="Next" class="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 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)] p-1.5 absolute rounded-full -right-12 top-1/2 -translate-y-1/2"><span class="iconify i-heroicons:arrow-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
</button><button type="button" disabled="" aria-label="Next" class="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 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)] p-1.5 absolute rounded-full -end-12 top-1/2 -translate-y-1/2"><span class="iconify i-heroicons:arrow-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
@@ -120,20 +120,20 @@ exports[`Carousel > renders with next correctly 1`] = `
|
||||
exports[`Carousel > renders with nextIcon correctly 1`] = `
|
||||
"<div role="region" aria-roledescription="carousel" tabindex="0" class="relative focus:outline-none">
|
||||
<div class="overflow-hidden">
|
||||
<div class="flex items-start flex-row -ml-4" style="transform: translate3d(NaNpx,0px,0px);">
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=2" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=3" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=4" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=5" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=6" width="300" height="300" class="rounded-lg"></div>
|
||||
<div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" width="300" height="300" class="rounded-lg"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<div class=""><button type="button" disabled="" aria-label="Prev" class="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 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)] p-1.5 absolute rounded-full -left-12 top-1/2 -translate-y-1/2"><span class="iconify i-heroicons:arrow-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<div class=""><button type="button" disabled="" aria-label="Prev" class="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 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)] p-1.5 absolute rounded-full -start-12 top-1/2 -translate-y-1/2"><span class="iconify i-heroicons:arrow-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button><button type="button" disabled="" aria-label="Next" class="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 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)] p-1.5 absolute rounded-full -right-12 top-1/2 -translate-y-1/2"><span class="iconify i-heroicons:arrow-right shrink-0 size-5" aria-hidden="true"></span>
|
||||
</button><button type="button" disabled="" aria-label="Next" class="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 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)] p-1.5 absolute rounded-full -end-12 top-1/2 -translate-y-1/2"><span class="iconify i-heroicons:arrow-right shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
@@ -161,20 +161,20 @@ exports[`Carousel > renders with orientation vertical correctly 1`] = `
|
||||
exports[`Carousel > renders with prev correctly 1`] = `
|
||||
"<div role="region" aria-roledescription="carousel" tabindex="0" class="relative focus:outline-none">
|
||||
<div class="overflow-hidden">
|
||||
<div class="flex items-start flex-row -ml-4" style="transform: translate3d(NaNpx,0px,0px);">
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=2" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=3" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=4" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=5" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=6" width="300" height="300" class="rounded-lg"></div>
|
||||
<div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" width="300" height="300" class="rounded-lg"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<div class=""><button type="button" disabled="" aria-label="Prev" class="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 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)] p-1.5 absolute rounded-full -left-12 top-1/2 -translate-y-1/2"><span class="iconify i-heroicons:arrow-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<div class=""><button type="button" disabled="" aria-label="Prev" class="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 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)] p-1.5 absolute rounded-full -start-12 top-1/2 -translate-y-1/2"><span class="iconify i-heroicons:arrow-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button><button type="button" disabled="" aria-label="Next" class="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 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)] p-1.5 absolute rounded-full -right-12 top-1/2 -translate-y-1/2"><span class="iconify i-heroicons:arrow-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
</button><button type="button" disabled="" aria-label="Next" class="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 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)] p-1.5 absolute rounded-full -end-12 top-1/2 -translate-y-1/2"><span class="iconify i-heroicons:arrow-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
@@ -186,20 +186,20 @@ exports[`Carousel > renders with prev correctly 1`] = `
|
||||
exports[`Carousel > renders with prevIcon correctly 1`] = `
|
||||
"<div role="region" aria-roledescription="carousel" tabindex="0" class="relative focus:outline-none">
|
||||
<div class="overflow-hidden">
|
||||
<div class="flex items-start flex-row -ml-4" style="transform: translate3d(NaNpx,0px,0px);">
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=2" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=3" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=4" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=5" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=6" width="300" height="300" class="rounded-lg"></div>
|
||||
<div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" width="300" height="300" class="rounded-lg"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<div class=""><button type="button" disabled="" aria-label="Prev" class="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 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)] p-1.5 absolute rounded-full -left-12 top-1/2 -translate-y-1/2"><span class="iconify i-heroicons:arrow-left shrink-0 size-5" aria-hidden="true"></span>
|
||||
<div class=""><button type="button" disabled="" aria-label="Prev" class="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 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)] p-1.5 absolute rounded-full -start-12 top-1/2 -translate-y-1/2"><span class="iconify i-heroicons:arrow-left shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button><button type="button" disabled="" aria-label="Next" class="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 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)] p-1.5 absolute rounded-full -right-12 top-1/2 -translate-y-1/2"><span class="iconify i-heroicons:arrow-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
</button><button type="button" disabled="" aria-label="Next" class="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 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)] p-1.5 absolute rounded-full -end-12 top-1/2 -translate-y-1/2"><span class="iconify i-heroicons:arrow-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
@@ -211,13 +211,13 @@ exports[`Carousel > renders with prevIcon correctly 1`] = `
|
||||
exports[`Carousel > renders with ui correctly 1`] = `
|
||||
"<div role="region" aria-roledescription="carousel" tabindex="0" class="relative focus:outline-none">
|
||||
<div class="overflow-hidden h-[320px]">
|
||||
<div class="flex items-start flex-row -ml-4" style="transform: translate3d(NaNpx,0px,0px);">
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=2" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=3" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=4" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=5" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full pl-4"><img src="https://picsum.photos/600/600?random=6" width="300" height="300" class="rounded-lg"></div>
|
||||
<div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" width="300" height="300" class="rounded-lg"></div>
|
||||
<div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" width="300" height="300" class="rounded-lg"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,15 +1,15 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`Input > renders with avatar and leadingIcon correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Input > renders with avatar and trailingIcon correctly 1`] = `"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><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://github.com/benjamincanac.png" 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><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></div>"`;
|
||||
exports[`Input > renders with avatar and trailingIcon correctly 1`] = `"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><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://github.com/benjamincanac.png" 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><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></div>"`;
|
||||
|
||||
exports[`Input > renders with avatar correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><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://github.com/benjamincanac.png" 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>
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><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://github.com/benjamincanac.png" 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>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
@@ -36,14 +36,14 @@ exports[`Input > renders with disabled correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Input > renders with file type correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center"><input type="file" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] file:mr-1.5 file:font-medium file:text-[var(--ui-text-muted)] file:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off">
|
||||
"<div class="relative inline-flex items-center"><input type="file" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] file:me-1.5 file:font-medium file:text-[var(--ui-text-muted)] file:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Input > renders with icon correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
@@ -56,45 +56,45 @@ exports[`Input > renders with id correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Input > renders with leading and icon correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Input > renders with leading slot correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5">Leading slot</span>
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5">Leading slot</span>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Input > renders with leadingIcon correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Input > renders with loading and avatar correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Input > renders with loading correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Input > renders with loading trailing and avatar correctly 1`] = `"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><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://github.com/benjamincanac.png" 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><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></div>"`;
|
||||
exports[`Input > renders with loading trailing and avatar correctly 1`] = `"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><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://github.com/benjamincanac.png" 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><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></div>"`;
|
||||
|
||||
exports[`Input > renders with loading trailing correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" autocomplete="off">
|
||||
<!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" autocomplete="off">
|
||||
<!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Input > renders with loadingIcon correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
@@ -226,20 +226,20 @@ exports[`Input > renders with size xs correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Input > renders with trailing and icon correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" autocomplete="off">
|
||||
<!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" autocomplete="off">
|
||||
<!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Input > renders with trailing slot correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" autocomplete="off">
|
||||
<!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pr-2.5">Trailing slot</span>
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" autocomplete="off">
|
||||
<!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5">Trailing slot</span>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Input > renders with trailingIcon correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" autocomplete="off">
|
||||
<!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" autocomplete="off">
|
||||
<!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`Input > renders with avatar and leadingIcon correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><span class="iconify i-heroicons:arrow-left shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-heroicons:arrow-left shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Input > renders with avatar and trailingIcon correctly 1`] = `"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><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://github.com/benjamincanac.png" 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><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:arrow-right shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></div>"`;
|
||||
exports[`Input > renders with avatar and trailingIcon correctly 1`] = `"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><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://github.com/benjamincanac.png" 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><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:arrow-right shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></div>"`;
|
||||
|
||||
exports[`Input > renders with avatar correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><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://github.com/benjamincanac.png" 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>
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><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://github.com/benjamincanac.png" 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>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
@@ -36,14 +36,14 @@ exports[`Input > renders with disabled correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Input > renders with file type correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center"><input type="file" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] file:mr-1.5 file:font-medium file:text-[var(--ui-text-muted)] file:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off">
|
||||
"<div class="relative inline-flex items-center"><input type="file" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] file:me-1.5 file:font-medium file:text-[var(--ui-text-muted)] file:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Input > renders with icon correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><span class="iconify i-heroicons:magnifying-glass shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-heroicons:magnifying-glass shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
@@ -56,45 +56,45 @@ exports[`Input > renders with id correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Input > renders with leading and icon correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><span class="iconify i-heroicons:arrow-left shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-heroicons:arrow-left shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Input > renders with leading slot correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5">Leading slot</span>
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5">Leading slot</span>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Input > renders with leadingIcon correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><span class="iconify i-heroicons:arrow-left shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-heroicons:arrow-left shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Input > renders with loading and avatar correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><span class="iconify i-heroicons:arrow-path-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" aria-hidden="true"></span></span>
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-heroicons:arrow-path-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" aria-hidden="true"></span></span>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Input > renders with loading correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><span class="iconify i-heroicons:arrow-path-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" aria-hidden="true"></span></span>
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-heroicons:arrow-path-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" aria-hidden="true"></span></span>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Input > renders with loading trailing and avatar correctly 1`] = `"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><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://github.com/benjamincanac.png" 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><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:arrow-path-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></div>"`;
|
||||
exports[`Input > renders with loading trailing and avatar correctly 1`] = `"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><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://github.com/benjamincanac.png" 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><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:arrow-path-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></div>"`;
|
||||
|
||||
exports[`Input > renders with loading trailing correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" autocomplete="off">
|
||||
<!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:arrow-path-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" aria-hidden="true"></span></span>
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" autocomplete="off">
|
||||
<!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:arrow-path-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" aria-hidden="true"></span></span>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Input > renders with loadingIcon correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><span class="iconify i-heroicons:sparkles shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" aria-hidden="true"></span></span>
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-heroicons:sparkles shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" aria-hidden="true"></span></span>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
@@ -226,20 +226,20 @@ exports[`Input > renders with size xs correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Input > renders with trailing and icon correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" autocomplete="off">
|
||||
<!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:arrow-right shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" autocomplete="off">
|
||||
<!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:arrow-right shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Input > renders with trailing slot correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" autocomplete="off">
|
||||
<!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pr-2.5">Trailing slot</span>
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" autocomplete="off">
|
||||
<!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5">Trailing slot</span>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Input > renders with trailingIcon correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" autocomplete="off">
|
||||
<!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:arrow-right shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" autocomplete="off">
|
||||
<!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:arrow-right shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`InputMenu > renders with arrow correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -36,8 +36,8 @@ exports[`InputMenu > renders with arrow correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with as correctly 1`] = `
|
||||
"<section style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<section style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -71,7 +71,7 @@ exports[`InputMenu > renders with as correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with avatar and leadingIcon correctly 1`] = `
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pl-9 pr-9" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->
|
||||
@@ -79,7 +79,7 @@ exports[`InputMenu > renders with avatar and leadingIcon correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with avatar and trailingIcon correctly 1`] = `
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pl-9 pr-9" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><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://github.com/benjamincanac.png" 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><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><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://github.com/benjamincanac.png" 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><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->
|
||||
@@ -87,7 +87,7 @@ exports[`InputMenu > renders with avatar and trailingIcon correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with avatar correctly 1`] = `
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pl-9 pr-9" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><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://github.com/benjamincanac.png" 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><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><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://github.com/benjamincanac.png" 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><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->
|
||||
@@ -95,8 +95,8 @@ exports[`InputMenu > renders with avatar correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with class correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="inline-flex items-center absolute"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="inline-flex items-center absolute"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -130,8 +130,8 @@ exports[`InputMenu > renders with class correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with default slot correctly 1`] = `
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->
|
||||
@@ -139,8 +139,8 @@ exports[`InputMenu > renders with default slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with defaultValue correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -174,8 +174,8 @@ exports[`InputMenu > renders with defaultValue correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with disabled correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" disabled="" aria-expanded="true" aria-controls="" aria-disabled="true" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" value="">
|
||||
<!--v-if--><button disabled="" type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" data-disabled="" aria-disabled="true" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" disabled="" aria-expanded="true" aria-controls="" aria-disabled="true" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" value="">
|
||||
<!--v-if--><button disabled="" type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" data-disabled="" aria-disabled="true" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -209,7 +209,7 @@ exports[`InputMenu > renders with disabled correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with icon correctly 1`] = `
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pl-9 pr-9" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->
|
||||
@@ -217,8 +217,8 @@ exports[`InputMenu > renders with icon correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with id correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" id="id" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" id="id" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -252,8 +252,8 @@ exports[`InputMenu > renders with id correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with item slot correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -287,8 +287,8 @@ exports[`InputMenu > renders with item slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with item-label slot correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -322,8 +322,8 @@ exports[`InputMenu > renders with item-label slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with item-leading slot correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -357,8 +357,8 @@ exports[`InputMenu > renders with item-leading slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with item-trailing slot correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -392,8 +392,8 @@ exports[`InputMenu > renders with item-trailing slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with items correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -427,8 +427,8 @@ exports[`InputMenu > renders with items correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with labelKey correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -462,7 +462,7 @@ exports[`InputMenu > renders with labelKey correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with leading and icon correctly 1`] = `
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pl-9 pr-9" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->
|
||||
@@ -470,7 +470,7 @@ exports[`InputMenu > renders with leading and icon correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with leading slot correctly 1`] = `
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pl-9 pr-9" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-2.5">Leading slot</span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5">Leading slot</span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->
|
||||
@@ -478,7 +478,7 @@ exports[`InputMenu > renders with leading slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with leadingIcon correctly 1`] = `
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pl-9 pr-9" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->
|
||||
@@ -486,7 +486,7 @@ exports[`InputMenu > renders with leadingIcon correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with loading and avatar correctly 1`] = `
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pl-9 pr-9" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->
|
||||
@@ -494,7 +494,7 @@ exports[`InputMenu > renders with loading and avatar correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with loading correctly 1`] = `
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pl-9 pr-9" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->
|
||||
@@ -502,7 +502,7 @@ exports[`InputMenu > renders with loading correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with loading trailing and avatar correctly 1`] = `
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pl-9 pr-9" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><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://github.com/benjamincanac.png" 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><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><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://github.com/benjamincanac.png" 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><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->
|
||||
@@ -510,8 +510,8 @@ exports[`InputMenu > renders with loading trailing and avatar correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with loading trailing correctly 1`] = `
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->
|
||||
@@ -519,7 +519,7 @@ exports[`InputMenu > renders with loading trailing correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with loadingIcon correctly 1`] = `
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pl-9 pr-9" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->
|
||||
@@ -527,8 +527,8 @@ exports[`InputMenu > renders with loadingIcon correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with modelValue correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -562,8 +562,8 @@ exports[`InputMenu > renders with modelValue correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with name correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -597,8 +597,8 @@ exports[`InputMenu > renders with name correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with neutral variant ghost correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pr-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -632,8 +632,8 @@ exports[`InputMenu > renders with neutral variant ghost correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with neutral variant none correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pr-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -667,8 +667,8 @@ exports[`InputMenu > renders with neutral variant none correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with neutral variant outline correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] pr-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] pe-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -702,8 +702,8 @@ exports[`InputMenu > renders with neutral variant outline correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with neutral variant soft correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors px-2.5 py-1.5 text-sm gap-1.5 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 w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pr-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors px-2.5 py-1.5 text-sm gap-1.5 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 w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -737,8 +737,8 @@ exports[`InputMenu > renders with neutral variant soft correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with neutral variant subtle correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] ring ring-inset ring-[var(--ui-border-accented)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] pr-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] ring ring-inset ring-[var(--ui-border-accented)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] pe-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -772,8 +772,8 @@ exports[`InputMenu > renders with neutral variant subtle correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with placeholder correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" placeholder="Search..." class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" placeholder="Search..." class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -807,8 +807,8 @@ exports[`InputMenu > renders with placeholder correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with primary variant ghost correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pr-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -842,8 +842,8 @@ exports[`InputMenu > renders with primary variant ghost correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with primary variant none correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pr-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -877,8 +877,8 @@ exports[`InputMenu > renders with primary variant none correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with primary variant outline correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -912,8 +912,8 @@ exports[`InputMenu > renders with primary variant outline correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with primary variant soft correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors px-2.5 py-1.5 text-sm gap-1.5 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 w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pr-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors px-2.5 py-1.5 text-sm gap-1.5 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 w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -947,8 +947,8 @@ exports[`InputMenu > renders with primary variant soft correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with primary variant subtle correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] ring ring-inset ring-[var(--ui-border-accented)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] ring ring-inset ring-[var(--ui-border-accented)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -982,8 +982,8 @@ exports[`InputMenu > renders with primary variant subtle correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with required correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" required="" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" required="" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -1017,8 +1017,8 @@ exports[`InputMenu > renders with required correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with selectedIcon correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -1052,8 +1052,8 @@ exports[`InputMenu > renders with selectedIcon correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with size lg correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-10" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-10" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -1087,8 +1087,8 @@ exports[`InputMenu > renders with size lg correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with size md correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -1122,8 +1122,8 @@ exports[`InputMenu > renders with size md correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with size sm correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-8" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-8" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -1157,8 +1157,8 @@ exports[`InputMenu > renders with size sm correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with size xl correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-11" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-11" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -1192,8 +1192,8 @@ exports[`InputMenu > renders with size xl correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with size xs correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-7" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-7" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -1227,8 +1227,8 @@ exports[`InputMenu > renders with size xs correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with trailing and icon correctly 1`] = `
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->
|
||||
@@ -1236,8 +1236,8 @@ exports[`InputMenu > renders with trailing and icon correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with trailing slot correctly 1`] = `
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5">Trailing slot</button>
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5">Trailing slot</button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->
|
||||
@@ -1245,8 +1245,8 @@ exports[`InputMenu > renders with trailing slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with trailingIcon correctly 1`] = `
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->
|
||||
@@ -1254,8 +1254,8 @@ exports[`InputMenu > renders with trailingIcon correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with trailingIcon correctly 2`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -1289,8 +1289,8 @@ exports[`InputMenu > renders with trailingIcon correctly 2`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with ui correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -1324,8 +1324,8 @@ exports[`InputMenu > renders with ui correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with valueKey correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`InputMenu > renders with arrow correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0-0-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -36,8 +36,8 @@ exports[`InputMenu > renders with arrow correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with as correctly 1`] = `
|
||||
"<section style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<section style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0-0-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -71,7 +71,7 @@ exports[`InputMenu > renders with as correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with avatar and leadingIcon correctly 1`] = `
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pl-9 pr-9" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><span class="iconify i-heroicons:arrow-left shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-heroicons:arrow-left shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->
|
||||
@@ -79,7 +79,7 @@ exports[`InputMenu > renders with avatar and leadingIcon correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with avatar and trailingIcon correctly 1`] = `
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pl-9 pr-9" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><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://github.com/benjamincanac.png" 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><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:arrow-right shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><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://github.com/benjamincanac.png" 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><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:arrow-right shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->
|
||||
@@ -87,7 +87,7 @@ exports[`InputMenu > renders with avatar and trailingIcon correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with avatar correctly 1`] = `
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pl-9 pr-9" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><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://github.com/benjamincanac.png" 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><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><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://github.com/benjamincanac.png" 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><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->
|
||||
@@ -95,8 +95,8 @@ exports[`InputMenu > renders with avatar correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with class correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="inline-flex items-center absolute"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="inline-flex items-center absolute"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0-0-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -130,8 +130,8 @@ exports[`InputMenu > renders with class correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with default slot correctly 1`] = `
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->
|
||||
@@ -139,8 +139,8 @@ exports[`InputMenu > renders with default slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with defaultValue correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0-0-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -174,8 +174,8 @@ exports[`InputMenu > renders with defaultValue correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with disabled correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" disabled="" aria-expanded="true" aria-disabled="true" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button disabled="" type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" data-disabled="" aria-disabled="true" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" disabled="" aria-expanded="true" aria-disabled="true" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button disabled="" type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" data-disabled="" aria-disabled="true" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0-0-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -209,7 +209,7 @@ exports[`InputMenu > renders with disabled correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with icon correctly 1`] = `
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pl-9 pr-9" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><span class="iconify i-heroicons:magnifying-glass shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-heroicons:magnifying-glass shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->
|
||||
@@ -217,8 +217,8 @@ exports[`InputMenu > renders with icon correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with id correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" id="id" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" id="id" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0-0-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -252,8 +252,8 @@ exports[`InputMenu > renders with id correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with item slot correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0-0-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -287,8 +287,8 @@ exports[`InputMenu > renders with item slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with item-label slot correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0-0-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -322,8 +322,8 @@ exports[`InputMenu > renders with item-label slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with item-leading slot correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0-0-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -357,8 +357,8 @@ exports[`InputMenu > renders with item-leading slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with item-trailing slot correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0-0-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -392,8 +392,8 @@ exports[`InputMenu > renders with item-trailing slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with items correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0-0-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -427,8 +427,8 @@ exports[`InputMenu > renders with items correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with labelKey correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0-0-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -462,7 +462,7 @@ exports[`InputMenu > renders with labelKey correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with leading and icon correctly 1`] = `
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pl-9 pr-9" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><span class="iconify i-heroicons:arrow-left shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-heroicons:arrow-left shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->
|
||||
@@ -470,7 +470,7 @@ exports[`InputMenu > renders with leading and icon correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with leading slot correctly 1`] = `
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pl-9 pr-9" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-2.5">Leading slot</span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5">Leading slot</span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->
|
||||
@@ -478,7 +478,7 @@ exports[`InputMenu > renders with leading slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with leadingIcon correctly 1`] = `
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pl-9 pr-9" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><span class="iconify i-heroicons:arrow-left shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-heroicons:arrow-left shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->
|
||||
@@ -486,7 +486,7 @@ exports[`InputMenu > renders with leadingIcon correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with loading and avatar correctly 1`] = `
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pl-9 pr-9" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><span class="iconify i-heroicons:arrow-path-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" aria-hidden="true"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-heroicons:arrow-path-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" aria-hidden="true"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->
|
||||
@@ -494,7 +494,7 @@ exports[`InputMenu > renders with loading and avatar correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with loading correctly 1`] = `
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pl-9 pr-9" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><span class="iconify i-heroicons:arrow-path-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" aria-hidden="true"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-heroicons:arrow-path-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" aria-hidden="true"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->
|
||||
@@ -502,7 +502,7 @@ exports[`InputMenu > renders with loading correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with loading trailing and avatar correctly 1`] = `
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pl-9 pr-9" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><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://github.com/benjamincanac.png" 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><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:arrow-path-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><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://github.com/benjamincanac.png" 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><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:arrow-path-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->
|
||||
@@ -510,8 +510,8 @@ exports[`InputMenu > renders with loading trailing and avatar correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with loading trailing correctly 1`] = `
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:arrow-path-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" aria-hidden="true"></span></button>
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:arrow-path-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->
|
||||
@@ -519,7 +519,7 @@ exports[`InputMenu > renders with loading trailing correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with loadingIcon correctly 1`] = `
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pl-9 pr-9" value=""><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><span class="iconify i-heroicons:sparkles shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" aria-hidden="true"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] ps-9 pe-9" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-heroicons:sparkles shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" aria-hidden="true"></span></span><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->
|
||||
@@ -527,8 +527,8 @@ exports[`InputMenu > renders with loadingIcon correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with modelValue correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="Backlog">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="Backlog">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0-0-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -562,8 +562,8 @@ exports[`InputMenu > renders with modelValue correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with name correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0-0-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -597,8 +597,8 @@ exports[`InputMenu > renders with name correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with neutral variant ghost correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pr-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0-0-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -632,8 +632,8 @@ exports[`InputMenu > renders with neutral variant ghost correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with neutral variant none correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pr-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0-0-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -667,8 +667,8 @@ exports[`InputMenu > renders with neutral variant none correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with neutral variant outline correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] pr-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] pe-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0-0-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -702,8 +702,8 @@ exports[`InputMenu > renders with neutral variant outline correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with neutral variant soft correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors px-2.5 py-1.5 text-sm gap-1.5 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 w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pr-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors px-2.5 py-1.5 text-sm gap-1.5 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 w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0-0-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -737,8 +737,8 @@ exports[`InputMenu > renders with neutral variant soft correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with neutral variant subtle correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] ring ring-inset ring-[var(--ui-border-accented)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] pr-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] ring ring-inset ring-[var(--ui-border-accented)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] pe-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0-0-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -772,8 +772,8 @@ exports[`InputMenu > renders with neutral variant subtle correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with placeholder correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" placeholder="Search..." class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" placeholder="Search..." class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0-0-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -807,8 +807,8 @@ exports[`InputMenu > renders with placeholder correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with primary variant ghost correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pr-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0-0-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -842,8 +842,8 @@ exports[`InputMenu > renders with primary variant ghost correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with primary variant none correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pr-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0-0-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -877,8 +877,8 @@ exports[`InputMenu > renders with primary variant none correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with primary variant outline correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0-0-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -912,8 +912,8 @@ exports[`InputMenu > renders with primary variant outline correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with primary variant soft correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors px-2.5 py-1.5 text-sm gap-1.5 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 w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pr-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors px-2.5 py-1.5 text-sm gap-1.5 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 w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0-0-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -947,8 +947,8 @@ exports[`InputMenu > renders with primary variant soft correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with primary variant subtle correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] ring ring-inset ring-[var(--ui-border-accented)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] ring ring-inset ring-[var(--ui-border-accented)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0-0-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -982,8 +982,8 @@ exports[`InputMenu > renders with primary variant subtle correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with required correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" required="" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" required="" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0-0-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -1017,8 +1017,8 @@ exports[`InputMenu > renders with required correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with selectedIcon correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0-0-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -1052,8 +1052,8 @@ exports[`InputMenu > renders with selectedIcon correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with size lg correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-10" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-3"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-10" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-3"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0-0-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -1087,8 +1087,8 @@ exports[`InputMenu > renders with size lg correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with size md correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0-0-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -1122,8 +1122,8 @@ exports[`InputMenu > renders with size md correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with size sm correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-8" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-4" aria-hidden="true"></span></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-8" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-4" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0-0-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -1157,8 +1157,8 @@ exports[`InputMenu > renders with size sm correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with size xl correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-11" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-3"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-6" aria-hidden="true"></span></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-11" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-3"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-6" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0-0-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -1192,8 +1192,8 @@ exports[`InputMenu > renders with size xl correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with size xs correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-7" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-4" aria-hidden="true"></span></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-7" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-4" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0-0-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -1227,8 +1227,8 @@ exports[`InputMenu > renders with size xs correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with trailing and icon correctly 1`] = `
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->
|
||||
@@ -1236,8 +1236,8 @@ exports[`InputMenu > renders with trailing and icon correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with trailing slot correctly 1`] = `
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5">Trailing slot</button>
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5">Trailing slot</button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->
|
||||
@@ -1245,8 +1245,8 @@ exports[`InputMenu > renders with trailing slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with trailingIcon correctly 1`] = `
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:arrow-right shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<div dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="false" aria-controls="" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:arrow-right shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->
|
||||
@@ -1254,8 +1254,8 @@ exports[`InputMenu > renders with trailingIcon correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with trailingIcon correctly 2`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:chevron-down shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0-0-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -1289,8 +1289,8 @@ exports[`InputMenu > renders with trailingIcon correctly 2`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with ui correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0-0-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
@@ -1324,8 +1324,8 @@ exports[`InputMenu > renders with ui correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with valueKey correctly 1`] = `
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
"<div style="pointer-events: auto;" dir="ltr" class="relative inline-flex items-center"><input type="text" aria-expanded="true" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-[calc(var(--ui-radius)*1.5)] transition-colors 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)] w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" aria-controls="radix-vue-combobox-content-v-0-0-0" aria-activedescendant="radix-vue-combobox-option-v-0-0-3" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></button>
|
||||
<!--teleport start-->
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div position="popper" dismissable="true" id="radix-vue-combobox-content-v-0-0-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline-color: none; outline-style: none; outline-width: initial; box-sizing: border-box; --radix-combobox-content-transform-origin: var(--radix-popper-transform-origin); --radix-combobox-content-available-width: var(--radix-popper-available-width); --radix-combobox-content-available-height: var(--radix-popper-available-height); --radix-combobox-trigger-width: var(--radix-popper-anchor-width); --radix-combobox-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center">
|
||||
|
||||
@@ -9,7 +9,7 @@ exports[`Modal > renders with body slot correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] 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)]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<!--v-if-->
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 right-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -31,7 +31,7 @@ exports[`Modal > renders with class correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] 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)] bg-[var(--ui-bg-elevated)]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<!--v-if-->
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 right-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -72,7 +72,7 @@ exports[`Modal > renders with closeIcon correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] 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)]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<!--v-if-->
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 right-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -106,7 +106,7 @@ exports[`Modal > renders with default slot correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="radix-vue-dialog-content-v-0" role="dialog" aria-describedby="radix-vue-dialog-description-v-2" aria-labelledby="radix-vue-dialog-title-v-1" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] 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)]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<!--v-if-->
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 right-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -128,7 +128,7 @@ exports[`Modal > renders with description correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] 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)]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<h2 id="radix-vue-dialog-title-v-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
|
||||
<p id="radix-vue-dialog-description-v-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><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)] 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 p-1.5 absolute top-4 right-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<p id="radix-vue-dialog-description-v-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><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)] 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 p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -150,7 +150,7 @@ exports[`Modal > renders with description slot correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] 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)]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<!--v-if-->
|
||||
<p id="radix-vue-dialog-description-v-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description slot</p><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)] 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 p-1.5 absolute top-4 right-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<p id="radix-vue-dialog-description-v-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description slot</p><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)] 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 p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -172,7 +172,7 @@ exports[`Modal > renders with footer slot correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] 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)]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<!--v-if-->
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 right-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -194,7 +194,7 @@ exports[`Modal > renders with fullscreen correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] inset-0">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<h2 id="radix-vue-dialog-title-v-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
|
||||
<p id="radix-vue-dialog-description-v-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><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)] 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 p-1.5 absolute top-4 right-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<p id="radix-vue-dialog-description-v-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><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)] 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 p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -232,7 +232,7 @@ exports[`Modal > renders with open correctly 1`] = `
|
||||
<div data-dismissable-layer="" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] 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)]" style="pointer-events: auto;">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<!--v-if-->
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 right-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -254,7 +254,7 @@ exports[`Modal > renders with title correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] 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)]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<h2 id="radix-vue-dialog-title-v-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 right-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -276,7 +276,7 @@ exports[`Modal > renders with title slot correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] 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)]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<h2 id="radix-vue-dialog-title-v-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title slot</h2>
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 right-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -298,7 +298,7 @@ exports[`Modal > renders with ui correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] 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)]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<!--v-if-->
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 right-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 end-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -339,7 +339,7 @@ exports[`Modal > renders without overlay correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] 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)]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<h2 id="radix-vue-dialog-title-v-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
|
||||
<p id="radix-vue-dialog-description-v-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><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)] 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 p-1.5 absolute top-4 right-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<p id="radix-vue-dialog-description-v-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><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)] 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 p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -361,7 +361,7 @@ exports[`Modal > renders without transition correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none 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)]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<h2 id="radix-vue-dialog-title-v-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
|
||||
<p id="radix-vue-dialog-description-v-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><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)] 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 p-1.5 absolute top-4 right-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<p id="radix-vue-dialog-description-v-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><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)] 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 p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
|
||||
@@ -9,7 +9,7 @@ exports[`Modal > renders with body slot correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] 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)]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<!--v-if-->
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 right-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 end-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -31,7 +31,7 @@ exports[`Modal > renders with class correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] 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)] bg-[var(--ui-bg-elevated)]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<!--v-if-->
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 right-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 end-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -72,7 +72,7 @@ exports[`Modal > renders with closeIcon correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] 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)]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<!--v-if-->
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 right-4"><span class="iconify i-heroicons:trash shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 end-4"><span class="iconify i-heroicons:trash shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -106,7 +106,7 @@ exports[`Modal > renders with default slot correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="radix-vue-dialog-content-v-0-0-0" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-2" aria-labelledby="radix-vue-dialog-title-v-0-0-1" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] 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)]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<!--v-if-->
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 right-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 end-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -128,7 +128,7 @@ exports[`Modal > renders with description correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] 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)]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<h2 id="radix-vue-dialog-title-v-0-0-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
|
||||
<p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><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)] 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 p-1.5 absolute top-4 right-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><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)] 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 p-1.5 absolute top-4 end-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -150,7 +150,7 @@ exports[`Modal > renders with description slot correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] 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)]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<!--v-if-->
|
||||
<p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description slot</p><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)] 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 p-1.5 absolute top-4 right-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description slot</p><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)] 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 p-1.5 absolute top-4 end-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -172,7 +172,7 @@ exports[`Modal > renders with footer slot correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] 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)]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<!--v-if-->
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 right-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 end-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -194,7 +194,7 @@ exports[`Modal > renders with fullscreen correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] inset-0">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<h2 id="radix-vue-dialog-title-v-0-0-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
|
||||
<p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><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)] 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 p-1.5 absolute top-4 right-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><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)] 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 p-1.5 absolute top-4 end-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -232,7 +232,7 @@ exports[`Modal > renders with open correctly 1`] = `
|
||||
<div data-dismissable-layer="" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] 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)]" style="pointer-events: auto;">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<!--v-if-->
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 right-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 end-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -254,7 +254,7 @@ exports[`Modal > renders with title correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] 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)]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<h2 id="radix-vue-dialog-title-v-0-0-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 right-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 end-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -276,7 +276,7 @@ exports[`Modal > renders with title slot correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] 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)]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<h2 id="radix-vue-dialog-title-v-0-0-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title slot</h2>
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 right-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 end-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -298,7 +298,7 @@ exports[`Modal > renders with ui correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] 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)]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<!--v-if-->
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 right-2"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 end-2"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -339,7 +339,7 @@ exports[`Modal > renders without overlay correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] 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)]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<h2 id="radix-vue-dialog-title-v-0-0-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
|
||||
<p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><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)] 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 p-1.5 absolute top-4 right-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><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)] 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 p-1.5 absolute top-4 end-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -361,7 +361,7 @@ exports[`Modal > renders without transition correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none 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)]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<h2 id="radix-vue-dialog-title-v-0-0-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
|
||||
<p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><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)] 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 p-1.5 absolute top-4 right-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><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)] 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 p-1.5 absolute top-4 end-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`Select > renders with arrow correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -56,29 +56,29 @@ exports[`Select > renders with arrow correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with avatar and leadingIcon correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value=""></select>"
|
||||
`;
|
||||
|
||||
exports[`Select > renders with avatar and trailingIcon correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><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://github.com/benjamincanac.png" 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><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><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://github.com/benjamincanac.png" 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><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value=""></select>"
|
||||
`;
|
||||
|
||||
exports[`Select > renders with avatar correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><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://github.com/benjamincanac.png" 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><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><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://github.com/benjamincanac.png" 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><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value=""></select>"
|
||||
`;
|
||||
|
||||
exports[`Select > renders with class correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9 rounded-full">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9 rounded-full">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -132,8 +132,8 @@ exports[`Select > renders with class correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with defaultValue correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"></span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -187,8 +187,8 @@ exports[`Select > renders with defaultValue correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with disabled correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" disabled="" dir="ltr" data-state="open" data-disabled="" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" disabled="" dir="ltr" data-state="open" data-disabled="" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -242,15 +242,15 @@ exports[`Select > renders with disabled correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with icon correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value=""></select>"
|
||||
`;
|
||||
|
||||
exports[`Select > renders with id correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -304,8 +304,8 @@ exports[`Select > renders with id correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with item slot correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -342,8 +342,8 @@ exports[`Select > renders with item slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with item-label slot correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -397,8 +397,8 @@ exports[`Select > renders with item-label slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with item-leading slot correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -452,8 +452,8 @@ exports[`Select > renders with item-leading slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with item-trailing slot correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -507,8 +507,8 @@ exports[`Select > renders with item-trailing slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with items correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -562,8 +562,8 @@ exports[`Select > renders with items correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with labelKey correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -617,14 +617,14 @@ exports[`Select > renders with labelKey correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with leading and icon correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value=""></select>"
|
||||
`;
|
||||
|
||||
exports[`Select > renders with leading slot correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5">Leading slot</span><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5">Leading slot</span><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
<!--teleport start-->
|
||||
|
||||
|
||||
@@ -677,36 +677,36 @@ exports[`Select > renders with leading slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with leadingIcon correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value=""></select>"
|
||||
`;
|
||||
|
||||
exports[`Select > renders with loading and avatar correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value=""></select>"
|
||||
`;
|
||||
|
||||
exports[`Select > renders with loading correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value=""></select>"
|
||||
`;
|
||||
|
||||
exports[`Select > renders with loading trailing and avatar correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><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://github.com/benjamincanac.png" 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><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><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://github.com/benjamincanac.png" 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><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value=""></select>"
|
||||
`;
|
||||
|
||||
exports[`Select > renders with loading trailing correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
@@ -714,15 +714,15 @@ exports[`Select > renders with loading trailing correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with loadingIcon correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value=""></select>"
|
||||
`;
|
||||
|
||||
exports[`Select > renders with modelValue correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"></span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -776,8 +776,8 @@ exports[`Select > renders with modelValue correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with name correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -831,8 +831,8 @@ exports[`Select > renders with name correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with neutral variant ghost correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -886,8 +886,8 @@ exports[`Select > renders with neutral variant ghost correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with neutral variant none correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -941,8 +941,8 @@ exports[`Select > renders with neutral variant none correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with neutral variant outline correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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-border-inverted)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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-border-inverted)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -996,8 +996,8 @@ exports[`Select > renders with neutral variant outline correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with neutral variant soft correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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 pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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 pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1051,8 +1051,8 @@ exports[`Select > renders with neutral variant soft correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with neutral variant subtle correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1106,8 +1106,8 @@ exports[`Select > renders with neutral variant subtle correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with placeholder correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]">Search...</span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]">Search...</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1161,8 +1161,8 @@ exports[`Select > renders with placeholder correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with primary variant ghost correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1216,8 +1216,8 @@ exports[`Select > renders with primary variant ghost correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with primary variant none correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1271,8 +1271,8 @@ exports[`Select > renders with primary variant none correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with primary variant outline correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1326,8 +1326,8 @@ exports[`Select > renders with primary variant outline correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with primary variant soft correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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 pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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 pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1381,8 +1381,8 @@ exports[`Select > renders with primary variant soft correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with primary variant subtle correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1436,8 +1436,8 @@ exports[`Select > renders with primary variant subtle correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with required correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="true" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="true" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1491,8 +1491,8 @@ exports[`Select > renders with required correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with selectedIcon correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1546,8 +1546,8 @@ exports[`Select > renders with selectedIcon correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with size lg correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-[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)] pr-10">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-[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)] pe-10">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1601,8 +1601,8 @@ exports[`Select > renders with size lg correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with size md correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1656,8 +1656,8 @@ exports[`Select > renders with size md correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with size sm correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-[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)] pr-8">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-[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)] pe-8">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1711,8 +1711,8 @@ exports[`Select > renders with size sm correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with size xl correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-[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)] pr-11">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-[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)] pe-11">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1766,8 +1766,8 @@ exports[`Select > renders with size xl correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with size xs correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-[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)] pr-7">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-[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)] pe-7">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1821,8 +1821,8 @@ exports[`Select > renders with size xs correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with trailing and icon correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
@@ -1830,8 +1830,8 @@ exports[`Select > renders with trailing and icon correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with trailing slot correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5">Trailing slot</span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5">Trailing slot</span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1885,8 +1885,8 @@ exports[`Select > renders with trailing slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with trailingIcon correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
@@ -1894,8 +1894,8 @@ exports[`Select > renders with trailingIcon correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with trailingIcon correctly 2`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1949,8 +1949,8 @@ exports[`Select > renders with trailingIcon correctly 2`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with ui correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -2004,8 +2004,8 @@ exports[`Select > renders with ui correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with valueKey correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`Select > renders with arrow correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -56,29 +56,29 @@ exports[`Select > renders with arrow correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with avatar and leadingIcon correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><span class="iconify i-heroicons:arrow-left shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></button>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-heroicons:arrow-left shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value=""></select>"
|
||||
`;
|
||||
|
||||
exports[`Select > renders with avatar and trailingIcon correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><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://github.com/benjamincanac.png" 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><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:arrow-right shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></button>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><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://github.com/benjamincanac.png" 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><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:arrow-right shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value=""></select>"
|
||||
`;
|
||||
|
||||
exports[`Select > renders with avatar correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><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://github.com/benjamincanac.png" 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><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></button>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><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://github.com/benjamincanac.png" 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><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value=""></select>"
|
||||
`;
|
||||
|
||||
exports[`Select > renders with class correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9 rounded-full">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9 rounded-full">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -132,8 +132,8 @@ exports[`Select > renders with class correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with defaultValue correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"></span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -187,8 +187,8 @@ exports[`Select > renders with defaultValue correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with disabled correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" disabled="" dir="ltr" data-state="open" data-disabled="" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" disabled="" dir="ltr" data-state="open" data-disabled="" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -242,15 +242,15 @@ exports[`Select > renders with disabled correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with icon correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><span class="iconify i-heroicons:magnifying-glass shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></button>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-heroicons:magnifying-glass shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value=""></select>"
|
||||
`;
|
||||
|
||||
exports[`Select > renders with id correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -304,8 +304,8 @@ exports[`Select > renders with id correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with item slot correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -342,8 +342,8 @@ exports[`Select > renders with item slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with item-label slot correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -397,8 +397,8 @@ exports[`Select > renders with item-label slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with item-leading slot correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -452,8 +452,8 @@ exports[`Select > renders with item-leading slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with item-trailing slot correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -507,8 +507,8 @@ exports[`Select > renders with item-trailing slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with items correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -562,8 +562,8 @@ exports[`Select > renders with items correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with labelKey correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -617,14 +617,14 @@ exports[`Select > renders with labelKey correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with leading and icon correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><span class="iconify i-heroicons:arrow-left shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></button>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-heroicons:arrow-left shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value=""></select>"
|
||||
`;
|
||||
|
||||
exports[`Select > renders with leading slot correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5">Leading slot</span><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></button>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5">Leading slot</span><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></button>
|
||||
<!--teleport start-->
|
||||
|
||||
|
||||
@@ -677,36 +677,36 @@ exports[`Select > renders with leading slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with leadingIcon correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><span class="iconify i-heroicons:arrow-left shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></button>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-heroicons:arrow-left shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value=""></select>"
|
||||
`;
|
||||
|
||||
exports[`Select > renders with loading and avatar correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><span class="iconify i-heroicons:arrow-path-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" aria-hidden="true"></span></span><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></button>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-heroicons:arrow-path-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" aria-hidden="true"></span></span><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value=""></select>"
|
||||
`;
|
||||
|
||||
exports[`Select > renders with loading correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><span class="iconify i-heroicons:arrow-path-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" aria-hidden="true"></span></span><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></button>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-heroicons:arrow-path-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" aria-hidden="true"></span></span><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value=""></select>"
|
||||
`;
|
||||
|
||||
exports[`Select > renders with loading trailing and avatar correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><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://github.com/benjamincanac.png" 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><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:arrow-path-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></button>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><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://github.com/benjamincanac.png" 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><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:arrow-path-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value=""></select>"
|
||||
`;
|
||||
|
||||
exports[`Select > renders with loading trailing correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:arrow-path-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" aria-hidden="true"></span></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:arrow-path-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
@@ -714,15 +714,15 @@ exports[`Select > renders with loading trailing correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with loadingIcon correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><span class="iconify i-heroicons:sparkles shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" aria-hidden="true"></span></span><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></button>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-heroicons:sparkles shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" aria-hidden="true"></span></span><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<select default-value="" style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="true" tabindex="-1" value=""></select>"
|
||||
`;
|
||||
|
||||
exports[`Select > renders with modelValue correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"></span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -776,8 +776,8 @@ exports[`Select > renders with modelValue correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with name correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -831,8 +831,8 @@ exports[`Select > renders with name correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with neutral variant ghost correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -886,8 +886,8 @@ exports[`Select > renders with neutral variant ghost correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with neutral variant none correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -941,8 +941,8 @@ exports[`Select > renders with neutral variant none correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with neutral variant outline correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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-border-inverted)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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-border-inverted)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -996,8 +996,8 @@ exports[`Select > renders with neutral variant outline correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with neutral variant soft correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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 pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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 pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1051,8 +1051,8 @@ exports[`Select > renders with neutral variant soft correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with neutral variant subtle correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1106,8 +1106,8 @@ exports[`Select > renders with neutral variant subtle correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with placeholder correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]">Search...</span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]">Search...</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1161,8 +1161,8 @@ exports[`Select > renders with placeholder correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with primary variant ghost correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1216,8 +1216,8 @@ exports[`Select > renders with primary variant ghost correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with primary variant none correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1271,8 +1271,8 @@ exports[`Select > renders with primary variant none correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with primary variant outline correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1326,8 +1326,8 @@ exports[`Select > renders with primary variant outline correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with primary variant soft correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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 pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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 pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1381,8 +1381,8 @@ exports[`Select > renders with primary variant soft correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with primary variant subtle correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1436,8 +1436,8 @@ exports[`Select > renders with primary variant subtle correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with required correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="true" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="true" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1491,8 +1491,8 @@ exports[`Select > renders with required correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with selectedIcon correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1546,8 +1546,8 @@ exports[`Select > renders with selectedIcon correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with size lg correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-[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)] pr-10">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-3"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-[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)] pe-10">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-3"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1601,8 +1601,8 @@ exports[`Select > renders with size lg correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with size md correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1656,8 +1656,8 @@ exports[`Select > renders with size md correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with size sm correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-[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)] pr-8">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-4" aria-hidden="true"></span></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-[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)] pe-8">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-4" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1711,8 +1711,8 @@ exports[`Select > renders with size sm correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with size xl correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-[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)] pr-11">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-3"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-6" aria-hidden="true"></span></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-[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)] pe-11">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-3"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-6" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1766,8 +1766,8 @@ exports[`Select > renders with size xl correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with size xs correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-[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)] pr-7">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-4" aria-hidden="true"></span></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-[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)] pe-7">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-4" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1821,8 +1821,8 @@ exports[`Select > renders with size xs correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with trailing and icon correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
@@ -1830,8 +1830,8 @@ exports[`Select > renders with trailing and icon correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with trailing slot correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5">Trailing slot</span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5">Trailing slot</span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1885,8 +1885,8 @@ exports[`Select > renders with trailing slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with trailingIcon correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:arrow-right shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:arrow-right shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
@@ -1894,8 +1894,8 @@ exports[`Select > renders with trailingIcon correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with trailingIcon correctly 2`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1949,8 +1949,8 @@ exports[`Select > renders with trailingIcon correctly 2`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with ui correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -2004,8 +2004,8 @@ exports[`Select > renders with ui correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Select > renders with valueKey correctly 1`] = `
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button role="combobox" type="button" aria-controls="radix-vue-select-content-v-0-0-0" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9">
|
||||
<!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`SelectMenu > renders with arrow correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -40,29 +40,29 @@ exports[`SelectMenu > renders with arrow correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with avatar and leadingIcon correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with avatar and trailingIcon correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><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://github.com/benjamincanac.png" 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><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><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://github.com/benjamincanac.png" 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><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with avatar correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><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://github.com/benjamincanac.png" 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><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><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://github.com/benjamincanac.png" 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><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with class correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9 rounded-full" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9 rounded-full" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -100,8 +100,8 @@ exports[`SelectMenu > renders with class correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with default slot correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if-->Default slot<span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if-->Default slot<span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -139,8 +139,8 @@ exports[`SelectMenu > renders with default slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with defaultValue correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -178,8 +178,8 @@ exports[`SelectMenu > renders with defaultValue correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with disabled correctly 1`] = `
|
||||
"<button disabled="" type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" data-disabled="" aria-disabled="true" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button disabled="" type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" data-disabled="" aria-disabled="true" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -217,15 +217,15 @@ exports[`SelectMenu > renders with disabled correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with icon correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with id correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr" id="id">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr" id="id">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -263,8 +263,8 @@ exports[`SelectMenu > renders with id correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with item slot correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -302,8 +302,8 @@ exports[`SelectMenu > renders with item slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with item-label slot correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -341,8 +341,8 @@ exports[`SelectMenu > renders with item-label slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with item-leading slot correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -380,8 +380,8 @@ exports[`SelectMenu > renders with item-leading slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with item-trailing slot correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -419,8 +419,8 @@ exports[`SelectMenu > renders with item-trailing slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with items correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -458,8 +458,8 @@ exports[`SelectMenu > renders with items correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with labelKey correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -497,14 +497,14 @@ exports[`SelectMenu > renders with labelKey correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with leading and icon correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with leading slot correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9" style="pointer-events: auto;" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5">Leading slot</span><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9" style="pointer-events: auto;" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5">Leading slot</span><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
<!--teleport start-->
|
||||
|
||||
|
||||
@@ -541,36 +541,36 @@ exports[`SelectMenu > renders with leading slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with leadingIcon correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with loading and avatar correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with loading correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with loading trailing and avatar correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><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://github.com/benjamincanac.png" 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><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><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://github.com/benjamincanac.png" 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><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with loading trailing correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
@@ -578,15 +578,15 @@ exports[`SelectMenu > renders with loading trailing correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with loadingIcon correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with modelValue correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate">Backlog</span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate">Backlog</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -624,8 +624,8 @@ exports[`SelectMenu > renders with modelValue correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with multiple and modelValue correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate">Backlog, Todo</span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate">Backlog, Todo</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -663,8 +663,8 @@ exports[`SelectMenu > renders with multiple and modelValue correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with multiple correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -702,8 +702,8 @@ exports[`SelectMenu > renders with multiple correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with name correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -741,8 +741,8 @@ exports[`SelectMenu > renders with name correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with neutral variant ghost correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -780,8 +780,8 @@ exports[`SelectMenu > renders with neutral variant ghost correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with neutral variant none correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -819,8 +819,8 @@ exports[`SelectMenu > renders with neutral variant none correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with neutral variant outline correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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-border-inverted)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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-border-inverted)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -858,8 +858,8 @@ exports[`SelectMenu > renders with neutral variant outline correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with neutral variant soft correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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 pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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 pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -897,8 +897,8 @@ exports[`SelectMenu > renders with neutral variant soft correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with neutral variant subtle correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -936,8 +936,8 @@ exports[`SelectMenu > renders with neutral variant subtle correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with placeholder correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]">Search...</span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]">Search...</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -975,8 +975,8 @@ exports[`SelectMenu > renders with placeholder correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with primary variant ghost correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1014,8 +1014,8 @@ exports[`SelectMenu > renders with primary variant ghost correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with primary variant none correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1053,8 +1053,8 @@ exports[`SelectMenu > renders with primary variant none correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with primary variant outline correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1092,8 +1092,8 @@ exports[`SelectMenu > renders with primary variant outline correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with primary variant soft correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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 pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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 pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1131,8 +1131,8 @@ exports[`SelectMenu > renders with primary variant soft correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with primary variant subtle correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1170,8 +1170,8 @@ exports[`SelectMenu > renders with primary variant subtle correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with required correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1209,8 +1209,8 @@ exports[`SelectMenu > renders with required correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with searchInput placeholder correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1248,8 +1248,8 @@ exports[`SelectMenu > renders with searchInput placeholder correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with selectedIcon correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1287,8 +1287,8 @@ exports[`SelectMenu > renders with selectedIcon correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with size lg correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-[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)] pr-10" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-[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)] pe-10" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1326,8 +1326,8 @@ exports[`SelectMenu > renders with size lg correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with size md correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1365,8 +1365,8 @@ exports[`SelectMenu > renders with size md correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with size sm correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-[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)] pr-8" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-[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)] pe-8" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1404,8 +1404,8 @@ exports[`SelectMenu > renders with size sm correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with size xl correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-[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)] pr-11" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-[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)] pe-11" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1443,8 +1443,8 @@ exports[`SelectMenu > renders with size xl correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with size xs correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-[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)] pr-7" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-[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)] pe-7" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1482,8 +1482,8 @@ exports[`SelectMenu > renders with size xs correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with trailing and icon correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
@@ -1491,8 +1491,8 @@ exports[`SelectMenu > renders with trailing and icon correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with trailing slot correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5">Trailing slot</span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5">Trailing slot</span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1530,8 +1530,8 @@ exports[`SelectMenu > renders with trailing slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with trailingIcon correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
@@ -1539,8 +1539,8 @@ exports[`SelectMenu > renders with trailingIcon correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with trailingIcon correctly 2`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1578,8 +1578,8 @@ exports[`SelectMenu > renders with trailingIcon correctly 2`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with ui correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1617,8 +1617,8 @@ exports[`SelectMenu > renders with ui correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with valueKey correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1656,8 +1656,8 @@ exports[`SelectMenu > renders with valueKey correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders without searchInput correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`SelectMenu > renders with arrow correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -40,29 +40,29 @@ exports[`SelectMenu > renders with arrow correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with avatar and leadingIcon correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><span class="iconify i-heroicons:arrow-left shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></button>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-heroicons:arrow-left shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with avatar and trailingIcon correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><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://github.com/benjamincanac.png" 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><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:arrow-right shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></button>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><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://github.com/benjamincanac.png" 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><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:arrow-right shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with avatar correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><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://github.com/benjamincanac.png" 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><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></button>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><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://github.com/benjamincanac.png" 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><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with class correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9 rounded-full" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9 rounded-full" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -100,8 +100,8 @@ exports[`SelectMenu > renders with class correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with default slot correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if-->Default slot<span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if-->Default slot<span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -139,8 +139,8 @@ exports[`SelectMenu > renders with default slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with defaultValue correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -178,8 +178,8 @@ exports[`SelectMenu > renders with defaultValue correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with disabled correctly 1`] = `
|
||||
"<button disabled="" type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" data-disabled="" aria-disabled="true" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button disabled="" type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" data-disabled="" aria-disabled="true" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -217,15 +217,15 @@ exports[`SelectMenu > renders with disabled correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with icon correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><span class="iconify i-heroicons:magnifying-glass shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></button>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-heroicons:magnifying-glass shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with id correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr" id="id">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr" id="id">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -263,8 +263,8 @@ exports[`SelectMenu > renders with id correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with item slot correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -302,8 +302,8 @@ exports[`SelectMenu > renders with item slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with item-label slot correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -341,8 +341,8 @@ exports[`SelectMenu > renders with item-label slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with item-leading slot correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -380,8 +380,8 @@ exports[`SelectMenu > renders with item-leading slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with item-trailing slot correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -419,8 +419,8 @@ exports[`SelectMenu > renders with item-trailing slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with items correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -458,8 +458,8 @@ exports[`SelectMenu > renders with items correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with labelKey correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -497,14 +497,14 @@ exports[`SelectMenu > renders with labelKey correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with leading and icon correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><span class="iconify i-heroicons:arrow-left shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></button>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-heroicons:arrow-left shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with leading slot correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9" style="pointer-events: auto;" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5">Leading slot</span><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></button>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9" style="pointer-events: auto;" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5">Leading slot</span><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></button>
|
||||
<!--teleport start-->
|
||||
|
||||
|
||||
@@ -541,36 +541,36 @@ exports[`SelectMenu > renders with leading slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with leadingIcon correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><span class="iconify i-heroicons:arrow-left shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></button>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-heroicons:arrow-left shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with loading and avatar correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><span class="iconify i-heroicons:arrow-path-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" aria-hidden="true"></span></span><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></button>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-heroicons:arrow-path-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" aria-hidden="true"></span></span><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with loading correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><span class="iconify i-heroicons:arrow-path-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" aria-hidden="true"></span></span><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></button>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-heroicons:arrow-path-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" aria-hidden="true"></span></span><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with loading trailing and avatar correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><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://github.com/benjamincanac.png" 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><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:arrow-path-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></button>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><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://github.com/benjamincanac.png" 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><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:arrow-path-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with loading trailing correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:arrow-path-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" aria-hidden="true"></span></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:arrow-path-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
@@ -578,15 +578,15 @@ exports[`SelectMenu > renders with loading trailing correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with loadingIcon correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pl-9 pr-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center pl-2.5"><span class="iconify i-heroicons:sparkles shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" aria-hidden="true"></span></span><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></button>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] ps-9 pe-9" dir="ltr"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-heroicons:sparkles shrink-0 text-[var(--ui-text-dimmed)] size-5 animate-spin" aria-hidden="true"></span></span><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with modelValue correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate">Backlog</span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate">Backlog</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -624,8 +624,8 @@ exports[`SelectMenu > renders with modelValue correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with multiple and modelValue correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate">Backlog, Todo</span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate">Backlog, Todo</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -663,8 +663,8 @@ exports[`SelectMenu > renders with multiple and modelValue correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with multiple correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -702,8 +702,8 @@ exports[`SelectMenu > renders with multiple correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with name correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -741,8 +741,8 @@ exports[`SelectMenu > renders with name correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with neutral variant ghost correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -780,8 +780,8 @@ exports[`SelectMenu > renders with neutral variant ghost correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with neutral variant none correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -819,8 +819,8 @@ exports[`SelectMenu > renders with neutral variant none correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with neutral variant outline correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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-border-inverted)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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-border-inverted)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -858,8 +858,8 @@ exports[`SelectMenu > renders with neutral variant outline correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with neutral variant soft correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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 pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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 pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -897,8 +897,8 @@ exports[`SelectMenu > renders with neutral variant soft correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with neutral variant subtle correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -936,8 +936,8 @@ exports[`SelectMenu > renders with neutral variant subtle correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with placeholder correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]">Search...</span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]">Search...</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -975,8 +975,8 @@ exports[`SelectMenu > renders with placeholder correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with primary variant ghost correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1014,8 +1014,8 @@ exports[`SelectMenu > renders with primary variant ghost correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with primary variant none correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1053,8 +1053,8 @@ exports[`SelectMenu > renders with primary variant none correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with primary variant outline correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1092,8 +1092,8 @@ exports[`SelectMenu > renders with primary variant outline correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with primary variant soft correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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 pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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 pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1131,8 +1131,8 @@ exports[`SelectMenu > renders with primary variant soft correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with primary variant subtle correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1170,8 +1170,8 @@ exports[`SelectMenu > renders with primary variant subtle correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with required correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1209,8 +1209,8 @@ exports[`SelectMenu > renders with required correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with searchInput placeholder correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1248,8 +1248,8 @@ exports[`SelectMenu > renders with searchInput placeholder correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with selectedIcon correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1287,8 +1287,8 @@ exports[`SelectMenu > renders with selectedIcon correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with size lg correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-[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)] pr-10" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-3"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-[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)] pe-10" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-3"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1326,8 +1326,8 @@ exports[`SelectMenu > renders with size lg correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with size md correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1365,8 +1365,8 @@ exports[`SelectMenu > renders with size md correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with size sm correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-[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)] pr-8" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-4" aria-hidden="true"></span></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-[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)] pe-8" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-4" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1404,8 +1404,8 @@ exports[`SelectMenu > renders with size sm correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with size xl correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-[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)] pr-11" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-3"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-6" aria-hidden="true"></span></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-[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)] pe-11" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-3"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-6" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1443,8 +1443,8 @@ exports[`SelectMenu > renders with size xl correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with size xs correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-[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)] pr-7" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-4" aria-hidden="true"></span></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-[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)] pe-7" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-4" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1482,8 +1482,8 @@ exports[`SelectMenu > renders with size xs correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with trailing and icon correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
@@ -1491,8 +1491,8 @@ exports[`SelectMenu > renders with trailing and icon correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with trailing slot correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5">Trailing slot</span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5">Trailing slot</span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1530,8 +1530,8 @@ exports[`SelectMenu > renders with trailing slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with trailingIcon correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:arrow-right shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:arrow-right shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
@@ -1539,8 +1539,8 @@ exports[`SelectMenu > renders with trailingIcon correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with trailingIcon correctly 2`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1578,8 +1578,8 @@ exports[`SelectMenu > renders with trailingIcon correctly 2`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with ui correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1617,8 +1617,8 @@ exports[`SelectMenu > renders with ui correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders with valueKey correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
@@ -1656,8 +1656,8 @@ exports[`SelectMenu > renders with valueKey correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`SelectMenu > renders without searchInput correctly 1`] = `
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pr-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[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)] pe-9" style="pointer-events: auto;" dir="ltr">
|
||||
<!--v-if--><span class="truncate text-[var(--ui-text-dimmed)]"> </span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-[var(--ui-text-dimmed)] size-5" aria-hidden="true"></span></span>
|
||||
</button>
|
||||
<!--teleport start-->
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ exports[`Slideover > renders with body slot correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" data-side="right" tabindex="-1" class="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 right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<!--v-if-->
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 right-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -31,7 +31,7 @@ exports[`Slideover > renders with bottom side correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" data-side="bottom" tabindex="-1" class="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 inset-x-0 bottom-0 max-h-full data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<h2 id="radix-vue-dialog-title-v-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
|
||||
<p id="radix-vue-dialog-description-v-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><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)] 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 p-1.5 absolute top-4 right-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<p id="radix-vue-dialog-description-v-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><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)] 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 p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -53,7 +53,7 @@ exports[`Slideover > renders with class correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" data-side="right" tabindex="-1" class="fixed divide-y divide-[var(--ui-border)] sm:ring ring-[var(--ui-border)] sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out] bg-[var(--ui-bg-elevated)]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<!--v-if-->
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 right-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -94,7 +94,7 @@ exports[`Slideover > renders with closeIcon correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" data-side="right" tabindex="-1" class="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 right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<!--v-if-->
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 right-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -128,7 +128,7 @@ exports[`Slideover > renders with default slot correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="radix-vue-dialog-content-v-0" role="dialog" aria-describedby="radix-vue-dialog-description-v-2" aria-labelledby="radix-vue-dialog-title-v-1" data-state="open" data-side="right" tabindex="-1" class="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 right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<!--v-if-->
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 right-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -150,7 +150,7 @@ exports[`Slideover > renders with description correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" data-side="right" tabindex="-1" class="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 right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<h2 id="radix-vue-dialog-title-v-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
|
||||
<p id="radix-vue-dialog-description-v-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><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)] 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 p-1.5 absolute top-4 right-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<p id="radix-vue-dialog-description-v-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><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)] 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 p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -172,7 +172,7 @@ exports[`Slideover > renders with description slot correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" data-side="right" tabindex="-1" class="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 right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<!--v-if-->
|
||||
<p id="radix-vue-dialog-description-v-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description slot</p><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)] 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 p-1.5 absolute top-4 right-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<p id="radix-vue-dialog-description-v-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description slot</p><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)] 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 p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -194,7 +194,7 @@ exports[`Slideover > renders with footer slot correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" data-side="right" tabindex="-1" class="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 right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<!--v-if-->
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 right-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -232,7 +232,7 @@ exports[`Slideover > renders with left side correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" data-side="left" tabindex="-1" class="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 left-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-left_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-left_200ms_ease-in-out]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<h2 id="radix-vue-dialog-title-v-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
|
||||
<p id="radix-vue-dialog-description-v-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><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)] 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 p-1.5 absolute top-4 right-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<p id="radix-vue-dialog-description-v-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><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)] 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 p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -254,7 +254,7 @@ exports[`Slideover > renders with open correctly 1`] = `
|
||||
<div data-dismissable-layer="" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" data-side="right" tabindex="-1" class="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 right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" style="pointer-events: auto;">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<!--v-if-->
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 right-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -276,7 +276,7 @@ exports[`Slideover > renders with title correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" data-side="right" tabindex="-1" class="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 right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<h2 id="radix-vue-dialog-title-v-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 right-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -298,7 +298,7 @@ exports[`Slideover > renders with title slot correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" data-side="right" tabindex="-1" class="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 right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<h2 id="radix-vue-dialog-title-v-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title slot</h2>
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 right-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -320,7 +320,7 @@ exports[`Slideover > renders with top side correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" data-side="top" tabindex="-1" class="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 inset-x-0 top-0 max-h-full data-[state=open]:animate-[slide-in-from-top_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-top_200ms_ease-in-out]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<h2 id="radix-vue-dialog-title-v-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
|
||||
<p id="radix-vue-dialog-description-v-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><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)] 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 p-1.5 absolute top-4 right-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<p id="radix-vue-dialog-description-v-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><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)] 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 p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -342,7 +342,7 @@ exports[`Slideover > renders with ui correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" data-side="right" tabindex="-1" class="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 right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<!--v-if-->
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 right-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 end-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -383,7 +383,7 @@ exports[`Slideover > renders without overlay correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" data-side="right" tabindex="-1" class="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 right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<h2 id="radix-vue-dialog-title-v-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
|
||||
<p id="radix-vue-dialog-description-v-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><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)] 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 p-1.5 absolute top-4 right-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<p id="radix-vue-dialog-description-v-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><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)] 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 p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -405,7 +405,7 @@ exports[`Slideover > renders without transition correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" data-side="right" tabindex="-1" class="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 right-0 inset-y-0 w-full max-w-md">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<h2 id="radix-vue-dialog-title-v-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
|
||||
<p id="radix-vue-dialog-description-v-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><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)] 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 p-1.5 absolute top-4 right-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<p id="radix-vue-dialog-description-v-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><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)] 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 p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
|
||||
@@ -9,7 +9,7 @@ exports[`Slideover > renders with body slot correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" data-side="right" tabindex="-1" class="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 right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<!--v-if-->
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 right-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 end-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -31,7 +31,7 @@ exports[`Slideover > renders with bottom side correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" data-side="bottom" tabindex="-1" class="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 inset-x-0 bottom-0 max-h-full data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<h2 id="radix-vue-dialog-title-v-0-0-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
|
||||
<p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><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)] 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 p-1.5 absolute top-4 right-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><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)] 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 p-1.5 absolute top-4 end-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -53,7 +53,7 @@ exports[`Slideover > renders with class correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" data-side="right" tabindex="-1" class="fixed divide-y divide-[var(--ui-border)] sm:ring ring-[var(--ui-border)] sm:shadow-lg flex flex-col focus:outline-none right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out] bg-[var(--ui-bg-elevated)]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<!--v-if-->
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 right-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 end-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -94,7 +94,7 @@ exports[`Slideover > renders with closeIcon correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" data-side="right" tabindex="-1" class="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 right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<!--v-if-->
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 right-4"><span class="iconify i-heroicons:trash shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 end-4"><span class="iconify i-heroicons:trash shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -128,7 +128,7 @@ exports[`Slideover > renders with default slot correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="radix-vue-dialog-content-v-0-0-0" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-2" aria-labelledby="radix-vue-dialog-title-v-0-0-1" data-state="open" data-side="right" tabindex="-1" class="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 right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<!--v-if-->
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 right-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 end-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -150,7 +150,7 @@ exports[`Slideover > renders with description correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" data-side="right" tabindex="-1" class="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 right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<h2 id="radix-vue-dialog-title-v-0-0-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
|
||||
<p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><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)] 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 p-1.5 absolute top-4 right-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><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)] 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 p-1.5 absolute top-4 end-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -172,7 +172,7 @@ exports[`Slideover > renders with description slot correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" data-side="right" tabindex="-1" class="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 right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<!--v-if-->
|
||||
<p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description slot</p><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)] 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 p-1.5 absolute top-4 right-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description slot</p><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)] 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 p-1.5 absolute top-4 end-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -194,7 +194,7 @@ exports[`Slideover > renders with footer slot correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" data-side="right" tabindex="-1" class="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 right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<!--v-if-->
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 right-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 end-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -232,7 +232,7 @@ exports[`Slideover > renders with left side correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" data-side="left" tabindex="-1" class="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 left-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-left_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-left_200ms_ease-in-out]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<h2 id="radix-vue-dialog-title-v-0-0-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
|
||||
<p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><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)] 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 p-1.5 absolute top-4 right-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><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)] 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 p-1.5 absolute top-4 end-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -254,7 +254,7 @@ exports[`Slideover > renders with open correctly 1`] = `
|
||||
<div data-dismissable-layer="" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" data-side="right" tabindex="-1" class="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 right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" style="pointer-events: auto;">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<!--v-if-->
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 right-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 end-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -276,7 +276,7 @@ exports[`Slideover > renders with title correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" data-side="right" tabindex="-1" class="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 right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<h2 id="radix-vue-dialog-title-v-0-0-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 right-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 end-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -298,7 +298,7 @@ exports[`Slideover > renders with title slot correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" data-side="right" tabindex="-1" class="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 right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<h2 id="radix-vue-dialog-title-v-0-0-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title slot</h2>
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 right-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 end-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -320,7 +320,7 @@ exports[`Slideover > renders with top side correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" data-side="top" tabindex="-1" class="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 inset-x-0 top-0 max-h-full data-[state=open]:animate-[slide-in-from-top_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-top_200ms_ease-in-out]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<h2 id="radix-vue-dialog-title-v-0-0-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
|
||||
<p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><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)] 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 p-1.5 absolute top-4 right-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><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)] 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 p-1.5 absolute top-4 end-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -342,7 +342,7 @@ exports[`Slideover > renders with ui correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" data-side="right" tabindex="-1" class="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 right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<!--v-if-->
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 right-2"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if--><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)] 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 p-1.5 absolute top-4 end-2"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -383,7 +383,7 @@ exports[`Slideover > renders without overlay correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" data-side="right" tabindex="-1" class="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 right-0 inset-y-0 w-full max-w-md data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<h2 id="radix-vue-dialog-title-v-0-0-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
|
||||
<p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><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)] 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 p-1.5 absolute top-4 right-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><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)] 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 p-1.5 absolute top-4 end-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -405,7 +405,7 @@ exports[`Slideover > renders without transition correctly 1`] = `
|
||||
<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" data-side="right" tabindex="-1" class="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 right-0 inset-y-0 w-full max-w-md">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<h2 id="radix-vue-dialog-title-v-0-0-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
|
||||
<p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><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)] 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 p-1.5 absolute top-4 right-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p><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)] 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 p-1.5 absolute top-4 end-4"><span class="iconify i-heroicons:x-mark-20-solid shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
exports[`Switch > renders with as correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5">
|
||||
<section class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0" role="switch" aria-checked="false" aria-required="false" data-state="unchecked" disabled="false" value="on"><span data-state="unchecked" class="group pointer-events-none 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 size-4 data-[state=checked]:translate-x-4"></span></section>
|
||||
<section class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0" role="switch" aria-checked="false" aria-required="false" data-state="unchecked" disabled="false" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></section>
|
||||
<!---->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
@@ -12,7 +12,7 @@ exports[`Switch > renders with as correctly 1`] = `
|
||||
|
||||
exports[`Switch > renders with checkedIcon correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0" role="switch" type="button" aria-checked="true" aria-required="false" data-state="checked" value="on"><span data-state="checked" class="group pointer-events-none 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 size-4 data-[state=checked]:translate-x-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="absolute shrink-0 group-data-[state=unchecked]:text-[var(--ui-text-dimmed)] opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-[var(--ui-primary)] group-data-[state=checked]:opacity-100" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--v-if--></span></button>
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0" role="switch" type="button" aria-checked="true" aria-required="false" data-state="checked" value="on"><span data-state="checked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="absolute shrink-0 group-data-[state=unchecked]:text-[var(--ui-text-dimmed)] opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-[var(--ui-primary)] group-data-[state=checked]:opacity-100" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--v-if--></span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
@@ -21,7 +21,7 @@ exports[`Switch > renders with checkedIcon correctly 1`] = `
|
||||
|
||||
exports[`Switch > renders with class correctly 1`] = `
|
||||
"<div class="relative items-start inline-flex">
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none 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 size-4 data-[state=checked]:translate-x-4"></span></button>
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
@@ -30,7 +30,7 @@ exports[`Switch > renders with class correctly 1`] = `
|
||||
|
||||
exports[`Switch > renders with color neutral correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-bg-inverted)] focus-visible:ring-[var(--ui-border-inverted)] w-9" id="v-0" role="switch" type="button" aria-checked="true" aria-required="false" data-state="checked" value="on"><span data-state="checked" class="group pointer-events-none 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 size-4 data-[state=checked]:translate-x-4"></span></button>
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-bg-inverted)] focus-visible:ring-[var(--ui-border-inverted)] w-9" id="v-0" role="switch" type="button" aria-checked="true" aria-required="false" data-state="checked" value="on"><span data-state="checked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
@@ -39,7 +39,7 @@ exports[`Switch > renders with color neutral correctly 1`] = `
|
||||
|
||||
exports[`Switch > renders with defaultValue correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0" role="switch" type="button" aria-checked="true" aria-required="false" data-state="checked" value="on"><span data-state="checked" class="group pointer-events-none 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 size-4 data-[state=checked]:translate-x-4"></span></button>
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0" role="switch" type="button" aria-checked="true" aria-required="false" data-state="checked" value="on"><span data-state="checked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
@@ -48,7 +48,7 @@ exports[`Switch > renders with defaultValue correctly 1`] = `
|
||||
|
||||
exports[`Switch > renders with description correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none 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 size-4 data-[state=checked]:translate-x-4"></span></button>
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="ms-2 text-sm"><label for="v-0" class="block font-medium text-[var(--ui-text)]">Label</label>
|
||||
@@ -59,7 +59,7 @@ exports[`Switch > renders with description correctly 1`] = `
|
||||
|
||||
exports[`Switch > renders with description slot correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none 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 size-4 data-[state=checked]:translate-x-4"></span></button>
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="ms-2 text-sm"><label for="v-0" class="block font-medium text-[var(--ui-text)]">Description slot</label>
|
||||
@@ -70,7 +70,7 @@ exports[`Switch > renders with description slot correctly 1`] = `
|
||||
|
||||
exports[`Switch > renders with disabled correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9 cursor-not-allowed opacity-75" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" value="on"><span data-state="unchecked" data-disabled="" class="group pointer-events-none 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 size-4 data-[state=checked]:translate-x-4"></span></button>
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9 cursor-not-allowed opacity-75" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" value="on"><span data-state="unchecked" data-disabled="" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
@@ -79,7 +79,7 @@ exports[`Switch > renders with disabled correctly 1`] = `
|
||||
|
||||
exports[`Switch > renders with id correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="id" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none 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 size-4 data-[state=checked]:translate-x-4"></span></button>
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="id" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
@@ -88,7 +88,7 @@ exports[`Switch > renders with id correctly 1`] = `
|
||||
|
||||
exports[`Switch > renders with label correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none 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 size-4 data-[state=checked]:translate-x-4"></span></button>
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="ms-2 text-sm"><label for="v-0" class="block font-medium text-[var(--ui-text)]">Label</label>
|
||||
@@ -99,7 +99,7 @@ exports[`Switch > renders with label correctly 1`] = `
|
||||
|
||||
exports[`Switch > renders with label slot correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none 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 size-4 data-[state=checked]:translate-x-4"></span></button>
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="ms-2 text-sm"><label for="v-0" class="block font-medium text-[var(--ui-text)]">Label slot</label>
|
||||
@@ -110,7 +110,7 @@ exports[`Switch > renders with label slot correctly 1`] = `
|
||||
|
||||
exports[`Switch > renders with loading correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9 cursor-not-allowed opacity-75" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" value="on"><span data-state="unchecked" data-disabled="" class="group pointer-events-none 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 size-4 data-[state=checked]:translate-x-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="absolute shrink-0 group-data-[state=unchecked]:text-[var(--ui-text-dimmed)] opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-[var(--ui-primary)] group-data-[state=checked]:opacity-100 group-data-[state=unchecked]:opacity-100 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9 cursor-not-allowed opacity-75" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" value="on"><span data-state="unchecked" data-disabled="" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="absolute shrink-0 group-data-[state=unchecked]:text-[var(--ui-text-dimmed)] opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-[var(--ui-primary)] group-data-[state=checked]:opacity-100 group-data-[state=unchecked]:opacity-100 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
@@ -119,7 +119,7 @@ exports[`Switch > renders with loading correctly 1`] = `
|
||||
|
||||
exports[`Switch > renders with loadingIcon correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9 cursor-not-allowed opacity-75" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" value="on"><span data-state="unchecked" data-disabled="" class="group pointer-events-none 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 size-4 data-[state=checked]:translate-x-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="absolute shrink-0 group-data-[state=unchecked]:text-[var(--ui-text-dimmed)] opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-[var(--ui-primary)] group-data-[state=checked]:opacity-100 group-data-[state=unchecked]:opacity-100 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9 cursor-not-allowed opacity-75" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" value="on"><span data-state="unchecked" data-disabled="" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="absolute shrink-0 group-data-[state=unchecked]:text-[var(--ui-text-dimmed)] opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-[var(--ui-primary)] group-data-[state=checked]:opacity-100 group-data-[state=unchecked]:opacity-100 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
@@ -128,7 +128,7 @@ exports[`Switch > renders with loadingIcon correctly 1`] = `
|
||||
|
||||
exports[`Switch > renders with name correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none 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 size-4 data-[state=checked]:translate-x-4"></span></button>
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
@@ -137,7 +137,7 @@ exports[`Switch > renders with name correctly 1`] = `
|
||||
|
||||
exports[`Switch > renders with required correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="true" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none 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 size-4 data-[state=checked]:translate-x-4"></span></button>
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="true" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="ms-2 text-sm"><label for="v-0" class="block font-medium text-[var(--ui-text)] after:content-['*'] after:ms-0.5 after:text-[var(--ui-error)]">Label</label>
|
||||
@@ -148,7 +148,7 @@ exports[`Switch > renders with required correctly 1`] = `
|
||||
|
||||
exports[`Switch > renders with size lg correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-10" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none 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 size-4.5 data-[state=checked]:translate-x-4.5"></span></button>
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-10" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4.5 data-[state=checked]:translate-x-4.5 data-[state=checked]:rtl:-translate-x-4.5"></span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
@@ -157,7 +157,7 @@ exports[`Switch > renders with size lg correctly 1`] = `
|
||||
|
||||
exports[`Switch > renders with size md correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none 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 size-4 data-[state=checked]:translate-x-4"></span></button>
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
@@ -166,7 +166,7 @@ exports[`Switch > renders with size md correctly 1`] = `
|
||||
|
||||
exports[`Switch > renders with size sm correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-4"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-8" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none 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 size-3.5 data-[state=checked]:translate-x-3.5"></span></button>
|
||||
<div class="flex items-center h-4"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-8" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-3.5 data-[state=checked]:translate-x-3.5 data-[state=checked]:rtl:-translate-x-3.5"></span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
@@ -175,7 +175,7 @@ exports[`Switch > renders with size sm correctly 1`] = `
|
||||
|
||||
exports[`Switch > renders with size xl correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-6"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-11" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none 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 size-5 data-[state=checked]:translate-x-5"></span></button>
|
||||
<div class="flex items-center h-6"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-11" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-5 data-[state=checked]:translate-x-5 data-[state=checked]:rtl:-translate-x-5"></span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
@@ -184,7 +184,7 @@ exports[`Switch > renders with size xl correctly 1`] = `
|
||||
|
||||
exports[`Switch > renders with size xs correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-4"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-7" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none 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 size-3 data-[state=checked]:translate-x-3"></span></button>
|
||||
<div class="flex items-center h-4"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-7" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-3 data-[state=checked]:translate-x-3 data-[state=checked]:rtl:-translate-x-3"></span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
@@ -193,7 +193,7 @@ exports[`Switch > renders with size xs correctly 1`] = `
|
||||
|
||||
exports[`Switch > renders with ui correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none 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 size-4 data-[state=checked]:translate-x-4"></span></button>
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
@@ -202,7 +202,7 @@ exports[`Switch > renders with ui correctly 1`] = `
|
||||
|
||||
exports[`Switch > renders with uncheckedIcon correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none 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 size-4 data-[state=checked]:translate-x-4"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="absolute shrink-0 group-data-[state=unchecked]:text-[var(--ui-text-dimmed)] opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-[var(--ui-primary)] group-data-[state=unchecked]:opacity-100" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="absolute shrink-0 group-data-[state=unchecked]:text-[var(--ui-text-dimmed)] opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-[var(--ui-primary)] group-data-[state=unchecked]:opacity-100" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
@@ -211,7 +211,7 @@ exports[`Switch > renders with uncheckedIcon correctly 1`] = `
|
||||
|
||||
exports[`Switch > renders with value correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="value"><span data-state="unchecked" class="group pointer-events-none 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 size-4 data-[state=checked]:translate-x-4"></span></button>
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="value"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
exports[`Switch > renders with as correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5">
|
||||
<section class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0-0" role="switch" aria-checked="false" aria-required="false" data-state="unchecked" disabled="false" value="on"><span data-state="unchecked" class="group pointer-events-none 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 size-4 data-[state=checked]:translate-x-4"></span></section>
|
||||
<section class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0-0" role="switch" aria-checked="false" aria-required="false" data-state="unchecked" disabled="false" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></section>
|
||||
<!---->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
@@ -12,7 +12,7 @@ exports[`Switch > renders with as correctly 1`] = `
|
||||
|
||||
exports[`Switch > renders with checkedIcon correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0-0" role="switch" type="button" aria-checked="true" aria-required="false" data-state="checked" value="on"><span data-state="checked" class="group pointer-events-none 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 size-4 data-[state=checked]:translate-x-4"><span class="iconify i-heroicons:check-20-solid absolute shrink-0 group-data-[state=unchecked]:text-[var(--ui-text-dimmed)] opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-[var(--ui-primary)] group-data-[state=checked]:opacity-100" aria-hidden="true"></span>
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0-0" role="switch" type="button" aria-checked="true" aria-required="false" data-state="checked" value="on"><span data-state="checked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"><span class="iconify i-heroicons:check-20-solid absolute shrink-0 group-data-[state=unchecked]:text-[var(--ui-text-dimmed)] opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-[var(--ui-primary)] group-data-[state=checked]:opacity-100" aria-hidden="true"></span>
|
||||
<!--v-if--></span>
|
||||
</button>
|
||||
<!---->
|
||||
@@ -23,7 +23,7 @@ exports[`Switch > renders with checkedIcon correctly 1`] = `
|
||||
|
||||
exports[`Switch > renders with class correctly 1`] = `
|
||||
"<div class="relative items-start inline-flex">
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none 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 size-4 data-[state=checked]:translate-x-4"></span></button>
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
@@ -32,7 +32,7 @@ exports[`Switch > renders with class correctly 1`] = `
|
||||
|
||||
exports[`Switch > renders with color neutral correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-bg-inverted)] focus-visible:ring-[var(--ui-border-inverted)] w-9" id="v-0-0" role="switch" type="button" aria-checked="true" aria-required="false" data-state="checked" value="on"><span data-state="checked" class="group pointer-events-none 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 size-4 data-[state=checked]:translate-x-4"></span></button>
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-bg-inverted)] focus-visible:ring-[var(--ui-border-inverted)] w-9" id="v-0-0" role="switch" type="button" aria-checked="true" aria-required="false" data-state="checked" value="on"><span data-state="checked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
@@ -41,7 +41,7 @@ exports[`Switch > renders with color neutral correctly 1`] = `
|
||||
|
||||
exports[`Switch > renders with defaultValue correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0-0" role="switch" type="button" aria-checked="true" aria-required="false" data-state="checked" value="on"><span data-state="checked" class="group pointer-events-none 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 size-4 data-[state=checked]:translate-x-4"></span></button>
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0-0" role="switch" type="button" aria-checked="true" aria-required="false" data-state="checked" value="on"><span data-state="checked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
@@ -50,7 +50,7 @@ exports[`Switch > renders with defaultValue correctly 1`] = `
|
||||
|
||||
exports[`Switch > renders with description correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none 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 size-4 data-[state=checked]:translate-x-4"></span></button>
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="ms-2 text-sm"><label for="v-0-0" class="block font-medium text-[var(--ui-text)]">Label</label>
|
||||
@@ -61,7 +61,7 @@ exports[`Switch > renders with description correctly 1`] = `
|
||||
|
||||
exports[`Switch > renders with description slot correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none 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 size-4 data-[state=checked]:translate-x-4"></span></button>
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="ms-2 text-sm"><label for="v-0-0" class="block font-medium text-[var(--ui-text)]">Description slot</label>
|
||||
@@ -72,7 +72,7 @@ exports[`Switch > renders with description slot correctly 1`] = `
|
||||
|
||||
exports[`Switch > renders with disabled correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9 cursor-not-allowed opacity-75" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" value="on"><span data-state="unchecked" data-disabled="" class="group pointer-events-none 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 size-4 data-[state=checked]:translate-x-4"></span></button>
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9 cursor-not-allowed opacity-75" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" value="on"><span data-state="unchecked" data-disabled="" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
@@ -81,7 +81,7 @@ exports[`Switch > renders with disabled correctly 1`] = `
|
||||
|
||||
exports[`Switch > renders with id correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="id" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none 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 size-4 data-[state=checked]:translate-x-4"></span></button>
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="id" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
@@ -90,7 +90,7 @@ exports[`Switch > renders with id correctly 1`] = `
|
||||
|
||||
exports[`Switch > renders with label correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none 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 size-4 data-[state=checked]:translate-x-4"></span></button>
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="ms-2 text-sm"><label for="v-0-0" class="block font-medium text-[var(--ui-text)]">Label</label>
|
||||
@@ -101,7 +101,7 @@ exports[`Switch > renders with label correctly 1`] = `
|
||||
|
||||
exports[`Switch > renders with label slot correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none 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 size-4 data-[state=checked]:translate-x-4"></span></button>
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="ms-2 text-sm"><label for="v-0-0" class="block font-medium text-[var(--ui-text)]">Label slot</label>
|
||||
@@ -112,7 +112,7 @@ exports[`Switch > renders with label slot correctly 1`] = `
|
||||
|
||||
exports[`Switch > renders with loading correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9 cursor-not-allowed opacity-75" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" value="on"><span data-state="unchecked" data-disabled="" class="group pointer-events-none 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 size-4 data-[state=checked]:translate-x-4"><span class="iconify i-heroicons:arrow-path-20-solid absolute shrink-0 group-data-[state=unchecked]:text-[var(--ui-text-dimmed)] opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-[var(--ui-primary)] group-data-[state=checked]:opacity-100 group-data-[state=unchecked]:opacity-100 animate-spin" aria-hidden="true"></span></span></button>
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9 cursor-not-allowed opacity-75" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" value="on"><span data-state="unchecked" data-disabled="" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"><span class="iconify i-heroicons:arrow-path-20-solid absolute shrink-0 group-data-[state=unchecked]:text-[var(--ui-text-dimmed)] opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-[var(--ui-primary)] group-data-[state=checked]:opacity-100 group-data-[state=unchecked]:opacity-100 animate-spin" aria-hidden="true"></span></span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
@@ -121,7 +121,7 @@ exports[`Switch > renders with loading correctly 1`] = `
|
||||
|
||||
exports[`Switch > renders with loadingIcon correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9 cursor-not-allowed opacity-75" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" value="on"><span data-state="unchecked" data-disabled="" class="group pointer-events-none 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 size-4 data-[state=checked]:translate-x-4"><span class="iconify i-heroicons:sparkles absolute shrink-0 group-data-[state=unchecked]:text-[var(--ui-text-dimmed)] opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-[var(--ui-primary)] group-data-[state=checked]:opacity-100 group-data-[state=unchecked]:opacity-100 animate-spin" aria-hidden="true"></span></span></button>
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9 cursor-not-allowed opacity-75" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" value="on"><span data-state="unchecked" data-disabled="" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"><span class="iconify i-heroicons:sparkles absolute shrink-0 group-data-[state=unchecked]:text-[var(--ui-text-dimmed)] opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-[var(--ui-primary)] group-data-[state=checked]:opacity-100 group-data-[state=unchecked]:opacity-100 animate-spin" aria-hidden="true"></span></span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
@@ -130,7 +130,7 @@ exports[`Switch > renders with loadingIcon correctly 1`] = `
|
||||
|
||||
exports[`Switch > renders with name correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none 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 size-4 data-[state=checked]:translate-x-4"></span></button>
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
@@ -139,7 +139,7 @@ exports[`Switch > renders with name correctly 1`] = `
|
||||
|
||||
exports[`Switch > renders with required correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="true" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none 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 size-4 data-[state=checked]:translate-x-4"></span></button>
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="true" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="ms-2 text-sm"><label for="v-0-0" class="block font-medium text-[var(--ui-text)] after:content-['*'] after:ms-0.5 after:text-[var(--ui-error)]">Label</label>
|
||||
@@ -150,7 +150,7 @@ exports[`Switch > renders with required correctly 1`] = `
|
||||
|
||||
exports[`Switch > renders with size lg correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-10" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none 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 size-4.5 data-[state=checked]:translate-x-4.5"></span></button>
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-10" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4.5 data-[state=checked]:translate-x-4.5 data-[state=checked]:rtl:-translate-x-4.5"></span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
@@ -159,7 +159,7 @@ exports[`Switch > renders with size lg correctly 1`] = `
|
||||
|
||||
exports[`Switch > renders with size md correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none 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 size-4 data-[state=checked]:translate-x-4"></span></button>
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
@@ -168,7 +168,7 @@ exports[`Switch > renders with size md correctly 1`] = `
|
||||
|
||||
exports[`Switch > renders with size sm correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-4"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-8" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none 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 size-3.5 data-[state=checked]:translate-x-3.5"></span></button>
|
||||
<div class="flex items-center h-4"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-8" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-3.5 data-[state=checked]:translate-x-3.5 data-[state=checked]:rtl:-translate-x-3.5"></span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
@@ -177,7 +177,7 @@ exports[`Switch > renders with size sm correctly 1`] = `
|
||||
|
||||
exports[`Switch > renders with size xl correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-6"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-11" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none 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 size-5 data-[state=checked]:translate-x-5"></span></button>
|
||||
<div class="flex items-center h-6"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-11" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-5 data-[state=checked]:translate-x-5 data-[state=checked]:rtl:-translate-x-5"></span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
@@ -186,7 +186,7 @@ exports[`Switch > renders with size xl correctly 1`] = `
|
||||
|
||||
exports[`Switch > renders with size xs correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-4"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-7" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none 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 size-3 data-[state=checked]:translate-x-3"></span></button>
|
||||
<div class="flex items-center h-4"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-7" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-3 data-[state=checked]:translate-x-3 data-[state=checked]:rtl:-translate-x-3"></span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
@@ -195,7 +195,7 @@ exports[`Switch > renders with size xs correctly 1`] = `
|
||||
|
||||
exports[`Switch > renders with ui correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none 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 size-4 data-[state=checked]:translate-x-4"></span></button>
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
@@ -204,7 +204,7 @@ exports[`Switch > renders with ui correctly 1`] = `
|
||||
|
||||
exports[`Switch > renders with uncheckedIcon correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none 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 size-4 data-[state=checked]:translate-x-4"><!--v-if--><span class="iconify i-heroicons:x-mark-20-solid absolute shrink-0 group-data-[state=unchecked]:text-[var(--ui-text-dimmed)] opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-[var(--ui-primary)] group-data-[state=unchecked]:opacity-100" aria-hidden="true"></span></span></button>
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"><!--v-if--><span class="iconify i-heroicons:x-mark-20-solid absolute shrink-0 group-data-[state=unchecked]:text-[var(--ui-text-dimmed)] opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-[var(--ui-primary)] group-data-[state=unchecked]:opacity-100" aria-hidden="true"></span></span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
@@ -213,7 +213,7 @@ exports[`Switch > renders with uncheckedIcon correctly 1`] = `
|
||||
|
||||
exports[`Switch > renders with value correctly 1`] = `
|
||||
"<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="value"><span data-state="unchecked" class="group pointer-events-none 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 size-4 data-[state=checked]:translate-x-4"></span></button>
|
||||
<div class="flex items-center h-5"><button class="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)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)] w-9" id="v-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="value"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -52,7 +52,7 @@ exports[`Tooltip > renders with kbds correctly 1`] = `
|
||||
|
||||
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div data-state="instant-open" style="--radix-tooltip-content-transform-origin: var(--radix-popper-transform-origin); --radix-tooltip-content-available-width: var(--radix-popper-available-width); --radix-tooltip-content-available-height: var(--radix-popper-available-height); --radix-tooltip-trigger-width: var(--radix-popper-anchor-width); --radix-tooltip-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center"><span class="truncate">Tooltip</span><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-['·'] before:mr-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-4 min-w-[16px] text-[10px]">⌃</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-4 min-w-[16px] text-[10px]">K</kbd></span>
|
||||
<div data-state="instant-open" style="--radix-tooltip-content-transform-origin: var(--radix-popper-transform-origin); --radix-tooltip-content-available-width: var(--radix-popper-available-width); --radix-tooltip-content-available-height: var(--radix-popper-available-height); --radix-tooltip-trigger-width: var(--radix-popper-anchor-width); --radix-tooltip-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center"><span class="truncate">Tooltip</span><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-['·'] before:me-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-4 min-w-[16px] text-[10px]">⌃</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-4 min-w-[16px] text-[10px]">K</kbd></span>
|
||||
<!--v-if--><span style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" id="" role="tooltip">Tooltip</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -52,7 +52,7 @@ exports[`Tooltip > renders with kbds correctly 1`] = `
|
||||
|
||||
|
||||
<div data-radix-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div data-state="instant-open" style="--radix-tooltip-content-transform-origin: var(--radix-popper-transform-origin); --radix-tooltip-content-available-width: var(--radix-popper-available-width); --radix-tooltip-content-available-height: var(--radix-popper-available-height); --radix-tooltip-trigger-width: var(--radix-popper-anchor-width); --radix-tooltip-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center"><span class="truncate">Tooltip</span><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-['·'] before:mr-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-4 min-w-[16px] text-[10px]">⌃</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-4 min-w-[16px] text-[10px]">K</kbd></span>
|
||||
<div data-state="instant-open" style="--radix-tooltip-content-transform-origin: var(--radix-popper-transform-origin); --radix-tooltip-content-available-width: var(--radix-popper-available-width); --radix-tooltip-content-available-height: var(--radix-popper-available-height); --radix-tooltip-trigger-width: var(--radix-popper-anchor-width); --radix-tooltip-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" class="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]" data-side="bottom" data-align="center"><span class="truncate">Tooltip</span><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-['·'] before:me-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-4 min-w-[16px] text-[10px]">⌃</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-4 min-w-[16px] text-[10px]">K</kbd></span>
|
||||
<!--v-if--><span style="position: absolute; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" id="" role="tooltip">Tooltip</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user